easyui combotree自定义级联实现

最新推荐文章于 2019-12-25 18:33:25 发布

iteye_4288

最新推荐文章于 2019-12-25 18:33:25 发布

阅读量339

点赞数

文章标签： javascript json ViewUI

本文链接：https://blog.csdn.net/iteye_4288/article/details/82437684

版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ComboTree - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css"
	href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
	$(function() {
		var json = [ {
			"id" : 1,
			"text" : "Folder1",
			"iconCls" : "icon-ok",
			"children" : [ {
				"id" : 21,
				"text" : "File1",
				"checked" : true
			}, {
				"id" : 22,
				"text" : "File2",
				"checked" : false,
				"children" : [ {
					"id" : 41,
					"text" : "File3",
					"attributes" : {
						"p1" : "value1",
						"p2" : "value2"
					},
					"checked" : false,
					"iconCls" : "icon-reload"
				} ]
			}, {
				"id" : 31,
				"text" : "Folder2",
				"state" : "open",
				"checked" : false,
				"children" : [ {
					"id" : 42,
					"text" : "File4",
					"attributes" : {
						"p1" : "value1",
						"p2" : "value2"
					},
					"checked" : false,
					"iconCls" : "icon-reload"
				} ]
			} ],
			"checked" : false
		} ];

	
		
		//自定义级联选择函数
		var myCascadeCheck = function(node) {
			if (node.checked) {
				node.checked = false;
				tree.tree('uncheck', node.target);
			} else {
				node.checked = true;
				tree.tree('check', node.target);
			}

			var tempNode;//被点节点 临时变量
			tempNode = node;
			//循环遍历父节点
			while (tempNode) {
				var parentNode = tree.tree('getParent', tempNode.target);//父节点
				tempNode = parentNode;
				if (tempNode) {
					tree.tree('check', tempNode.target);
				}

			}
			tempNode = node;
			if (tempNode) {
				var childNodes = tree.tree('getChildren', tempNode.target);//得到该节点下的所有节点数组
				var childNode;
				for ( var i = 0; i <= childNodes.length; i++) {
					childNode = childNodes[i];
					if (childNode) {
						if (tempNode.checked) {
							tree.tree('check', childNode.target);
						} else {
							tree.tree('uncheck', childNode.target);
						}

					}
				}

			}
		}

		$('#tree').combotree({
			data : json,
			//url :'',
			cascadeCheck : false,
			multiple : true,
			onClick : myCascadeCheck,
			onCheck : function(node, checked) {
				checkedNode = node;
			}
		});
		var tree = $('#tree').combotree('tree');//combotree组件中的tree组件
		var checkedNode;//被checked节点

		//选择框绑定点击事件
		//$('[span^="tree-checkbox"]').bind("click", function() {
		$('.tree-checkbox').bind("click", function() {
			if (checkedNode.checked) {
				checkedNode.checked = false;
			} else {
				checkedNode.checked = true;
			}

			myCascadeCheck(checkedNode);
		});

	});
</script>
</head>
<body>
	<select id="tree" style="width: 200px;"></select>
</body>
</html>

iteye_4288

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui combotree自定义级联实现

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;&lt;title&gt;ComboTree - jQuery EasyUI Demo&lt;/title&gt;
复制链接

扫一扫