parentNode:指定的父节点,如果增加根节点,请设置 parentNode 为 null 即可
index:新节点插入的位置(从 0 开始),index = -1 时,插入到最后,此参数可忽略
newNodes:需要增加的节点数据 JSON 对象集合,数据只需要满足 zTree 的节点数据必需的属性即可
isSilent:true 时,添加节点后不展开父节点,其他值或缺省状态都自动展开勾选或取消勾选全部节点
checkAllNodes(checked);
checked参数为true时全部勾选,为false时全部取消勾选。勾选或取消勾选单个节点
checkNode(node, checked, checkedTypeFlag,callbackFlag);
node:要进行操作的节点
checked:为true勾选,为false取消勾选
checkeTypeFlag:为true表示对当前结点的子节点及父节点进行勾选状态的联动,为fals不联动
callbackFlag:为true时表示执行beforeOnCheck和onCheck事件的回调函数,为false执行
编辑节点
edit(node); 使节点处于编辑状态,必须引用jquery.ztree.exedit 扩展。展开或折叠全部节点
expandAll(expand);
expand为true是展开所有节点,为false是折叠所有节点。
根据节点属性查找结点
getNodesByParam(key,value, parentNode);
key:属性名
value:属性值
parentNode:是否在指定节点下查找,为null表示整个树查找。获取被勾选或未被勾选的节点集合
getCheckedNodes(checked);
checked为true表示获取所有被勾选的节点集合,为false表示所有未被勾选的节点集合获取输入框勾选状态被改变的节点集合
getChangeCheckedNodes()
一,得先引用Ztree的CSS和JS的插件:
<link href="~/Plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/Plugins/ztree/js/jquery.ztree.core.js">script>
<script src="~/Plugins/ztree/js/jquery.ztree.excheck.js">script>
<script src="~/Plugins/ztree/js/jquery.ztree.exedit.js">script>
二,给树形写一个标签:
<div style="vertical-align: middle; text-align: center;">
<div>
<ul id="treeSelect" class="ztree">ul>
div>
div>
三,初始化树形:
$(document).ready(function(){
zTree = $.fn.zTree.init($("#treeSelect"), setting, datas);
});
四,设置他们的参数:
五,设置他们的数据,在设置这个的时候,最主要的就是他们的ID和PId,代码如下:var datas = [
{ id: 1, pId: 0, name: "颜色", open: true },
{ id: 11, pId: 1, name: "蓝色", open: true },
{ id: 12, pId: 1, name: "绿色", open: true },
{ id: 2, pId: 0, name: "衣服", open: false },
{ id: 27, pId: 2, name: "裙子" },
{ id: 28, pId: 2, name: "裤子", open: true },
{ id: 3, pId: 0, name: "地区", open: false },
{ id: 27, pId: 3, name: "广东" },
{ id: 28, pId: 3, name: "四川", open: true },
];
实现的效果: