引入:
jquery.ztree.core-3.5.js
jquery.ztree.excheck-3.5.js
zTreeStyle.css
js 代码
var zNodes =[{ id: "id", pId: "父id", name:"名称", isParent:true, checked:true },
];
isParent: 设置是否是父节点
checked:是否选中
var setting = {
check: {//是否有复选框
enable: true
},
data: {
simpleData: {
enable: true,//异步
idKey: "id",//bean的id
pIdKey: "pid",//父id
}
},
async : {
enable: true,
type: "post",
dataType: "json",
url: url,//请求路径
autoParam: ["id"],//动态参数
otherParam: {},//静态参数 传一些标记什么的
dataFilter: filter//加载前过滤 回调
},
callback: {
onCheck: onCheck//选中 取消
//onExpand: zTreeOnExpand
}
};
function filter(treeId, parentNode, childNodes) {
//加载前过滤
//如果 加载的对象 名称 字段不是name 此处 修改
childNodes[i].name = childNodes[i].名称字段;
//加载时 是否选中 也可以在此处设置
childrenNodes[i].checked = true
childrenNodes[i].isParent = true //是父节点
}
$(document).ready(function() {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
jsp代码
<ul id="treeDemo" class="ztree"></ul>