JS组件系列——zTree树形组件

zTree使用，官网地址：http://www.treejs.cn

zTree 是一个依靠 jQuery 实现的多功能 “树插件”，而且拥有较好的浏览器兼容性，有着丰富的功能以及可以自定义样式，足以满足大部分业务的开发

第一步先导入css及js文件

<link rel="stylesheet" type="text/css" href="zTree/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="zTree/js/jquery.ztree.all.min.js"></script>

第二步在html页面创建ztree Div

<div><ul id="regionZTree" class="ztree"></ul>
</div>

第三步初始化ztree

var setting = {view: {dblClickExpand: false,//双击节点时，是否自动展开父节点的标识showLine: true,//是否显示节点之间的连线fontCss:{'color':'black','font-weight':'bold'},//字体样式函数selectedMulti: true //设置是否允许同时选中多个节点},check:{//chkboxType: { "Y": "ps", "N": "ps" },chkboxType: { "Y": "", "N": "" },chkStyle: "checkbox",//复选框类型enable: true //每个节点上是否显示 CheckBox},edit:{enable: true,editNameSelectAll: true,showRemoveBtn : true,showRenameBtn : true,removeTitle : "remove",renameTitle : "rename"},data: {simpleData: {//简单数据模式enable:true,idKey: "id",pIdKey: "IPARENTID",rootPId: null}},callback: {beforeExpand:zTreeBeforeExpand, // 用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作}};
zTreeObj = $.fn.zTree.init($("#regionZTree"), setting, dominZTree);

下面是ztree操作的效果图

下面是ztree增删改以及选中的代码

/*** 添加节点* @param obj*/
function addZTreeNode(obj) {var treeObj = $.fn.zTree.getZTreeObj("regionZTree");var parentZNode = treeObj.getSelectedNodes(); //获取父节点var newNode = obj;newNode.nodeFlg = 1;  // 可以自定义节点标识newNode = treeObj.addNodes(parentZNode[0], newNode,true);
}
/*** 修改子节点* @param obj*/
function editZTreeNode(obj) {var zTree = $.fn.zTree.getZTreeObj("regionZTree");var nodes = zTree.getSelectedNodes();for(var i = 0;i<nodes.length;i++){nodes[i].name = obj;zTree.updateNode(nodes[i]);}
}/***  删除子节点 --选中节点* @param obj*/
function removeZTreeNodeBySelect() {var zTree = $.fn.zTree.getZTreeObj("regionZTree");var nodes = zTree.getSelectedNodes(); //获取选中节点for (var i=0;i<nodes.length; i++) {zTree.removeNode(nodes[i]);}
}/***  删除子节点 --勾选节点* @param obj*/
function removeZTreeNodeByChecked() {var zTree = $.fn.zTree.getZTreeObj("regionZTree");var nodes =  zTree.getCheckedNodes(true); //获取勾选节点for (var i=0;i<nodes.length; i++) {zTree.removeNode(nodes[i]);}
}/***  根据节点id 批量删除子节点* @param obj*/
function removeZTreeNodebPi(obj) {var idnodes = obj.split(",");var zTree = $.fn.zTree.getZTreeObj("regionZTree");var nodes = zTree.getSelectedNodes();for (var i=0;i<nodes.length; i++) {var nodes = zTree.getNodeByParam("id", nodes[i]);zTree.removeNode(nodes);}
}
/*** 选择节点* @param obj*/
function selectzTreeNode(obj) {var zTree = $.fn.zTree.getZTreeObj("regionZTree");var node = zTree.getNodeByParam("id",obj);if(node!=null) {zTree.selectNode(node, true);//指定选中ID的节点}
}

JS组件系列——zTree树形组件相关推荐

elementui组件中，树形组件的使用
项目场景: elementui组件中,树形组件的使用问题描述: 通过树形结构展示,点击勾选数据.没有展开树结构的情况下,勾选树节点时,其叶子节点全部被勾选,@check-change="h ...
JS组件系列——Bootstrap Select2组件使用小结
前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列--两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到 ...
【JS组件系列】——表格组件神器：bootstrap table（二：父子表和行列调序）
前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
多叉树结合JavaScript树形组件实现无限级树形结构（一种构建多级有序树形结构JSON（或XML）数据源的方法）
一.问题研究的背景和意义在Web应用程序开发领域,基于Ajax技术的JavaScript树形组件已经被广泛使用,它用来在Html页面上展现具有层次结构的数据项.目前市场上常见的JavaScript框 ...
php oracle组件,Oracle 组件系列小结
Oracle 组件系列小结 Oracle 组件的信息可以通过v$option 和 dba_registry 查看: --查看v$option: V$OPTIONdisplaysOracle Dat ...
JS组件系列——Bootstrap 树控件使用经验分享 - 懒得安分 - 博客园
前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...
JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...
JS组件系列——BootstrapTable 行内编辑解决方案：x-editable
JS组件系列--BootstrapTable 行内编辑解决方案:x-editable 参考文章: (1)JS组件系列--BootstrapTable 行内编辑解决方案:x-editable (2)ht ...
JS组件系列——自己动手扩展BootstrapTable的冻结列功能：彻底解决高度问题
阅读目录一.问题追踪二.效果预览三.源码解析 1.源码各个方法解释 2.对于上述抛出的ie和谷歌的兼容性问题的解析 3.项目中的使用 4.扩展四.总结正文前言:一年前,博主分享过一篇关于b ...

JS组件系列——zTree树形组件

zTree使用，官网地址：http://www.treejs.cn

JS组件系列——zTree树形组件相关推荐

最新文章

热门文章