ztree

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I got problem with using zTree library. this is my code <script type="text/javascript" src="<?php echo base_url()?>asset/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="<?php echo base_url()?>asset/js/jquery.ztree.core-3.5.js"></script> <SCRIPT type="text/javascript"> <!-- var setting = { data: { simpleData: { enable: true } } }; var zNodes =[ { id:1, pId:0, name:"Custom Icon 01", open:true, iconOpen:"<?php echo base_url()?>asset/img/diy/1_open.png", iconClose:"<?php echo base_url()?>asset/img/diy/1_close.png"}, { id:11

1、首先去官网下载 http://www.ztree.me/v3/main.php#_zTreeInfo 2、之后引入： <script src="js/jquery.ztree.all-3.5.js"></script> <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css"> 3、写js： <!--树形结构 JS--> <script type="text/javascript"> var setting = { data: { simpleData: {enable: true } }, check: { enable: true , chkStyle: "radio" , radioType: "all" }, view: { showLine: true }, callback: { onClick: onClick, onCheck: onCheck, } }; var zNodes = [ <# if selectNewsTypeAll?size gt 0> <#list selectNewsTypeAll as sNewsTypeAll> {id:${sNewsTypeAll.id}, pId:${sNewsTypeAll.parentId}, name: "$

在zTree上面动态添加节点要用到函数： addNodes(parentNode, [index], newNodes, isSilent) 关于这个函数的详细说明如下： 示例代码如下： //1、获取zTree对象 var treeObj = $.fn.zTree.getZTreeObj( "treeDiv" ); //2、获取当前选中的节点 var selectedNode = treeObj.getSelectedNodes(); //3、给定一个要添加的新节点 var newNode = { name : "testnewNode1" }; //4、把这个新节点添加到当前选中的节点下，作为它的子节点 if (selectedNode.length > 0 ) newNode = treeObj.addNodes(selectedNode[ 0 ], newNode); 亲测有效 文章来源: zTree动态添加节点

一般来说ztree都是利用id ，name ，parentid，来作为组合树的，但是我们也是可以改变这个三个参数的，比如，可能我们定义的是 menuid，menuname，menuparentid，所以下面获取id，name，parentid时， 都是采用的动态的方式，并不是平常 我们使用的arr[i].id之类的 function search (a) { var treeid = $(a).parent().next().children().attr("id"); var zTreeObj = $.fn.zTree.getZTreeObj(treeid); var nodes = zTreeObj.transformToArray(zTreeObj.getNodes()); //, for ( var i = 0;i < nodes.length; i++){ var node = nodes[i]; if //var hideNode = zTreeObj.getNodeByParam("isHidden", true); var childKey = $(a).parent().next().children().attr("data-childKey"); var nameKey = $(a).parent().next().children().attr("data

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 在做项目的时候，我们经常能用到zTree，但是，有的时候，因为树数据过多，而导致树加载很慢，测试超过10000条数据就要加载3秒左右，如果有更多的数据，那用户的体验会是一个什么样子？ 今天也是在做项目的时候遇到这个问题，也就来做下笔记！ 第一步当然是去查询我们需要的树数据了，SQL的写法如下： @Autowired private JdbcTemplate jdbcTemplate; @Override public List<User> findUserList (String areaCode) { //这里判断是不是第一次进来，如果是，赋给他顶级节点的ID if (StringUtils.isEmpty(areaCode)) { areaCode = "620000" ; } StringBuilder sql = new StringBuilder(); sql.append( "SELECT * FROM USER WHERE PART_ID = '" + areaCode + "'" ); //判断是否为第一次进来，如果是第一次，则查询顶级节点和下一级节点，如果不是，则只查询当前areaCode的子节点 if ( "620000"

版权声明：所有原创，转载请在开头注明出处 https://blog.csdn.net/SELECT_BIN/article/details/90474888 ------------------------------记事本系列 ztree的树形结构： {"id":1,"pId":0,"name":"父节点一"},{"id":2,"pId":0,"name":"父节点二"},{"id":11,"pId":1,"name":"子节点一"},{"id":12,"pId":1,"name":"子节点二"},{"id":13,"pId":2,"name":"子节点三"},{"id":14,"pId":2,"name":"子节点四"} data:[ {id:0,text:"全部",children:[ {id:"1",text:"node1"}, {id: 2, text:"node2"}, {id:"3", checked:true,text:"node3"}, //复选框有效可用checked属性 {id:"5",text:"node4",children:[ {id:"5",text:"node4-1",iconCls:"icon-save"}, {id:"6",text:"node4-1"} ]} ]} ], [ //节点 { name: '常用文件夹' ,id: 1 ,alias:

var arr=[]; var parentOrgId =1; var childZNode = new ZtreeNode(100,parentOrgId, '子节点0'); //构造子节点 arr.push(childZNode); var childZNode = new ZtreeNode(101,parentOrgId, '子节点1'); //构造子节点 arr.push(childZNode); var treeObj = $.fn.zTree.getZTreeObj("tree");//获取ztree对象 var parentZNode = treeObj.getNodeByParam("id", parentOrgId, null); //获取父节点 文章来源: https://blog.csdn.net/ozhy111/article/details/89785202

//回显选择的checkbox函数 function treeHxIdFun(obj) { var objTree = $.fn.zTree.init($("#demo"), setting, nodes); var zTreeObj = $.fn.zTree.getZTreeObj("demo"); var zTree = objTree.getCheckedNodes(false); for(var i = 0; i < obj.length; i++){ zTreeObj.checkNode(zTreeObj.getNodeByParam("id", obj[i])); zTreeObj.selectNode(zTreeObj.getNodeByParam("id", obj[i])); }; }; obj =["34", "3", "34#add"] 数组，id 与树形的所有id 一致 文章来源: z-tree 回显所有选中的id

var setting = { data: { simpleData: { enable: true } } ,check: { enable: true , chkStyle: 'checkbox' //,chkboxType:{ "Y": "", "N": "" } } ,callback:{ onCheck:function(e,treeId, treeNode){ if(treeId == "treeDemo") { var zTreeObj = $.fn.zTree.getZTreeObj(treeId); optParOrSon(treeId, treeNode,zTreeObj); } } } }; //获取所有子节点 var getChildsByTreeNode = function(treeNode,childsArr){ var childsArr = childsArr || []; if (treeNode.isParent) {//是父节点则获取所有子节点 var childs = treeNode.children; for(var i in childs){ childsArr.push(childs[i]); getChildsByTreeNode(childs[i],childsArr); } } return childsArr; }; /