Ztree 多选,显示勾选的路径
项目要求,需要向后台传递已经勾选的路径,如 l1-a, l1-l3-c,l1-l3-d;(如果是全选状态则只传递全选状态的路径,不传子节点)。
具体可以参考jQ Ztree 的 v3.5 版本
Metro 风格的demo
var mesetting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: true,
showIcon:true,
showLine:true,
dblClickExpand: false//禁用双击展开父节点功能
},
edit: {
enable: false,
showRemoveBtn: false,//设置删除按钮是否显示
showRenameBtn: false,//设置编辑按钮是否显示
drag: {//禁用拖拽
isCopy: false,
isMove: true
}
},
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
onClick: onClick,
onCheck: onCheck
}
};
主要描述onCheck :
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getCheckedNodes(true);
var oArr = [],nArr = [],oId;
$.each(nodes,function (index,item){
if (item.check_Child_State == 2 && !item.pId){
oArr.push(item); } if (item.check_Child_State == 2 && item.pId){
oId = item.id;
nArr.push(item);
} else if (item.check_Child_State == -1 && item.pId != oId){
nArr.push(item);
}
});
上面代码,oArr 取的是根节点的路径,nArr 取出的是根节点为半选状态的路径;
主要遇到一个坑就是下面要描述的 运用递归去 找出我要的路径结果:
function getFilePath(treeNode){
if(treeNode==null)return "";
var filename = treeNode.name;
rootName = treeNode.name;
var pNode = treeNode.getParentNode(); if(pNode!=null){
// oldName == '' ? path.push(pNode.name + ',' + filename) : path.push(pNode.name + ',' + oldName);
oldName == '' ? newName = pNode.name + ',' + filename : newName = pNode.name + ',' + oldName;
oldName = pNode.name + ',' + filename;
filename = getFilePath(pNode); }
path.push(newName);
return filename,oldName = '',newName = '';
}
然后 发现这个path 是含有空的一个数组,希望大神能给看看上面情况。我处理的是对数组进行去空了操作
//去除数组中的空值
function trimSpace(array){
for(var i = 0 ;i<array.length;i++)
{
if(array[i] == "" || typeof(array[i]) == "undefined")
{
array.splice(i,1);
i= i-1; }
}
return array;
}
以上仅代表个人在使用这个ztree中碰到多选构造路径遇到的麻烦。
Ztree 多选,显示勾选的路径的更多相关文章
- ztree点击文字勾选checkbox,radio实现方法
ztree的复选框checkbok,单选框radio是用背景图片来模拟的,所以点击文字即使用label括起checkbox,radio文字一起,点击文字也是无法勾选checkbox. 要想点击ztre ...
- jquery,attr,prop,checkbox标签已有checked=checked但是不显示勾选
最近在做项目的过程中碰到了这样的一个问题:在使用bootstrap模态框的过程中,在模态框中有一个checkbox标签,一开始是为选中的,当点击触发模态框按钮,选中chcekbox时,会显示勾选,这个 ...
- 解决jquery操作checkbox全选全不选无法勾选问题
最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...
- Angular/Vue多复选框勾选问题
此页面效果以Angular实现,Vue也可按照其大致流程实现,其核心本质没有改变. 功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交 ...
- jquery checkbox勾选取消勾选的诡异问题
jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form> 你爱好的运动是?<input type=&q ...
- Ztree加载完成后显示勾选节点
①前言:这个在度娘上没有搜到解决的办法,于是自己查看了ztree的API,发现其实还是比较简单的.做个笔记以备不时之需. ②需求: 像下图一样,在加载完成之后就显示需要勾选的项. ③解决方案: 首先页 ...
- ztree学习---将默认勾选的展开
这里只给出前台页面上的代码,数据可以从后台获取,注意,在封装数据的时候,注意:Id(节点的id,可以是数字也可以是字符串) , pid(父亲节点的id) , name(节点名称)不能少 . html页 ...
- zTree 节点勾选取消勾选 选中取消选中
zTreeObj.cancelSelectedNode function 举例 取消当前所有被选中节点的选中状态 var treeObj = $.fn.zTree.getZTreeObj(" ...
- jquery checkbox勾选/取消勾选的诡异问题
<form> 你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br ...
随机推荐
- HDU 6092:Rikka with Subset(dp)
分析 很多个较小的数字可以随机组合成较大的数字,所以B数组从小到大开始遍历,除了空集,最小的那个存在的个数对应的数字必然是a数组中的数字. 每求出这一部分之后,更新后续的B序列. 分析完后,主要的难点 ...
- HDU6035:Colorful Tree(树形DP)
传送门 题意 给出一棵最小生成树及每个节点的颜色,询问\(\frac{n(n-1)}2\)条路径的权值和,一条路径的权值为该路径的颜色种数 分析 勉强理解了ftae的做法,但是代码还是不太会,还是太弱 ...
- hdoj1540 【线段树的表示】
大牛blog 这题的题解写给自己看-- 总结(瞎扯一点): 之前只会思考,len,sum,然后GG,如果只是sum和len的去用的话,就是在mid的时候会GG.然后这次也是参考大牛的写法,其实还是蛮简 ...
- python多线程批量下载远程图片
python多线程使用场景:多线程采集, 以及性能测试等 . 数据库驱动类-简单封装下 mysqlDriver.py #!/usr/bin/python3 #-*- coding: utf-8 -*- ...
- 如何修改hosts文件并生效
hosts文件位置C:\Windows\System32\drivers\etc(可以建立一个.bat 的文件把(start "" C:\Windows\System32\driv ...
- LuoguP3964 [TJOI2013]松鼠聚会【切比雪夫距离/前缀和】
题目传送门 前置知识:切比雪夫距离和曼哈顿距离的相互转化--自为风月马前卒 有了这个知识,我们便可以在读入松鼠的家的坐标时,先把他转化一下,然后把最后的总式化简,我们会得到一个充满后缀和以及前缀和的式 ...
- python之self本类对象
不知道写点啥好,讲的都太绕了 似懂非懂,貌似懂了 以后再补充吧,视频day8_3中的20——60分钟那一部分
- AVL树(平衡二叉树)
定义及性质 AVL树:AVL树是一颗自平衡的二叉搜索树. AVL树具有以下性质: 根的左右子树的高度只差的绝对值不能超过1 根的左右子树都是 平衡二叉树(AVL树) 百度百科: 平衡二叉搜索树(Sel ...
- bzoj1024 [SCOI2009]生日快乐【dfs】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1024 普通的深搜. #include <cstdio> #include < ...
- 喵哈哈村的魔法考试 Round #1 (Div.2) ABCD
官方题解: http://www.cnblogs.com/qscqesze/p/6418555.html#3623453 喵哈哈村的魔法石 描述 传说喵哈哈村有三种神奇的魔法石:第一种魔法石叫做人铁石 ...