ztree加easyui加候选区

ztree加easyui加候选区

        .resource {
            padding: 5px;
            height: 16px;
            border-bottom: 1px dashed #ccc;
        }

        .resource:hover {
            background: #f4f4f4;
        }

        .resource .left {
            float: left;
            width: 150px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .resource .right {
            float: right;
        }

        /*******重写ztree折叠图标的高度*******/
        .ztree li span.button.switch {
            height: 15px
        }
        .pagination-info {
            display: none;
        }

        #zrrWindows {
            height: 320px !important;

        }

        .ztree li span.button {

            padding: 0px 0 0px 0;
        }

        .datagrid-header-rownumber, .datagrid-cell-rownumber {
            width: 40px;
        }

<div class="toolbar-left">
    <div class="toolbar-item">
        <input id="skNameInput" style="width: 190px" name="skNameInput" type="text" class="form-control"
               placeholder="输入水库查询">&nbsp;&nbsp;&nbsp;
        <button class="layui-btn layui-btn-small layui-btn-normal layui-btn-sm" onclick="search()"><i
                class="fa fa-search"></i> 查询
        </button>
        <button class="layui-btn layui-btn-small layui-btn-normal layui-btn-sm" onclick="reset()"><i
                class="fa fa-search"></i> 重置
        </button>
        <button class="layui-btn layui-btn-small layui-btn-normal layui-btn-sm" onclick="clearPerson()"><i
                class="fa fa-search"></i> <i class="layui-icon">&#xe640;</i>清空所有
        </button>


    </div>
</div>
<div id="zrrWindows" class="easyui-layout" fit="true" border="false" style="height: 300px">
    <div data-options="region:'west'" border="false" class="layout-list-left" id="ztreeDiv">
        <div class="easyui-panel panel-left" style="overflow:auto" title="人员目录" border="true" fit="true">
            <ul id="ztree"></ul>
        </div>
    </div>
    <div data-options="region:'east'" border="false" class="layout-list-left"
         style="padding-left: 0px;padding-right: 10px;">
        <div class="easyui-panel" title="已选人员" border="true" fit="true"
             style="height: 450px;background: #fff;padding-left: 0px;" id="rightContent">
        </div>


    </div>
    <div data-options="region:'center'" border="false">
        <div class="easyui-layout" style="height: 450px" data-options="fit:true,border:false">
            <input type="text" value="" id="ennmcd"/>

            <div id="datagriddiv1" data-options="region:'center',border:false" class="layout-list-content"
                 style="padding-top:10px ">
                <table id="datagrid1"
                       title="待选人员 <button class='layui-btn layui-btn-small layui-btn-normal layui-btn-xs' onclick='checkAllRows()' style='float:right;margin-top:-3px;'>全选</button>">
                    <thead>
                    <tr>
                        <th data-options="field:'person_name'" width="100" sortable="true">姓名</th>
                        <th data-options="field:'person_telephone'" width="100" sortable="true">手机号码</th>
                        <th data-options="field:'person_title'" width="100" sortable="true">单位</th>
                        <th data-options="field:'person_unit'" width="100" sortable="true">职务</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="resource" style="display: none;" id="resourceTemp">
    <div class="left"></div>
    <input type="hidden" name="resourceid" value=""/>
    <input type="hidden" name="resourcename" value=""/>
    <input type="hidden" name="resourcephone" value=""/>
    <%--职务--%>
    <input type="hidden" name="resourceduties" value=""/>
    <div class="right"><a href="javascript:void(0)" onclick="$(this).parent().parent().remove()">[删除]</a></div>
</div>

//加载easyui的表格
  function initDatagrid() {
        var queryParams = function () {
            return {
                ennmcd: $("#ennmcd").val() || "",
                state: 1,
                rows: 10000,
                page: 1
            };
        };

        // 加载表格
        var options = {
            url: ctx + '/findList',
            queryParams: queryParams,
            sortName: 'person_unit',
            sortOrder: "asc",
            pagination: true,
            height: '300px',
            onDblClickRow: function (index, row) {
                var id = row.obj_id;
                var name = row.person_name;
                var telephone = row.person_telephone;
                var unit = row.person_unit;
                var inputs = $("#rightContent").find("input");
                var exist = false;
                $.each(inputs, function () {
                    if ($(this).val() == id) {
                        exist = true;
                    }
                });
                if (exist) {
                    return;
                }
                var resource = $("#resourceTemp").clone();
                resource.attr("id", "").show();
                resource.find("div:eq(0)").html(name);
                resource.find("input:eq(0)").val(id);
                resource.find("input:eq(1)").val(name);
                resource.find("input:eq(2)").val(telephone);
                resource.find("input:eq(3)").val(unit);
                $("#rightContent").append(resource);
            },
            onLoadSuccess: function (data) {

                $("#datagriddiv1").find(".panel").find(".datagrid-wrap").css("height", "200px");

                $('#datagrid1').datagrid('resize');
            }
        };
        zrrDatagrid = new DataGrid("datagrid", options);
        $("#datagrid").datagrid({pageList: [20, 50, 100, 150]});
    }
    //初始化数据
   function initSelectedDatas() {

        if (!parent || !parent.getSelectedZrrDatasFromParent)
            return;
        selectedZrrDatas = parent.getSelectedZrrDatasFromParent();

        if (selectedZrrDatas && selectedZrrDatas.name) {
            var arrName = selectedZrrDatas.name.split(','); //注split可以用字符或字符串分割
            var arrId = selectedZrrDatas.id.split(','); //注split可以用字符或字符串分割
            var arrPhone = selectedZrrDatas.phone.split(','); //注split可以用字符或字符串分割
            var arrResourceduties = selectedZrrDatas.personDuties.split(','); //注split可以用字符或字符串分割
            if (!arrName)
                return;
            for (var i = 0; i < arrName.length; i++) {
                var resource = $("#resourceTemp").clone();
                resource.attr("id", "").show();
                resource.find("div:eq(0)").html(arrName[i]);
                //设置编号
                resource.find("input:eq(0)").val(arrId[i]);
                resource.find("input:eq(1)").val(arrName[i]);
                resource.find("input:eq(2)").val(arrPhone[i]);
                resource.find("input:eq(3)").val(arrResourceduties[i]);
                $("#rightContent").append(resource);
            }


        }

    } 
    
    
    //将选中的带出
      function getSelectedZrrDatas() {
        var resourceids = $("#rightContent").find("input[name='resourceid']");
        var resourcenames = $("#rightContent").find("input[name='resourcename']");
        var resourcephones = $("#rightContent").find("input[name='resourcephone']");
        var resourcepersonDuties = $("#rightContent").find("input[name='resourceduties']");

        if (resourceids.length == 0) {
            layer.msg("请选择接收人！");
            return false;
        }
        var ids = "";
        var names = "";
        var phones = "";
        var personDuties = "";
        $.each(resourceids, function () {
            var curid = $(this).val();
            ids = ids == "" ? curid : ids + "," + curid;
        });
        $.each(resourcenames, function () {
            var curname = $(this).val();
            names = names == "" ? curname : names + "," + curname;
        });
        $.each(resourcephones, function () {
            var curphone = $(this).val();
            phones = phones == "" ? curphone : phones + "," + curphone;
        });
        $.each(resourcepersonDuties, function () {
            var curduty = $(this).val();
            if (curduty == '') {
                curduty = ' '
            }
            personDuties = personDuties == "" ? curduty : personDuties + "," + curduty;
        });


        var obj = {name: names, id: ids, phone: phones, personDuties: personDuties};

        return obj;
    }
    
    
    
    //父页面的方法
     $("#divSendTargetName").html('');
     $("input[name=sendTargetName]").val('');
     $("input[name=sendTargetNumber]").val('');
     $("input[name=sendTargetIds]").val('');
     var iframeWin = layero.find('iframe')[0].contentWindow;
     var obj = iframeWin.getSelectedZrrDatas();
     if (!obj) {
              return obj;
           }
      $("input[name=sendTargetName]").val(obj.name);
      $("input[name=sendTargetNumber]").val(obj.phone);
      $("input[name=sendTargetIds]").val(obj.id);
      var nameArray = obj.name.split(',');
      var phoneArray = obj.phone.split(',');
      if (nameArray.length > 0) {
      for (var i = 0; i < nameArray.length; i++) {
       var nameItem = nameArray[i];
       var phoneItem = phoneArray[i];
     $("#divSendTargetName").append(nameItem + "[" + phoneItem + "],");
                        }
                    }