标签:数组 lin 好用 click string checkbox min for 源代码
此处zTree v3用来显示区域信息,由于数据量有点大,一次性加载的话,请求的数据量比较大。考虑采用异步加载的方式,即只在打开下一层的时候去请求这一层的数据。
zTree API:http://www.treejs.cn/v3/api.php
API文档相当详细,DEMO也很齐全,查看demo的代码可以选择右击,查看框架源代码。
由于数据结构已定,个人觉得还是有很多显得累赘的地方。
还有个问题,回显半选处理,一直想不到好的办法。
首先是前端zTree参数设置:
var zTreeObj; var setting ={ check: { //勾选 enable: true, chkStyle: "checkbox" , chkboxType: { "Y": "ps", "N": "ps" }, nocheckInherit: true//新加入子节点时,继承父节点的状态 }, view: {expandSpeed:"", showLine: true,//是否显示节点之间的连线 selectedMulti: false,//设置是否允许同时选中多个节点 //dblClickExpand: dblClickExpand//双击节点时,是否自动展开父节点 }, async:{ enable:true, url:"../administrativeAction/getTreeJson", autoParam:["id=adminiId"], dataFilter:filter }, callback:{ //beforeExpand:zTreeBeforeExpand, onCheck: zTreeOnCheck, onAsyncSuccess: zTreeOnAsyncSuccess }, data:{ keep: { leaf:false,//如果设置为 true,则所有 isParent = false 的节点,都无法添加子节点。 parent: true//如果设置为 true,则所有 isParent = true 的节点,即使该节点的子节点被全部删除或移走,依旧保持父节点状态。 }, simpleData: { enable: true//不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式 } } }; var zNodes=""; $(function(){ zTreeObj = $.fn.zTree.init($("#treeDemo"),setting,zNodes); }) function filter(treeId,parentNode,responseData){ return responseData; } var newNode; //ztree的勾选 function zTreeOnCheck(event, treeId, treeNode){ var devId="";//ztree中用到的变量,当单独选择设备的时候,把设备的id赋值到这来 var addressCode="";//选择一个区域的时候,把区域的编码赋值到这来 //获取勾选状态集合 var treeObj=$.fn.zTree.getZTreeObj("treeDemo"), nodes=treeObj.getCheckedNodes(true); for(var i=0;i<nodes.length;i++){ var checkStatus = nodes[i].getCheckStatus();//1获取节点状态 if(!checkStatus.half && checkStatus.checked){//2如果获取的节点的状态是选勾选并且不是半勾选 var parentNode = nodes[i].getParentNode();//3获取父节点 ,返回 节点的父节点 JSON 数据对象。 if(parentNode != null){ //4如果节点的父节点不为null var parentCheckStatus = parentNode.getCheckStatus();//5获取父节点的状态 if(parentCheckStatus.half){//6如果获取的父节点的状态是半勾选 addressCode=addressCode+nodes[i].code+";"; } }else{//这来是选取所有节点 addressCode=addressCode+nodes[i].code+";"; } } } $("#devId").val(devId); $("#addressCode").val(addressCode); } //ztree初始化勾选 function zTreeOnAsyncSuccess(event, treeId, newNode,msg) { var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var data = eval(msg); var nodeLevel = data[0].codeLevel; var v_addressCode=$.trim($("#addressCode").val()); if(v_addressCode != ""){ var addressArray=v_addressCode.split(";"); for ( var i in addressArray) { if(addressArray[i] == ""){ return; } //拆解code,找到最底层code的path var subCodes = codeReg(addressArray[i]); var len = subCodes.length; if(len > 1){ //对应的层级勾选对应的区域代码 var node = treeObj.getNodeByParam("code",subCodes[nodeLevel-1],null); treeObj.checkNode(node,true,true); }else{ //勾选省级另外处理 var node = treeObj.getNodeByParam("code",subCodes[0],null); treeObj.checkNode(node,true,true); } } } } //由于之前大佬代码的实现,要回显区域可能是最底层区域, //这时就只有一个最底层区域的编码,为了拿到该区域的parent路径 //可以选择提供的API-getPath,来获取parent的 //还是解析吧。 function codeReg(code){ var codeList=[]; if(code.length == 6){ codeList.push(code); return codeList; } codeList.push(code.substring(0,2)+"0000"); codeList.push(code.substring(0,4)+"00000000") codeList.push(code.substring(0,6)+"000000") codeList.push(code.substring(0,9)+"000") codeList.push(code); return codeList; }
异步请求的后台地址,在setting中的async-url中设置。
这里如果带参请求,可以在autoParam中获取,对应着改变,后台框架采用SSH,根据属性驱动,这里让treeNode节点的id=adminiId,adminiId为后台属性。
回显,主要在zTreeOnAsyncSuccess这个函数中实现,对区域代码,分成两个部分处理:
区域的相关数据都是从网上爬取得,所以省级的区域编码只有6位,特殊处理一下。
1.省级被勾选上,这是最简单的情况,只要在每次异步请求的时候无脑的checkNode省级,就可以了,子级树展开显示的时候会自动继承parent的勾选状态。
2.其他的采用数据库字段中的一个level来和树的level结合,最后和分解出来的区域编码subCodes数组结合,依次每次展开到一个层级之后,就在subCodes中根据level为下标,来勾选此层级中所有的应该勾选的node。
到此,一直没有处理半勾选的情况。现在是可以实现回显勾选,但是如果存在半勾选的话,checkBox的样式就会有问题,考虑过有treeNode的的halfCheck属性去解决,最后惨败。
感觉halfCheck属性和checked属性结合是可以解决这个问题的,应该会比较麻烦吧,还没想到什么好办法可以解决这个半勾选的问题。
zTree的几个回调函数还是牛逼,好用,基本上能满足所有的动作。
这个异步加载也可以放在beforeExpand这个回调中去实现的。
beforeExpand和onAsyncSuccess的优先级
filter中可以对后台相应的数据,进行预处理。
后面有时间在来,要仔细的研究一下。记之。
标签:数组 lin 好用 click string checkbox min for 源代码
原文地址:http://www.cnblogs.com/GoneLW/p/7818614.html