工作中用到分类选择树型下拉框,只允许单选叶子节点上的分类。如此需要使用把isParent=true的node的nocheck设置成true。
可以在ztree的jquery.ztree.core-3.5.js的appendNodes中增加一个回调函数接口setting.callback.afterInitNode:
appendNodes: function(setting, level, nodes, parentNode, initFlag, openFlag) { if (!nodes) return []; var html = [], childKey = setting.data.key.children; for (var i = 0, l = nodes.length; i < l; i++) { var node = nodes[i]; if (initFlag) { var tmpPNode = (parentNode) ? parentNode: data.getRoot(setting), tmpPChild = tmpPNode[childKey], isFirstNode = ((tmpPChild.length == nodes.length) && (i == 0)), isLastNode = (i == (nodes.length - 1)); data.initNode(setting, level, node, parentNode, isFirstNode, isLastNode, openFlag); //对渲染前的数据作最后的修正 setting.callback.afterInitNode&&setting.callback.afterInitNode(node); data.addNodeCache(setting, node); } var childHtml = []; if (node[childKey] && node[childKey].length > 0) { //make child html first, because checkType ……………
在data.initNode后树节点数据已经初始化结束,接下便是创建树节点dom。所以可以afterInitNode里完成nocheck的设置,对渲染前的数据作最后的修正。
// Add semicolon to prevent IIFE from being passed as argument to concatenated code. ; // UMD (Universal Module Definition) // see https://github.com/umdjs/umd/blob/master/returnExports.js (function (root, factory) { /* global define, exports, module */ if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(factory); } else if (typeof exports === 'object') { // Node. Does not work with strict CommonJS, but // only CommonJS-like enviroments that support module.exports, // like Node. module.exports = factory(); } else { // Browser globals (root is window) root.TreeDropDown = factory(); } }(this, function () { /*** * <div style="position:relative"> * <input type="text"></input> * </div> */ var TreeDropDown=function(config){ this.treeId='treeDropDown'+TreeDropDown.count++; //说明文字 this.selectType='radio'; //radio|checkbox this.checkOnlyChild=true; this.$input={}; // this.$inputValue={}; this.desc='请选择'; //空值描述的文字 this.idField='id'; this.simpleData=true; this.parentIdField='pId'; this.isParent=function(record){return record.isParent===true}, this.nameField='name'; //tree节点名称字段 this.valueField='id'; //作为值的数据字段 this.name=''; //选中的名称 this.value=''; //选中的值 this.dataUrl=''; //tree的数据url this.treeData=[]; //tree的数据 this.onAfterSelectNode=function(name,value,treeNodes){}; $.extend(true,this,config); this.$parent=this.$input.parent(); this.init(); }; TreeDropDown.count=0; TreeDropDown.prototype={ render:function(){ //初始化input this.$input.css({ "background-image": "url('/resources/images/triangle-botton-16.png')", "background-repeat": "no-repeat", "background-position": "right", "background-color": "#fff", cursor: "pointer" }); this.$input.prop('readonly',true); this.$input.attr("placeholder",this.desc); //添加下拉框div this.$parent.append('<div class="dropDiv" style="position: absolute;display:none"><ul id="'+this.treeId+'" class="ztree dropTree"></ul></div>'); //树的容器 this.$treeDiv=$('.dropDiv',this.$parent); this.$tree=$('#'+this.treeId,this.$parent); this.$treeDiv.css({ width: this.$input.outerWidth(true)-2, padding:'5px 0', "z-index": 100, "background-color": '#fff', border: '1px solid #cccccc', "border-radius": '3px' }); //初始化树 this.initTree(); }, initTree:function(){ var that=this,treeSetting = { data : { simpleData : { enable : this.simpleData } }, check:{ chkStyle:this.selectType, radioType:"all", enable: true }, view : { selectedMulti : false }, callback: { //扩张的ztree事件:appendNodes的data.initNode之后 afterInitNode:function(treeNode){ if(that.checkOnlyChild) treeNode.nocheck=treeNode.isParent; }, onClick: function(event, treeId, treeNode){ if(treeNode.nocheck) return; if(!treeNode.checked) { that.ztreeObj.checkNode(treeNode,true); (that.selectType=='radio')&&that.showOrHide(); } else that.ztreeObj.checkNode(treeNode,false); that.afterSelectNode(that.ztreeObj.getCheckedNodes(true)); return false; } } }; if(this.simpleData) treeData=$.map(this.getTreeData(),function(ele){ return { id:ele[that.idField], name:ele[that.nameField]||'', pId:ele[that.parentIdField]||0, isParent:that.isParent(ele), nocheck:that.isParent(ele), _value:ele[that.valueField], data:ele }; }); else treeData=$.map(this.getTreeData(),this.translateData.bind(this)); this.ztreeObj = $.fn.zTree.init(this.$tree, treeSetting, treeData); this.ztreeObj.expandAll(true); }, translateData:function(data){ var res={ id:data[this.idField], name:data[this.nameField]||'', pId:data[this.parentIdField]||0, isParent:this.isParent(data), nocheck:this.isParent(data), _value:data[this.valueField], data:data }; if(data.children&&data.children.length>0) res.children=$.map(data.children,this.translateData.bind(this)); return res; }, afterSelectNode:function(treeNodes){ var nameField=this.nameField,valueField=this.valueField; if(treeNodes.length==0) { this.name=''; //选中的名称 this.value=''; //选中的值 } else if(treeNodes.length==1) { this.name=treeNodes[0].data[nameField]; //选中的名称 this.value=treeNodes[0].data[valueField]; //选中的值 } else { this.name=$.map(treeNodes,function(n){return n.data[nameField];}).join(','); this.value=$.map(treeNodes,function(n){return n.data[valueField];}).join(','); } this.$input.val(this.name); this.$inputValue.val(this.value); this.onAfterSelectNode&&this.onAfterSelectNode(this.name,this.value,treeNodes); }, setValue:function(value){ if(value==null) return; var that=this, treeNodes=$.map(value.split(','),function(v){ var treeNode=that.ztreeObj.getNodeByParam("_value",v); if(treeNode==null) return; that.ztreeObj.checkNode(treeNode, true, false); return treeNode; }); this.afterSelectNode(treeNodes); }, getTreeData:function(){ var res=this.treeData; if(this.dataUrl) $.ajax(this.dataUrl,{ type:'POST', dataType:'json', async:false }).done(function(data){ res=data; }).fail(function(){ }); return res; }, bind:function(){ var that=this; this.$input.on('click',function(){ that.showOrHide(); }); }, showOrHide:function(){ if(this.$treeDiv.css('display')=='block') this.$treeDiv.css('display','none'); else this.$treeDiv.css('display','block'); }, fillData:function(){ this.value!=null&&this.setValue(this.value); }, init:function(){ this.render(); this.bind(); this.fillData(); } }; return TreeDropDown; }));
相关推荐
### 获取zTree节点数据 #### 知识点概述 本文主要介绍如何在JavaScript环境中通过zTree插件获取选中的树节点数据。zTree是一款基于jQuery的树形控件,广泛应用于展示具有层次结构的数据集。在很多场景下,我们需要...
// 初始化ZTree var setting = {}; var zNodes = [/* ZTree 的 JSON 数据 */]; $.fn.zTree.init($("#treeDemo"), setting, zNodes); // 筛选并改变颜色 function filterAndColor(text) { var nodes = $.fn.zTree....
这可能是因为初始化ZTree时的配置项设置不当,或者是在添加新节点的逻辑上有误。 要解决这个问题,我们需要关注以下几点: 1. **配置项检查**:ZTree的配置项中,`data.initTree` 和 `data.isSimpleData` 都可能...
1. **配置自定义节点**: 在初始化`ZTree`时,我们可以为每个节点添加自定义属性,比如`data`对象中的`button`字段,用于存放自定义按钮的相关信息,如文字、图标和点击事件处理函数。 2. **编写HTML结构**: 在树...
初始化ZTree时需要传入配置对象以及初始数据(如果是静态数据的话)。如果使用异步加载,则只需要传入配置对象即可。 ```javascript $.fn.zTree.init($("#ztree"), setting, result); ``` ##### 3. 处理`iframe`...
确保在初始化 zTree 时设置这个参数。 示例代码: ```javascript var setting = { view: { selectedMulti: false // 可以选择多个节点 }, data: { keep: { selected: true // 保持选中状态 } } }; ```...
要使用Ztree生成树,你需要在HTML中引入Ztree的JavaScript库和CSS样式表,然后在JavaScript代码中进行初始化配置。以下是一个简单的示例: ```html <!DOCTYPE html> <link rel="stylesheet" href="ztree/css/...
- **MtrSearchZTree.js**:这是一个JavaScript文件,可能包含了zTree的具体配置和操作逻辑,如初始化zTree对象、实现模糊查询功能等。 - **css**:这个目录可能包含zTree的CSS样式文件,用于定制节点的外观,如...
4. 创建节点:将JSON数据传递给zTree,通过$.fn.zTree.init()方法初始化树。 5. 监听事件:根据业务需求绑定事件处理函数。 四、API及事件 zTree提供了一系列的API接口,如getTree、getSelectedNodes、expandNode等...
这行代码会在请求成功后初始化ZTree,`$("#treeDemo")`是ZTree的容器,`setting`是ZTree的配置项,`data`则是从后台获取的JSON数据。 4. **事件监听与数据更新**:ZTree提供了丰富的事件监听机制,如`onClick`、`...
1. **初始化**:使用`$.fn.zTree.init()`方法初始化zTree,需要传入选择的DOM元素和配置对象。 2. **操作节点**: - `expandNode()`:展开或折叠指定节点。 - `selectNode()`:选择或取消选择节点。 - `checkNode...
1. 初始化:zTree的初始化需要设置配置参数,如树的容器ID、数据源、显示样式等。例如: ```javascript $(function() { var setting = {}; var zNodes = [ {/*节点数据*/} ]; $.fn.zTree.init($("#treeDemo"), ...
例如,使用JSON格式的固定数据初始化zTree可能如下: ```javascript var setting = { check: { enable: true, chkStyle: "checkbox", radioType: "all" // 或者 "level" for single selection }, data: { ...
1. 初始化配置:zTree的初始化是通过`$.fn.zTree.init()`方法实现的,传入DOM元素、JSON配置对象和zTree的设置对象。配置对象可以设定节点数据、操作行为、视图样式等多个参数。 2. 节点操作: - 添加节点:`...
本教程将通过一个Demo来详细介绍zTree的初始化、数据加载、动态添加数据、更换图标以及事件绑定等关键知识点。 1. **zTree初始化** 初始化zTree时,我们需要在HTML中创建一个ul元素作为zTree的基础容器,并在...
2. 初始化设置:通过`$.fn.zTree.init()`方法初始化zTree,配置项包括`setting`和`zNodes`,其中`setting`是设置对象,`zNodes`是节点数据。 ```javascript var setting = {}; var zNodes = []; $.fn.zTree.init($(...
- 首先,初始化ZTree,配置搜索相关参数,如`searchObj`,其中可以包含自定义搜索函数。 - 其次,监听搜索框的输入事件,触发搜索功能。 - 在自定义搜索函数中,遍历所有节点,使用递归方式处理无限层级。 - 对...
2. **初始化ZTree**:通过JavaScript调用`$.fn.zTree.init()`方法初始化ZTree,传入容器元素和配置对象。配置对象可以设置树的初始状态、节点的展开方式、异步加载等参数。 3. **节点显示**:ZTree会根据提供的JSON...
3. **初始化配置**:设置zTree的配置项,如节点样式、事件处理函数等。 4. **绑定元素**:指定一个DOM元素作为zTree的容器。 5. **初始化zTree**:调用$.fn.zTree.init方法,传入配置和数据,完成zTree的初始化。 ...
3. 创建ZTree:将ZTree的节点数据作为JSON对象传递给ZTree初始化方法,配置相应的参数,如显示检查框、是否启用异步加载等。 4. 结合Select2与ZTree:将ZTree的容器作为Select2的下拉菜单,通过监听ZTree的节点点击...