{{# var lang001 = {"ch": "关键字搜索", "en": "Search"}, lang002 = {"ch": "台AP已选择", "en": "APs Selected"}, lang003 = {"ch": "序号", "en": "No."}, lang004 = {"ch": "AP名称", "en": "AP Name"}, lang005 = {"ch": "设备型号", "en": "Model"}, lang006 = {"ch": "设备型号", "en": "Model"}, lang007 = {"ch": "操作", "en": "Action"}, lang008 = {"ch": "不绑定", "en": "Unbind"}, lang009 = {"ch": "绑定所有", "en": "Bind All"}; }}  <style> .paui-apselect thead .layui-table-cell { height:auto!important; padding-top:5px; white-space: normal; word-wrap: break-word; word-break: break-all} .paui-apselect .layui-transfer-box .layui-form-checkbox{ text-align:left;} .paui-apselect .layui-transfer-active .layui-btn { background-color: #2e8ae3; border-color: #2e8ae3;} .paui-apselect .layui-transfer-active .layui-btn-disabled { background-color: #FBFBFB; border-color: #e6e6e6; color: #C9C9C9;} .paui-apselect .layui-colla-content{padding:0px;} .paui-apselect .layui-collapse{border:0px; border-bottom: 1px solid #e6e6e6;} .paui-apselect .layui-table-view{margin:0px;} .paui-apselect .layui-colla-title {position: relative;height: 30px;line-height: 30px;padding: 0 15px 0 35px; cursor: pointer;font-size: 12px; overflow: hidden;} .paui-apselect .layui-colla-title:hover{color: #1E9FFF;} .paui-apselect .layui-icon-file{color:#1E9FFF; margin: 0px 5px 0px 1px;} </style>  <div class="layui-row layui-col-space15 paui-apselect" style="margin:10px"> <div class="layui-col-md6" style="width:60%;float:left"> <form class="layui-row"> <div class="layui-form-item" style="margin-bottom: 0px;"> <div class="layui-input-inline" style="width:220px"> <input type="text" name="keyword" id="ipt_apselect_keyword"                     class="layui-input" placeholder='{{ lang001[g_lang] || "关键字搜索" }}'> </div> <div class="layui-form-mid" style="padding:0px!important"> <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="submit_apselect_search"> <i class="layui-icon layui-icon-search"></i> </button> </div> </div> </form> <div class="layui-row" style="height:360px; padding:10px; overflow-y:auto"> <div id="paui-apselect-tree" class="layui-collapse" lay-accordion></div> <div id="paui-apselect-search" style="display:none"> <table id="tab_apselect_search" lay-filter="tab_apselect_search"></table> </div> </div> </div> <div class="layui-col-md6"  style="width:40%;float:right"> <div class="layui-row"> <span id="cur_apcnt">0 </span> {{ lang002[g_lang] || "台AP已选择" }} </div> <div class="layui-row" style="margin-top: 20px"> <table id="tab_select_result" lay-filter="tab_select_result"></table> </div> </div> <div class="layui-hide"> <button id="btn_select_ap_yes"></button> </div> </div>  <script id="tpl_group_collapse" type="text/html"> {%# layui.each(d, function(index, elem){ %} <div class="layui-colla-item"> <h2 class="layui-colla-title"><i class="layui-icon layui-icon-file"></i>{% elem.grpname %}</h2> <div class="layui-colla-content"> <table id="tab_apselect_{% elem.grpid %}" lay-filter="tab_apselect_{% elem.grpid %}"></table> </div> </div> {%# }); %} </script>  <script id="tpl_apselect_td_action" type="text/html"> <span class="abtn" lay-event="tabevt_delete"><i class="layui-icon layui-icon-delete"></i></span> </script>  <script> layui.use(function(){ var $ = layui.$, form = layui.form, table = layui.table, patpl = layui.patpl, element = layui.element;  var l_ap_tree = {}; var l_window_index = layer.index;  var max_ap_num       = 4096; var select_num       = 0; var l_search_data    = []; var l_already_select = [];     var l_parent_data = JSON.parse('{{- JSON.stringify(d) }}');   var init_selected_ap = function(){ for (var i = 0; i < max_ap_num; i++) l_already_select[i] = ""; };   var get_selected_ap = function(){ var ap = []; for(var i = 0; i < max_ap_num; i++){ if(l_already_select[i] != "") ap.push(l_already_select[i]); } return ap; };   var tree_render = function(type){ layui.each(l_ap_tree, function(index, elem){ var table_id = 'tab_apselect_' + elem.grpid; table.render({ elem: '#' + table_id ,lang: g_lang ,data: elem.grpdata ,limit: 30000 ,cols: [[ {type: 'checkbox'} ,{type:'numbers', title:'{{ lang003[g_lang] || "序号" }}'} ,{field:'name', title:'{{ lang004[g_lang] || "AP名称" }}'} ,{field:'ip', title:'IP'} ,{field: 'mac', title: 'MAC'} ,{field: 'devtype', title: '{{ lang005[g_lang] || "设备型号" }}'} ]] });  if(type != "init") return;  table.on('checkbox(' + table_id + ')', function(obj){ /* 遍历所有树表，来搜索所有选中数据 */ init_selected_ap(); layui.each(l_ap_tree, function(index, elem){ var chk = table.checkStatus('tab_apselect_' + elem.grpid); layui.each(chk.data, function(i, e) { l_already_select[e.apid] = e; }); }); selected_render("reload"); }); }); };   var selected_render = function(type){ var chk = get_selected_ap(); $("#cur_apcnt").text(chk.length);  table.render({ elem: '#tab_select_result' ,lang: g_lang ,data: chk ,cols: [[ {type: 'numbers', title: '{{ lang003[g_lang] || "序号" }}'} ,{field: 'name', title: '{{ lang004[g_lang] || "AP名称" }}'} ,{title: '{{ lang007[g_lang] || "操作" }}', width: 80, align: 'right', templet: '#tpl_apselect_td_action'} ]] });  if(type != "init") return;  table.on('tool(tab_select_result)', function(obj){ l_already_select[obj.data.apid] = "";  layui.each(l_ap_tree["group_" + obj.data.grpid].grpdata, function(index, elem){ if(elem.apid == obj.data.apid) elem.LAY_CHECKED = false; });  tree_render("reload"); selected_render("reload"); show_tree("yes"); }); };   var search_render = function(type, data){ table.render({ elem: '#tab_apselect_search' ,lang: g_lang ,data: data ,cols: [[ {type: 'checkbox'} ,{type:'numbers', title:'{{ lang003[g_lang] || "序号" }}'} ,{field:'name', title:'{{ lang004[g_lang] || "AP名称" }}'} ,{field:'ip', title:'IP'} ,{field: 'mac', title: 'MAC'} ,{field: 'devtype', title: '{{ lang006[g_lang] || "设备型号" }}'} ]] });  if (type != "init") return;  table.on('checkbox(tab_apselect_search)', function(obj){ var chk = table.checkStatus("tab_apselect_search").data; var unchk = [];  /* 筛选未选中数据*/ layui.each(l_search_data, function(index, elem){ var is_select = 0; layui.each(chk, function(i, e){ if(elem.apid == e.apid) is_select = 1; });  if(is_select == 0) unchk.push(elem); });  /* 数据未选中，从选中数据中去除 */ layui.each(unchk, function(index, elem){ l_already_select[elem.apid] = ""; layui.each(l_ap_tree["group_" + elem.grpid].grpdata, function(i, e){ if(elem.apid == e.apid) e.LAY_CHECKED = false; }); });  /* 数据选中，保存选中状态 */ layui.each(chk, function(index, elem){ if (l_already_select[elem.apid] == "") { l_already_select[elem.apid] = elem; layui.each(l_ap_tree["group_" + elem.grpid].grpdata, function(i, e){ if(elem.apid == e.apid) e.LAY_CHECKED = true; }); } });  tree_render("reload"); selected_render("reload"); show_tree("yes"); }); };   var show_tree = function(type){ if(type == "yes") { $("#paui-apselect-search").hide(); $("#paui-apselect-tree").show(); $("#ipt_apselect_keyword").val(""); } else { $("#paui-apselect-search").show(); $("#paui-apselect-tree").hide(); } };   var ap_search = function(){ var keyword = $("#ipt_apselect_keyword").val();  if(keyword == "") { show_tree("yes"); return; }  l_search_data = [];  layui.each(l_ap_tree, function(index, elem){ layui.each(elem.grpdata, function(i, e){ if(pa_str_find(JSON.stringify(e), keyword)) l_search_data.push(e); }); });  search_render("render", l_search_data);  show_tree("no"); };   /* 页面初始化 */ layer.load(); init_selected_ap();  pa_ajax({ url: "/cgi-bin/sac/ajax_sac_ap", data: {"action": "load_ap_group"}, success: function(json){ layer.closeAll("loading");  patpl($("#tpl_group_collapse").html()).render(json.data.group, function(html){ $("#paui-apselect-tree").html(html); });  layui.each(json.data.group, function(index, elem){ l_ap_tree["group_" + elem.grpid] = { "grpname": elem.grpname, "grpid": elem.grpid, "grpdata": [] }; });  if(l_parent_data.apidstr == ",-1") var ap_selected = "all"; else if(l_parent_data.apidstr == "0" || l_parent_data.apidstr == "") var ap_selected = []; else { var ap_selected = []; layui.each(l_parent_data.apidstr.split(","), function(index, elem){ if(elem == "") return; ap_selected.push(elem); }); }  layui.each(json.data.ap, function(index, elem){ if(ap_selected == "all") { l_already_select[elem.apid] = elem; elem.LAY_CHECKED = true; } else { if( arryInclude(ap_selected, elem.apid) ){ elem.LAY_CHECKED = true; l_already_select[elem.apid] = elem; } else { elem.LAY_CHECKED = false; } } l_ap_tree["group_"+ elem.grpid].grpdata.push(elem); });  tree_render("init"); selected_render("init"); element.render(); } });   /* AP 搜索 */ search_render("init", []);  $("#ipt_apselect_keyword").off("keyup"); $("#ipt_apselect_keyword").on("keyup", ap_search);  form.on('submit(submit_apselect_search)', function(obj){ ap_search(); return false; });   /* 页面提交 */ $("#btn_select_ap_yes").on("click", function(){ layer.close(l_window_index);  var chk = get_selected_ap(); var apidstr = ""; var apmac   = ""; var select_all = true;  layui.each(l_ap_tree, function(index, elem){ if (elem.grpdata.length == 0) return; var chk = table.checkStatus('tab_apselect_' + elem.grpid); if(!chk.isAll) select_all = false; });  if(select_all) apidstr = ",-1"; else { for(var i = 0; i < chk.length; i++){ apidstr += "," + chk[i].apid; apmac += "," + chk[i].mac; } }  if(l_parent_data.from == "ssid") { if(chk.length == 0) return; $("#ipt_apmac").val(apmac); $("#select_bindaplist").html(""); $("#select_bindaplist").append('<option value="0">{{ lang008[g_lang] || "不绑定" }}</option>');  if (apidstr == ",-1") $("#select_bindaplist").append('<option value=",-1" selected>{{ lang009[g_lang] || "绑定所有" }}</option>'); else { $("#select_bindaplist").append('<option value=",-1">{{ lang009[g_lang] || "绑定所有" }}</option>'); $("#select_bindaplist").append('<option value="' + apidstr + '" selected>' + i + ' {{ lang002[g_lang] || "台AP已选择" }}</option>'); } form.render('select'); } else { if(chk.length == 0) return; $("#ipt_apid").val(apidstr); $("#ipt_apmac").val(apmac); } }); }); </script>