Jquery easyui tree 模板

Jquery easyui 是不错的开源框架，主页地址是：http://jquery-easyui.wikidot.com/

在日常工作中，常常会有弹出的树形选择窗口。

导入代码：

 

	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../json2.js"></script>

Script代码：

 

	var treeTitle = '标题';
	var treeUrl = 'json/tree_data.json';
		$(function(){
			$('#treewindow').window({
				title: treeTitle,
				width: 400,
				height: 400,
				modal: true,
				shadow: false,
				closed: true,
				resizable: false,
				maximizable: false,
				minimizable: false,
				collapsible: false
			});
		});

		function treeWindowOpen(){
			$('#basetree').tree({
				checkbox: true,
				animate: true,
				url: treeUrl,
				cascadeCheck: true,
				onlyLeafCheck: false
			});
			$('#treewindow').window('open');
		}
		
		function treeWindowClose(){
			$('#treewindow').window('close');
		}
		
		function treeWindowSubmit(){
			var nodes = $('#basetree').tree('getChecked');
			var info = '';
			if (nodes.length > 0) {
				for ( var i = 0; i < nodes.length; i++) {
					if (info != '') {
						info += ',';
					}
					info += nodes[i].id;
				}
				// alert(JSON.stringify(nodes));
			} else {
				var node = $('#basetree').tree('getSelected');
				if (node != null) {
					info = node.id;
					// alert(JSON.stringify(node));
				}
			}
			
			$.messager.alert('提示',info,'info');
			$('#treewindow').window('close');
		}

HTML:

 

	<div id="treewindow" class="easyui-window" iconCls="icon-search" style="width:400px;height:430px;padding:5px;background: #fafafa;">
		<div class="easyui-layout" fit="true">
			<div region="center" border="false" style="padding:10px;background:#fff;border:1px solid #ccc;">
				<ul id="basetree"></ul>
			</div>
			<div region="south" border="false" style="text-align:center;height:30px;line-height:30px;">
				<a class="easyui-linkbutton" iconCls="icon-ok" href="javascript:void(0);" onclick="treeWindowSubmit();">确定</a>
				<a class="easyui-linkbutton" iconCls="icon-cancel" href="javascript:void(0);" onclick="treeWindowClose();">取消</a>
			</div>
		</div>
	</div>
	<div>
		<a class="easyui-linkbutton" iconCls="icon-search" plain="true" href="javascript:void(0);" onclick="treeWindowOpen();"></a>
	</div>

当然需要的JSON数据：

[{
	"id":1,
	"text":"Folder1",
	"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
		},{
			"id": 8,
			"text":"Async Folder",
			"state":"closed"
		}]
	}]
},{
	"text":"Languages",
	"state":"closed",
	"children":[]
}]

效果如下：

点击

弹出

通过参考官方的文档，可以设置是否多选、级联多选、仅仅子节点选择、异步加载树等自定义功能。