效果图如下 每级最多显示5000条数据，点击加载 会再次加载5000条数据
可以监听滚动条 动态加载 我这没实现这种方式。
<!-- ztreejs -->
<script src=".ztree/js/jquery.ztree.core.min.js" type="text/javascript"></script>
<script src="ztree/js/jquery.ztree.excheck.min.js" type="text/javascript"></script>
<ul id="treeDemo" class="ztree"></ul>
<script type="text/javascript">
var urlPath = getUrlPath();
// 每页显示个数
const limit = 5000;
var parentNodes = [];
var nodePageArr=new Set();
var param = {
displayUp: false,
level: 1,
displayOrg: true,
displayStop: true,
displayLevel: "currLevel",
displayType: "user",page:1,limit:limit
};
var setting = {
async: {
enable: true,
url: urlPath + "/method?noCache=" + new Date().getTime(),
dataType: "json",
type: "GET",
autoParam: ["id"],
otherParam: param,
dataFilter: ret_filter
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "code",
nocheck: false
}
},
check: {
enable: true,
chkStyle: checkType, //单选或多选框
},
callback: {
onClick:zTreeOnClick,//添加点击事件
onNodeCreated: zTreeOnNodeCreated,
onAsyncSuccess: function (event, treeId, node, msg) {
if (node == undefined) {
// 展开根节点信息
$.fn.zTree.getZTreeObj("treeDemo").expandNode(getRoot());
}
}
}
};
function ret_filter(treeId, parentNode, childNodes) {
if (!childNodes || childNodes.length == 0) {
var nodes = [];
var node = new Object();
node.id = parentNode.id + "_nochild";
node.code = parentNode.id;
node.name = "无下级";
node.nocheck = true;
nodes.push(node);
return nodes;
}
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
// 以下内容是后端返回的数据
if (!strIsEmpty(childNodes[childNodes.length - 1].pageCount)) {
var pageNow = childNodes[childNodes.length - 1].pageNow; // 当前页数
var pageCount = childNodes[childNodes.length - 1].pageCount; // 总页数
var pageRow = childNodes[childNodes.length - 1].pageRow; // 总条数
var code = childNodes[childNodes.length - 1].code;
var num = parseInt(pageRow) - parseInt(pageNow) * parseInt(limit);
childNodes.pop();
nodePageArr.add({code:code,page:pageNow});
if (pageNow < pageCount) {
childNodes.push({
code: code,
name: '点击加载更多...【'+num+'】条数据待显示',
isParent: false,
open: false,
nocheck: true,
type: "user",
flag: "clickBtn"
});
}
}
// 回显选中的人员
for (var i = 0, l = childNodes.length; i < l; i++) {
if (childNodes[i].type == "user") {
childNodes[i].isParent = false;
if (choose.hasOwnProperty(childNodes[i].id)) {
treeObj.checkNode(childNodes[i], true, false, false);
}
} else {
childNodes[i].isParent = true;
}
}
return childNodes;
}
var submissions = false;
function zTreeOnClick(event, treeId, treeNode,msg) {
if (treeNode.flag === 'clickBtn') {
if (!submissions) {
var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
submissions = true;
var page = getCurrentPage(treeNode.code);
var param = {
displayUp: false,
level: 1,
displayOrg: true,
displayStop: true,
displayLevel: "currLevel",
displayType: "user",
page: page,
limit: limit,
nextData: true,
id:treeNode.code
};
$.ajax({
url: urlPath + "/method?noCache=" + new Date().getTime(),
dataType: "json",
type: "GET",
data: param,
success: function (data) {
submissions = false;
// 回显选中的人员
for (var i = 0, l = data.length; i < l; i++) {
if (choose.hasOwnProperty(data[i].id)) {
zTreeObj.checkNode(data[i], true, false, false);
}
}
// 以下内容是后端返回的数据
if (!strIsEmpty(data[data.length - 1].pageCount)) {
var pageNow = data[data.length - 1].pageNow; // 当前页数
var pageCount = data[data.length - 1].pageCount; // 总页数
var pageRow = data[data.length - 1].pageRow; // 总条数
var code = data[data.length-1].code;
nodePageArr.add({code:code,page:pageNow});
var num = parseInt(pageRow) - parseInt(pageNow) * parseInt(limit);
data.pop();
if (pageNow < pageCount) {
data.push({
code: code,
name: '点击加载更多...【'+num+'】条数据待显示',
isParent: false,
open:false,
icon:false,
nocheck:true,
type:"user",
flag:"clickBtn"
});
}
zTreeObj.removeNode(treeNode);
var parentNode = getParentNode(code);
zTreeObj.addNodes(parentNode, data); // 添加新节点
}
},
error: function (xmlhttp, textStatus, errorThrown) {
submissions = false;
var o = JSON.parse(xmlhttp.responseText);
layer.msg(o.message, {icon: 5});
}
});
} else {
layer.msg("正在加载数据...请勿重复点击！");
}
}
};
// 获取所有的父节点
function getParentNode(code) {
var nodeRet;
parentNodes.forEach(function(node) {
if (node.id === code) {
nodeRet = node;
}
});
return nodeRet;
}
// 获取每级的页数
function getCurrentPage(code) {
var nodeRet;
nodePageArr.forEach(function(node) {
if (node.code === code) {
nodeRet = node;
nodePageArr.delete(node);
}
});
return strIsEmpty(nodeRet)?2:++nodeRet.page;
}
function init_dept_tree() {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var root = getRoot();
if (!strIsEmpty(treeObj) && root !== null) {
var nodes = [];
var children = getChildrenNode(root, nodes);
for (var i = 0; i < children.length; i++) {
var node = children[i];
if (node.checked === true) {
choose[node.id] = node.name;
} else if (choose.hasOwnProperty(node.id)) {
delete choose[node.id];
}
}
}
$.fn.zTree.init($("#treeDemo"), setting);
}
//加载ztree
$(document).ready(function () {
init_dept_tree();
});
function zTreeOnNodeCreated(event, treeId, treeNode) {
if (treeNode.type == "department") {
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.setChkDisabled(treeNode, true);
parentNodes.push(treeNode);
}
}
</script>
