ztree取消节点操作
jQuery取消checkbox选中状态，一般是这样解决的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery取消checkbox选中状态</title>
</head>
<body>
<input type="button" value="取消" onclick="box();" />
<input type="checkbox" checked="checked" id="box" />
</body>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
function box() {
$("#box").attr("checked", false);
}
</script>
</html>但是在Ztree的组件里面，我们看到的勾选框并不是checkbox完成，而是使用了图片精灵，选中和未选中的状态里面是一张背景图片里面不同的定位~
主要代码
zTreeObj.checkNode(zTreeObj.getNodeByParam('name', $(delId + '_span').text()), false, false, true)一个demo:
<!DOCTYPE html>
<html>
<head>
<title>ztree</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ztree_v3/css/zTreeStyle/zTreeStyle.css" />
<link rel="stylesheet" type="text/css" href="ztree_v3/ztree_custom.css" />
<style>
li {
list-style-type: none;
}
.ztree {
margin: 0;
padding: 5px;
color: #333;
width: 232px;
height: 259px;
border: 1px solid #000;
}
#boxRight {
border: 1px solid #000000;
width: 200px;
height: 259px;
position: absolute;
top: -7px;
left: 308px;
}
#toRight {
position: absolute;
top: 120px;
left: 256px;
}
.del {
color: red;
}
.group {
color: red;
}
</style>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="ztree_v3/js/jquery.ztree.core-3.5.min.js"></script>
<script src="ztree_v3/js/jquery.ztree.excheck-3.5.min.js"></script>
<script src="ztree_v3/js/jquery.ztree.exedit-3.5.min.js"></script>
</head>
<body>
<ul id="zTree" class="ztree">
</ul>
<button id="toRight">></button>
<li class="shuttleBox near">
<ul id="boxRight">
<!--<span class="del">删除</span>马可波罗<span class="group">设为组长</span>-->
</ul>
</li>
<button id="btn" type="submit">提交</button>
</body>
<script type="text/javascript">
//树形菜单
var zTreeObj; //定义ztree对象
initTree(); //初始化ztree
var setting = {
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: {
"Y": "s",
"N": "s"
}
},
view: {
selectedMulti: true,
showLine: false
},
data: {
key: {
name: "name"
},
simpleData: {
enable: true,
pIdKey: "pId",
}
},
};
//请求数据
function initTree() {
$.get("data.json", function(data) {
console.log(JSON.stringify(data));
zTreeObj = $.fn.zTree.init($("#zTree"), setting, data);
zTreeObj.expandAll(true);
});
}
//删除按钮和设为组长函数
function del() {
$('.del').click(function() {
debugger;
$(this).closest('li').remove();
var delId = '#' + $(this).closest('li').attr('id')
zTreeObj.checkNode(zTreeObj.getNodeByParam('name', $(delId + '_span').text()), false, false, true)
})
$('.group').click(function() {
if($('.group:contains("取消组长")').length > 0 && $(this).text() === '设为组长') {
alert("只能设一个组长")
return;
}
if($(this).text() === '设为组长') {
$(this).text('取消组长').parent().css('color', '#E44F4F')
} else {
$(this).text(
'设为组长').parent().css('color', '#000')
}
})
}
del();
//穿梭框左侧选中
$("#zTree").on('click', 'li.level1', function() {
//treenode_check
if($(this).hasClass('shuttleAct')) {
$(this).removeClass('shuttleAct');
} else {
$(this).addClass('shuttleAct');
}
});
//向右移动
$("#toRight").click(function() {
$('#boxRight').html("")
var arr = [] //循环找到右边已存在的id，把右边所有的id放在数组里面
$("#boxRight li").each(function(i, e) {
arr.push($(e).attr('id'))
})
var html = '';
$('span.checkbox_true_full').closest('li').each(function() {
if($(this).find('ul').length !== 0) {
return;
}
if(arr.indexOf($(this).attr('id')) > -1) {
return; //右侧有重复的id
} //在右边的数组里面寻找左边括号里面选中的id
html += '<li id="' + $(this).attr('id') + '">';
html += '<span class="del" ><img src="img/dateDel.png" /></span><span class="name">' +
$(this).text() +
'</span><span class="group">设为组长</span>';
html += '</li>';
})
$('#boxRight').append(html)
//执行删除按钮和设为组长函数
del();
$("#boxRight li").removeClass('shuttleAct');
});
//提交所选中的状态，提交给后端
$("#btn").click(function() {
if($("#boxRight li").length < 3) {
alert("互监组至少三人");
return;
}
if($('.group:contains("取消组长")').length < 1) {
alert("必须设置互监组长")
return;
}
var params = {
groupName: $(".group:contains('取消组长')").prev('.name').text(),
criminals: checkNode()
}
alert(JSON.stringify(params))
$.ajax({
url: basePath + "/patrol",
contentType: 'application/json',
data: JSON.stringify(params),
type: "POST",
success: function(data) {}
});
})
//获取选中的人员
function checkNode() {
nodes = zTreeObj.getCheckedNodes(true);
var permTokens = new Array(); //创建list集合
var j = 0;
for(var i = 0; i < nodes.length; i++) {
if(nodes[i].token == "organ")
continue;
permTokens[j] = nodes[i].token + "," + nodes[i].name + "," + nodes[i].tId + "," + 0;
j++;
}
return permTokens;
}
</script>
</html>json:
[
{
"id": null,
"pId": 1,
"name": "典韦212",
"iconSkin": null,
"checked": null,
"isParent": false,
"token": "D91D0DE952DE",
"type": 1
}, {
"id": null,
"pId": 1,
"name": "马可波罗",
"iconSkin": null,
"checked": null,
"isParent": false,
"token": "EAFA6CCF3CDD",
"type": 1
}, {
"id": null,
"pId": 1,
"name": "lkjTest",
"iconSkin": null,
"checked": null,
"isParent": false,
"token": "D69C2A3ACB30",
"type": 1
}, {
"id": null,
"pId": 1,
"name": "DDDDD",
"iconSkin": null,
"checked": null,
"isParent": false,
"token": "DDDDDD",
"type": 1
}, {
"id": null,
"pId": 1,
"name": "DDDDDF",
"iconSkin": null,
"checked": null,
"isParent": false,
"token": "EEEEEEE",
"type": 1
}, {
"id": 1,
"pId": 0,
"name": "王小婷",
"iconSkin": null,
"checked": null,
"isParent": true,
"token": "organ",
"type": null
}, {
"id": 134,
"pId": 1,
"name": "技术部",
"iconSkin": null,
"checked": null,
"isParent": true,
"token": "organ",
"type": null
}, {
"id": 137,
"pId": 1,
"name": "wer",
"iconSkin": null,
"checked": null,
"isParent": true,
"token": "organ",
"type": null
}, {
"id": 138,
"pId": 1,
"name": "wer",
"iconSkin": null,
"checked": null,
"isParent": true,
"token": "organ",
"type": null
}, {
"id": 139,
"pId": 1,
"name": "wer",
"iconSkin": null,
"checked": null,
"isParent": true,
"token": "organ",
"type": null
}
]
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读