传统网站使用jq-ztree比较多,做一些技术总结
ztree网站api:http://www.treejs.cn/v3/api.php
//引入css,自己的css,ztree的css
//引入jq, ztree.core.js,
//如果勾选,引入ztree.excheck.js
//如果编辑树【拖拽,删除,批量加载】,引入ztree.exedit.js。
//dom文本中引用
//id存放树的区域,class需要添加ztree才会有效果
1、节点不显示 checkbox / radio
//想要节点不显示勾选框,给数据添加nocheck属性,默认false显示,true为不显示。
var zNodes = [
{
name:"test1",
open:true,
nocheck:true //nocheck为true时没有勾选框
children:[
{name:"test1_1"},
{name:"test1_2"}
]
}
];
2、树展开
//给数据添加open,默认false不展开,true展开。
var zNodes = [
{
name:"test1",
open:true, //open为true时展开
nocheck:true
children:[
{name:"test1_1"},
{name:"test1_2"}
]
}
];
//通过获取节点添加展开属性
var zTreeObj = $.fn.zTree.getZTreeObj("tree");
var sNodes = zTreeObj .getSelectedNodes();
if (sNodes.length > 0) {
var isOpen = sNodes[0].open;
}
3、多层树,数据没有子元素的分级,在同一层时需要进行数据处理
//同一层的数据
{
"list": [{
"value": "01",
"text": "大业务"
}, {
"value": "02",
"text": "大金融"
}, {
"value": "0101",
"text": "大业务分支1"
}, {
"value": "0201",
"text": "大金融分支1"
}, {
"value": "0202",
"text": "大金融分支2"
}, {
"value": "020101",
"text": "大金融分支1子分支1"
}, {
"value": "020102",
"text": "大金融分支1子分支2"
}]
}
//需要转换ztree需要的分级格式,需要id,name,pId
//pId指向当前节点的父级
$.each(data_type, function(i, v) {
var bean = {};
bean.id = v.value;
bean.name = v.text;
bean.pId = v.value.slice(0, v.value.length - 2); //pId需要分级
})
//处理后的数据
{
"list": [{
"id ": "01",
"text": "大业务",
"pId": "0",
}, {
"id": "02",
"text": "大金融",
"pId": "0",
}, {
"id": "0101",
"text": "大业务分支1",
"pId": "01",
}, {
"id": "0201",
"text": "大金融分支1",
"pId": "02",
}, {
"id": "0202",
"text": "大金融分支2",
"pId": "02",
}, {
"id": "020101",
"text": "大金融分支1子分支1",
"pId": "0201",
}, {
"id": "020102",
"text": "大金融分支1子分支2",
"pId": "0201",
}]
}