ztree 指定节点清空_ztree取消节点操作

本文介绍了如何在ZTree组件中取消指定节点的选中状态,包括利用图片精灵处理勾选框状态,以及通过zTreeObj.checkNode方法实现节点的取消选中。还提供了一个示例展示如何在用户点击删除按钮时执行此操作。
摘要由CSDN通过智能技术生成

jQuery取消checkbox选中状态,一般是这样解决的

jQuery取消checkbox选中状态

function box() {

$("#box").attr("checked", false);

}

但是在Ztree的组件里面,我们看到的勾选框并不是checkbox完成,而是使用了图片精灵,选中和未选中的状态里面是一张背景图片里面不同的定位~

主要代码

zTreeObj.checkNode(zTreeObj.getNodeByParam('name', $(delId + '_span').text()), false, false, true)

一个demo:

ztree

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;

}

>

提交

//树形菜单

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 += '

';

html += '' +

$(this).text() +

'设为组长';

html += '

';

})

$('#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;

}

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

}

]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值