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":[]
}]

效果以下：

點擊

彈出

經過參考官方的文檔，能夠設置是否多選、級聯多選、僅僅子節點選擇、異步加載樹等自定義功能。