treetable分頁問題 layui樹形表格分頁解決方案 www.santaihuge.com
阿新 • • 發佈：2020-09-10
引入外掛treetable-lay
在layui資料表格之上進行擴充套件實現
三泰虎哥(https://www.santaihuge.com)為您提供最新三泰虎網友原創美女視訊、老司機漫畫、搞笑內涵gif動態圖片,每日定時更新，給您帶來更多快樂!
原文地址：https://www.santaihuge.com/sitemap.txt https://www.santaihuge.com/sitemap.html
treetable分頁問題 layui樹形表格分頁解決方案
html
<div class="memberlist clearboth"> <table id="AgentList" lay-filter="AgentList"></table> </div> <div class="PageDisplay"> <div id="AgentPage" class="fl"></div> <div class="fl" id="AgentAmount"> <cite class="layuitext8">總共</cite> <span></span> <cite class="layuitext9">條資料</cite></div> </div>
js
layui.config({ base:'../../../../Static/lib/layui/Plugin/' }).extend({ treetable: 'treetable/treetable2' }).use(['form', 'element', 'layer', 'treetable', 'laytpl', 'laypage'], function() { var layer = layui.layer; var element = layui.element; var form = layui.form; var treetable = layui.treetable; var laytpl = layui.laytpl; var laypage = layui.laypage; var code = { "orgType": 1 }; var amountTotal=""; $.ajax({ type: "POST", url: PartnerTreeList, contentType: contentType, data: JSON.stringify(code), dataType: 'JSON', headers: { "x-access-token": token }, async: false, success: function(res) { if (res.code == 3) { window.localStorage.clear(); layer.msg(tip38, { icon: 7, time: 3000, shade: 0.2, end: function() { if (window != top) { top.location.href = '../../../Login.html'; } } }); } else if(res.code == 1){ if(res.data.length==0){ var DataList = res.data; $("#AgentAmount span").text(0) } else{ var DataList = res.data[0].children; $("#AgentAmount span").text(res.data[0].amount); amountTotal=res.data[0].amount; } $(".PageDisplay").show(); } else{ layer.msg(tip51) } var pageData = [];//儲存當前頁資料集 layui.data('checked', null);//儲存 已勾選 複選框 資料集 laypage.render({ elem: 'AgentPage', count: DataList.length, limit: 4,//每頁顯示數 layout:['page'], jump: function(obj){ var thisData = DataList.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit); pageData = thisData; //表格資料渲染 var insTb = treetable.render({ elem: '#AgentList', tree: { iconIndex: 2 }, cols: [ { type: 'checkbox', width: '5%', event: 'check', align: 'center' }, { field: 'id', title: 'ID', width: '0%', align: 'center' }, { field: 'agentName', title: lang["jst137"], width: '23%', align: 'left', templet: function(d) { return '<span class="agentName" dataid="' + d.id + '">' + d.agentName + '</span>' } }, { field: 'agentAptitude', title: lang["jst108"], width: '10%', align: 'center' }, { field: 'Area', title: lang["jst320"], width: '10%', templet: '#Area', align: 'center' } ], reqData: function(data, callback) { callback(thisData); }, style: 'margin-top:0;' }); //表格資料渲染 end form.render(); //重置表單渲染 $(".layuitext8").text(layuitext8); $(".layuitext9").text(layuitext9); // 初始資料渲染 function DataRender(){ var idData = localStorage.getItem("ids").split(","); $(".tags").empty(); var checkData = []; $.each(idData, function(index, item) { $("input[name='ew_tb_checkbox_AgentList'][value = '" +item + "']").prop('checked', true); form.render(); var getid={ "id": item } $.ajax({ type: "POST", url: AgentInfo, contentType: contentType, data: JSON.stringify(getid), dataType: 'JSON', headers: { "x-access-token": token }, async: false, success: function(res) { if(res.code == 1) { checkData.push({ "id": res.data.list[0].id, "agentName": res.data.list[0].agentName }) } } }) }); localStorage.setItem("checked2", JSON.stringify(checkData)); $.each(checkData, function(k, v) { layui.data('checked', {key: v.id, value: v.agentName}); }); $(".tags").empty(); $(".tags").attr("class", "tags intro"); $.each(checkData, function(index, item) { $(".tags").append('<div class="tag taglist fl"><span>' + item.agentName + '</span> <span class="sntext">' + item.id + '</span> <button class="close" id="' + item.id + '" type="button">×</button></div>'); }); //單個標籤刪除 $(".taglist .close").each(function() { $(this).click(function() { $(this).parents(".taglist").remove(); var closeID = $(this).attr("id"); $("input[name='ew_tb_checkbox_AgentList'][value = '" +closeID + "']").prop('checked', false); form.render(); var ids = []; $(".sntext").each(function() { var thistext = $(this).text(); ids.push(thistext); }); localStorage.setItem("ids", ids); if (ids.length == 0) { $(".nodata").show() $(".tags").attr("class", "tags clearboth mgt30"); $(".tags").append('<div class="nodata">' + lang["jst109"] + '</div>'); window.localStorage.removeItem("ids"); window.localStorage.removeItem("checked"); window.localStorage.removeItem("checked2"); $(".ew-tree-table-checkbox").prop('checked', false); form.render(); } }); }); //單個標籤刪除 end //全部標籤刪除 $(".delAll").click(function() { $(".taglist").each(function() { $(this).remove(); }); $(".ew-tree-table-checkbox").prop('checked', false); form.render(); window.localStorage.removeItem("ids"); window.localStorage.removeItem("checked"); window.localStorage.removeItem("checked2"); $(".tags").empty(); $(".tags").attr("class", "tags clearboth mgt30"); $(".tags").append('<div class="nodata">' + lang["jst109"] + '</div>') }); //全部標籤刪除 end } if (localStorage.hasOwnProperty('ids') === true) { DataRender() } //初始資料渲染 end $("#checkEvent").click(function(){ var checkData = []; var ids = []; $.each(layui.data('checked'), function(k, v) { checkData.push({ "id": k, "agentName": v }); ids.push(k) }); localStorage.setItem("ids", ids); localStorage.setItem("checked2", JSON.stringify(checkData)); if (checkData.length == 0) { window.localStorage.removeItem("ids"); window.localStorage.removeItem("checked"); window.localStorage.removeItem("checked2"); $(".tags").empty(); $(".tags").removeClass('intro'); $(".tags").attr("class", "tags clearboth mgt30"); $(".tags").append('<div class="nodata">' + lang["jst109"] + '</div>') } //已勾選的複選框 進行資料渲染到 "已選擇合作商" 區域 $(".tags").empty(); $(".tags").attr("class", "tags intro"); $.each(checkData, function(index, item) { $(".tags").append('<div class="tag taglist fl"><span>' + item.agentName + '</span> <span class="sntext">' + item.id + '</span> <button class="close" id="' + item.id + '" type="button">×</button></div>'); }); //已勾選的複選框 進行資料渲染到 "已選擇合作商" 區域 end //單個標籤刪除 $(".taglist .close").each(function() { $(this).click(function() { $(this).parents(".taglist").remove(); var closeID = $(this).attr("id"); $("input[name='ew_tb_checkbox_AgentList'][value = '" +closeID + "']").prop('checked', false); form.render(); var ids = []; $(".sntext").each(function() { var thistext = $(this).text(); ids.push(thistext); }); localStorage.setItem("ids", ids); if (ids.length == 0) { $(".nodata").show() $(".tags").attr("class", "tags clearboth mgt30"); $(".tags").append('<div class="nodata">' + lang["jst109"] + '</div>'); window.localStorage.removeItem("ids"); window.localStorage.removeItem("checked"); window.localStorage.removeItem("checked2"); $(".ew-tree-table-checkbox").prop('checked', false); form.render(); } }); }); //單個標籤刪除 end //全部標籤刪除 $(".delAll").click(function() { $(".taglist").each(function() { $(this).remove(); }); $(".ew-tree-table-checkbox").prop('checked', false); form.render(); window.localStorage.removeItem("ids"); window.localStorage.removeItem("checked"); window.localStorage.removeItem("checked2"); $(".tags").empty(); $(".tags").attr("class", "tags clearboth mgt30"); $(".tags").append('<div class="nodata">' + lang["jst109"] + '</div>') }); //全部標籤刪除 end }) //監聽複選框 treetable.on('checkbox(AgentList)', function(obj) { //.全選或單選資料集不一樣 var data = obj.type == 'one' ? [obj.data] : pageData; //.遍歷資料 $.each(data, function(k, v) { //.假設你資料中 id 是唯一關鍵字 if (obj.checked) { //.增加已選中項 layui.data('checked', { key: v.id, value: v.agentName }); } else { //.刪除 layui.data('checked', { key: v.id, remove: true }); } }); if(obj.type == 'one'){ $("#checkEvent").click(); } }); //監聽複選框 end $(".moreData").click(function() { if (localStorage.hasOwnProperty('ids') === false) { layer.msg(lang["jst110"], { icon: 0, time: 2000, shade: 0.2 }); return; } else { layer.msg(lang["jst10"], { icon: 1, time: 2000, shade: 0.2, end: function() { var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); } }) } }) //搜尋查詢 form.on('submit(searchForm)', function(data) { var agentName=$("#agentName").val(); var sendData={ "agentName": agentName, "dataStatus": 1, "orgQueue": "", "orgType": 1 } $.ajax({ type: "POST", url: PartnerSearch, contentType: contentType, data: JSON.stringify(sendData), dataType: 'JSON', headers: { "x-access-token": token }, async: false, success: function(res) { if(agentName==""){ AgentDataList2 = thisData; if(AgentDataList2.length==0){$(".PageDisplay").hide();} else{$(".PageDisplay").show();$("#AgentAmount span").text(amountTotal);} layer.load(2, { shade: [0.1, '#000'], time: 1000 }) laypage.render({ elem: 'AgentPage', count: DataList.length, limit: 4,//每頁顯示數 layout:['page'], jump: function(obj){ var thisData2 = DataList.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit); insTb.reload({ reqData: function(data, callback) { callback(thisData2); } }); } }); } else{ AgentDataList2 = res.data; if(AgentDataList2.length!==0){ $(".PageDisplay").show(); $("#AgentAmount span").text(AgentDataList2.length); } else{$(".PageDisplay").hide();} laypage.render({ elem: 'AgentPage', count: AgentDataList2.length, limit: 4,//每頁顯示數 layout:['page'], jump: function(obj){ var thisData2 = AgentDataList2.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit); insTb.reload({ reqData: function(data, callback) { callback(thisData2); } }); } }); } } }); if (localStorage.hasOwnProperty('ids') === true) { DataRender() } return false; }); //搜尋查詢 end } }); } }); });