使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
更新时间：2015年12月06日 11:11:06 投稿：hebedich
这篇文章主要介绍了使用jQuery+EasyUI实现CheckBoxTree的级联选中特效的相关资料,需要的朋友可以参考下
需求：子结点选中，父节点随之选中，父节点取消，子节点随之取消
代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="js/themes/default/easyui.css" rel="stylesheet" />
<link href="js/themes/icon.css" rel="stylesheet" />
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.easyui.min.js"></script>
<script src="js/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
var data = [{
"id": 1,
"text": "系统",
"children": [{
"id": 11,
"text": "用户管理",
"children": [{
"id": 19,
"text": "增加"
}, {
"id": 3,
"text": "修改"
}, {
"id": 5,
"text": "删除"
}]
}, {
"id": 12,
"text": "角色管理",
"children": [{
"id": 13,
"text": "增加"
}, {
"id": 3,
"text": "修改"
}, {
"id": 5,
"text": "删除"
}]
}]
}, {
"id": 2,
"text": "其他",
"state": "closed"
}];
$(function () {
$("#tt").tree({
data: data,
checkbox: true,
cascadeCheck: false,
onCheck: function (node, checked) {
if (checked) {
var parentNode = $("#tt").tree('getParent', node.target);
if (parentNode != null) {
$("#tt").tree('check', parentNode.target);
}
} else {
var childNode = $("#tt").tree('getChildren', node.target);
if (childNode.length > 0) {
for (var i = 0; i < childNode.length; i++) {
$("#tt").tree('uncheck', childNode[i].target);
}
}
}
}
});
});
function getChecked()
{
var arr = [];
var checkeds = $('#tt').tree('getChecked', 'checked');
for (var i = 0; i < checkeds.length; i++) {
arr.push(checkeds[i].id);
}
alert(arr.join(','));
}
</script>
</head>
<body>
<ul id="tt"></ul>
<input type="button" value="获取选中" onclick="getChecked()" />
</body>
</html>
如图：
相关文章
在jQuery框架中对元素对象进行显示和隐藏有三种方式，分别是“默认方式显示和隐藏”、“滑动方式显示和隐藏”、“淡入淡出显示和隐藏”，今天就每种方式通过实例代码给大家详细讲解，需要的朋友参考下吧2021-06-06
JQuery入门—选择器实现隔行变色如何实现呢？JQuery选择器继承了CSS、path语音的部分语法，允许通过标签名、属性名、内容对DOM元素进行快速、准确的选择,接下来详细介绍，需要的朋友可以参考下2013-01-01
下面小编就为大家带来一篇浅谈jquery的html方法里包含特殊字符的处理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
本文主要对jquery 中的ajax方法进行概述讲解。具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
本文主要给大家汇总介绍了了jQuery获取页面及个元素高度、宽度的方法，非常的实用，有需要的小伙伴可以参考下。下面的例子是基于jquery的参数与方法来快速获取文档或浏览器可视区域的高度与宽度的代码,希望本例子能给你带来一些帮助。2016-01-01
这篇文章给大家介绍了jquery实现拖动效果的简单代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-06-06
这篇文章主要介绍了jQuery Validate 校验多个相同name的方法,需要的朋友可以参考下2017-05-05
jQuery Mobile开发中日期插件Mobiscroll使用说明
这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了jQuery实现模拟marquee标签效果的相关资料,需要的朋友可以参考下2015-07-07![jQuery中[attribute]选择器用法实例](//img.jbzj.com/images/xgimg/bcimg9.png)
这篇文章主要介绍了jQuery中[attribute]选择器用法,以实例形式分析了[attribute]选择器的功能、定义及匹配给定元素属性的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
![jQuery中[attribute]选择器用法实例](http://img.jbzj.com/images/xgimg/bcimg9.png)
最新评论