JQuery EasyUI combotree

最新推荐文章于 2024-09-23 08:37:48 发布

renxin111

最新推荐文章于 2024-09-23 08:37:48 发布

阅读量142

点赞数

分类专栏： JQuery 文章标签： javascript java c# ViewUI

本文链接：https://blog.csdn.net/renxin111/article/details/84224794

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

[img]http://dl.iteye.com/upload/picture/pic/113111/7207b683-a549-39b8-a1bf-69676d19ac1d.png[/img]
1.引入css和js


<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>

2.加入标签


<input id="ddtree" name="ddtree" />

注:id,用于js操作;name,用于获取值
3.加入js代码


$('#ddtree').combotree( {
	//获取数据URL
	url : 'Data',
	//选择树节点触发事件
	onSelect : function(node) {
		//返回树对象
		var tree = $(this).tree;
		//选中的节点是否为叶子节点,如果不是叶子节点,清除选中
		var isLeaf = tree('isLeaf', node.target);
		if (!isLeaf) {
			//清除选中
			$('#ddtree').combotree('clear');
		}
	}
});

4.JSON格式


[ {
	"id" : 1,
	"text" : "Folder1",
	"iconCls" : "icon-ok",
	"children" : [ {
		"id" : 2,
		"text" : "File1",
		"checked" : true
	}, {
		"id" : 3,
		"text" : "Folder2",
		"state" : "open",
		"children" : [ {
			"id" : 4,
			"text" : "File3",
			"attributes" : {
				"p1" : "value1",
				"p2" : "value2"
			},
			"checked" : true,
			"iconCls" : "icon-reload"
		}, {
			"id" : 8,
			"text" : "Async Folder",
			"state" : "closed"
		} ]
	} ]
}, {
	"text" : "Languages",
	"state" : "closed",
	"children" : [ {
		"id" : "j1",
		"text" : "Java"
	}, {
		"id" : "j2",
		"text" : "C#"
	} ]
} ]