由于此次项目开发框架使用layui,树结构自然想到了使用dtree,功能需求是选择省份下的企业,由于企业数据达到上万家,一次性将所有的数据加载出来会造成页面卡顿,由此想到先加载行政区划再根据点击事件获取企业数据:
解决思路:
① 、先使用dtree.render() 封装行政区划树结构,此处要注意树结构数据格式,dtree官网提供快速使用方法
②、参考官网提供右键选择工具栏(toolbarFun)对节点进行增删改查的方法,对源码稍作提炼异步加载子节点
一、参考文档示例:
1、初始化树结构, 由于功能需要使用复选框,故参考lis集合数据结构,返回结果一定要有checkArr,不然复选框无法生成。
2、异步加载子节点
3、使用方法注意点
二、具体实现方法如下:
var regionEnpTree = getRegionEnpTree(dtree, 'regionEnpTree');//获取行政区划调用方法
// var param = dtree.getCheckbarNodesParam("regionEnpTree"); // 获取选中数据
/**
* 获取行政区划树结构,点击子级获取企业
* dtree 模块名称
* treeId 组件容器id
* initRegionCode 初始化行政区划选中值(编辑页面回显赋值时传值,无默认选中值可不填)
* initEnpCode 初始化企业选中值(编辑页面回显赋值时传值,无默认选中值可不填)
**/
function getRegionEnpTree(dtree, treeId, initRegionCode, initEnpCode) {
var regionEnpTree = null;
$.get('行政区划树结构接口地址', {}, function(initData){
if (initData.data && initData.data.length>0) {
//此处循环是因为后台返回接口无法添加checkArr字段,故前端循环封装处理,若后台返回有checkArr字段,此段代码可不要
$.each(initData.data,function (index,value) {
value.checkArr = [{"type": "0", "checked": "0"}];
value.parentId = -1;
$.each(value.children,function (a,b) {
b.checkArr = [{"type": "0", "checked": "0"}];
$.each(b.children,function (x,y) {
y.checkArr = [{"type": "0", "checked": "0"}];
})
})
});
regionEnpTree = dtree.render({
elem: "#"+treeId,
data: initData.data,
method:'GET',
url:'/getEnpByReg', //根据行政区划节点获取企业数据接口,需调用自己服务器地址
width:470, //容器宽度
dataStyle: "layuiStyle", //使用layui风格的数据格式
menubar: false, //开启菜单栏
checkbar:true, //开启复选框
record:true, //开启添加额外参数
done: function (res, $ul, first) {
//点击非该元素操作区域隐藏弹出层
$(document).click(function(event){
var _con = $("input[dtree-id="+treeId+"]");
if(!_con.is(event.target) && _con.has(event.target).length === 0){
$('.layui-card.dtree-select').removeClass('dtree-select-show');
}
});
if(initRegionCode){
dtree.dataInit(treeId, initRegionCode); //初始化赋值
dtree.selectVal(treeId, initRegionCode); //初始化选中值
}
}
});
dtree.on("node("+treeId+")" ,function(obj){ //点击节点事件
if(obj.param.leaf){
var $div = obj.dom, $ul = $div.next("ul");
regionEnpTree.url = '/getEnpByReg'; //参考源码给regionEnpTree的url添加接口地址,需调用自己服务器地址,可在控制台输入regionEnpTree查看具体返回结果
$.get('/getEnpByReg', {nodeId:obj.param.nodeId}, function (jsonData) { //此处需注意,参数名必须为nodeId
if(jsonData.data && jsonData.data.length > 0){
var nodeJson = []; //动态构造字节点数据结构
$.each(jsonData.data,function (x,y) {
regionEnpTree.temp = [y.code, $ul, $div, Number(obj.param.level)+1];
nodeJson.push({
checkArr: [],
children: [],
iconClass: null,
id: y.code,
isLast: true,
parentId: obj.param.nodeId,
title: y.name
});
});
regionEnpTree.toolbarFun.addTreeNode(nodeJson,$div); // 调用toolbarFun 的addTreeNode方法异步加载数据
regionEnpTree.changeTreeNodeAdd("refresh") ;//重新渲染子节点
}
})
}
});
}
});
return regionEnpTree
}
三、接口返回结果及效果参考
1、行政区划接口返回结果
2、企业节点接口返回结果
3、效果