jquery ztree树
来源:互联网 发布:网络教育专升本统考 编辑:程序博客网 时间:2024/06/07 19:58
1.文件引入
<script type="text/javascript" src="/libs/zTree_v3-master/js/jquery.ztree.core.js"></script> <script type="text/javascript" src="/libs/zTree_v3-master/js/jquery.ztree.exedit.js"></script> //用于ztree编辑啊(增,删,查,改)<script type="text/javascript" src="/libs/zTree_v3-master/js/jquery.ztree.excheck.js"></script> //checkBox<link rel="stylesheet" type="text/css" href="/libs/zTree_v3-master/css/zTreeStyle/zTreeStyle.css">
2.setting属性分析
var setting = { data:{ simpleData:{ enable:true, autoCheckTrigger:true, chkStyle:"checkbox", chkboxType:{"Y":"ps","N":"ps"}, tId:"id", //修改ztree对节点id的命名 pId:"parentId" //修改ztree对父节点id的命名 } }, check: { enable: true //设置checkbox可用 }};3.初始化var zNodes = [];zNodes = [ { tId:1, name: "根节点1", //节点名称 open: false, isParent:true }, { name: "根节点2", open: false, tId: 2, //自定义的,可有可无 编号 children: [ { tId:3, name: "2层节点1" }, { tId:4, name: "2层节点2", /*open: true,*/ children: [{ tId:5, name:"3层节点1" }] } ] }];zNodes = [ {id:1,name: "根节点1", open: false, isParent:true,pId: 0}, {id: 4, name: "2层节点2",pId: 1}, {id:3, name: "2层节点1",pId: 4 }, {id:5, name:"3层节点1",pId:4}, { name: "根节点2", open: false,id: 2,pId: 0}];<ul id="treeDemo" class="ztree"></ul> //html代码zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);4增加节点(1)通过增加json字符串zNodes[1].children[1].children.push({name:"3层节点2:手动添加Json字符串"})(2)通过ztree的addNodes方法var newNode1 = {name:"3层节点3:我是addNodes新增的"};var x = zTreeObj.getNodeByTId("4");zTreeObj.addNodes(x, -1, newNode1, true);5.模糊查询,并使查询节点变色var zNodes1 = zTreeObj.getNodesByParamFuzzy("name", '3层', null); //以name为条件查询,结果为节点的数组for (var i = 0; i < zNodes1.length;i++) { $("#" + zNodes1[i].tId + '_span').css('background-color', 'red'); //修改选中节点的颜色}未打开节点并不在查询结果中,因为这些节点并没有生成html元素$(document).on('click',".switch",function() { if ($("#select").val() != "") { setTimeout(function() { $("#sel").click(); }, 200) }})通过节点的展开按钮的点击事件,如果查询条件不为空则进行查询操作。通过setTimeout设置0.2秒的延迟是因为需要生成html元素,顺序执行的话仍然会先执行查询,后加入html元素,并不能起到子节点查询变色的效果。这个方法并不好,期待大神能给与建议。谢谢
阅读全文
1 0
- zTree -- jQuery 树插件
- zTree -- jQuery 树插件
- zTree -- jQuery 树插件
- zTree -- jQuery 树插件
- Jquery-zTree 权限树
- jquery ztree树
- zTree -- jQuery 树插件
- zTree-jQuery树插件
- (推荐)zTree -- jQuery 树插件
- JQuery zTree树结构使用
- jquery 树结构组件 ------ zTRee
- Jquery树插件zTree入门教程
- Jquery树插件zTree入门教程
- Jquery结合Ztree生成树
- 树结构控件:jQuery zTree
- jQuery的zTree树插件
- jquery-ztree
- jQuery zTree
- 收藏的资源
- 献上bmp280驱动代码(spi接口)
- Play Freamwork框架简介
- 安装lnmp环境
- hibernate(配置文件)入门实例
- jquery ztree树
- android 虚拟运营商忽略国内漫游
- SEH X64(1)
- Intent和IntentFilter的区别详解
- win10 VMI Provider Host占用CPU过高
- 谷歌开源SLAM地图软件Cartographer 可部署机器人等系统
- Kubernetes中PV/PVC/StorageClass
- 安装node.js出现2503错误
- vim 技巧篇