JQuery EasyUI combotree

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#"
	} ]
} ]

注:后台方法(见附带demo,Data.java,easyui.jsp)

API:http://www.jeasyui.com/documentation/index.php

评论

3 楼 851228082 2015-11-17  

数据源的json串，必须是 id,text这两个名字？

2 楼 elfasd 2014-02-21  

好帖子 学习了

1 楼 lostyue 2012-07-05