ztree加easyui加候選區
阿新 • • 發佈：2020-07-28
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="輸入水庫查詢"> <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"></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 + "],"); } }