欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

easyui应用(三)--- tree,window

程序员文章站 2024-02-03 20:57:34
...

easyui基本元素之tree:

easyui应用(三)--- tree,window


<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Tree Node Icons - 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.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Tree Learn</h2>
	<!-- 使用预定义好的节点数据 -->
	<div class="easyui-panel" style="padding:5px">
		<ul class="easyui-tree">
			<li>
				<span>My Documents</span>
				<ul>
					<li data-options="state:'closed'">
						<span>Photos</span>
						<ul>
							<li>
								<span>Friend</span>
							</li>
							<li>
								<span>Wife</span>
							</li>
							<li>
								<span>Company</span>
							</li>
						</ul>
					</li>
					<li>
						<span>Program Files</span>
						<ul>
							<li>Intel</li>
							<li>Java</li>
							<li>Microsoft Office</li>
							<li>Games</li>
						</ul>
					</li>
					<li>index.html</li>
					<li>about.html</li>
					<li>welcome.html</li>
				</ul>
			</li>
		</ul>
	</div>
	<hr/>
	<div style="margin:20px 0;">
		<a href="#" class="easyui-linkbutton" onclick="getChecked()">GetChecked</a> 
	</div>
	<div style="margin:10px 0">
		<input type="checkbox" checked onchange="$('#tt').tree({cascadeCheck:$(this).is(':checked')})">CascadeCheck 
		<input type="checkbox" onchange="$('#tt').tree({onlyLeafCheck:$(this).is(':checked')})">OnlyLeafCheck
	</div>
	<div style="margin:20px 0;"></div>
	<!-- 通过访问服务器获取树的节点数据 -->
	<div class="easyui-panel" style="padding:5px">
		<ul id="tt" class="easyui-tree" data-options="url:'tree_data2.json',method:'get',animate:true,checkbox:true"></ul>
	</div>
	<hr/>
	<input type="checkbox" name="chb" id="cb" checked onchange="change(this)" />
	<script type="text/javascript">
		function change(o){
			console.log(o);	//打印出对象本身
			console.log($(o));//jQuery封装后的对象
			console.log($(o).is(":checked"));//打印checkbox是否被选中
		}
		function getChecked(){
			var nodes = $('#tt').tree('getChecked');
			var s = '';
			for(var i=0; i<nodes.length; i++){
				if (s != '') s += ',';
				s += nodes[i].text;
			}
			alert(s);
		}
	</script>

</body>
</html>

上面第二个tree控件使用的json数据为:

[{
	"id":1,
	"text":"My Documents",
	"children":[{
		"id":11,
		"text":"Photos",
		"state":"closed",
		"children":[{
			"id":111,
			"text":"Friend"
		},{
			"id":112,
			"text":"Wife"
		},{
			"id":113,
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"Program Files",
		"iconCls":"icon-remove",
		"state":"closed",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"Java"
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"iconCls":"icon-add",
			"text":"Games"
		}]
	},{
		"id":16,
		"text":"Actions",
		"children":[{
			"text":"Add",
			"iconCls":"icon-add"
		},{
			"text":"Remove",
			"iconCls":"icon-remove"
		},{
			"text":"Save",
			"iconCls":"icon-save"
		},{
			"text":"Search",
			"iconCls":"icon-search"
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

easyui的tree控件使用之异步加载:

@RequestMapping("/treeData")
	@ResponseBody
	public JsonElement getTreeData(HttpSession session,ServletRequest request,@RequestParam(required=false) Object id) throws Exception {
		System.out.println(id);
		int uid = 0;
		if (id!=null) uid = Integer.parseInt(id.toString());
		uid = uid+10;
		JsonArray jsonArray = new JsonArray();
		JsonObject jsonObject1 = new JsonObject();
		jsonObject1.addProperty("id", uid);
		jsonObject1.addProperty("text", "this is text"+uid);
		jsonObject1.addProperty("state", "closed");
		JsonObject jsonObject2 = new JsonObject();
		uid = uid+5;
		jsonObject2.addProperty("id", uid);
		jsonObject2.addProperty("text", "this is text"+uid);
		jsonObject2.addProperty("state", "closed");
		jsonArray.add(jsonObject1);
		jsonArray.add(jsonObject2);
		return jsonArray;
	}


easyui基本元素之window:

easyui应用(三)--- tree,window

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Window Layout - 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.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Window Layout</h2>
	<p>Using layout on window.</p>
	<div style="margin:20px 0;">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('refresh', 'index.html')">Load From Remote</a>
		Modal:<input type="checkbox" onchange="$('#w').window({modal:$(this).is(':checked')})" name="Modal">
	</div>
	<div id="w" class="easyui-window" title="Window Layout" data-options="iconCls:'icon-save',tools:'#tt'" style="width:500px;height:200px;padding:5px;left: 20px;top: 145px">
		<div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'east',split:true" style="width:100px"></div>
			<div data-options="region:'center'" style="padding:10px;">
				jQuery EasyUI framework help you build your web page easily.
			</div>
			<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
				<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="javascript:alert('ok')" style="width:80px">Ok</a>
				<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="javascript:alert('cancel')" style="width:80px">Cancel</a>
			</div>
		</div>
	</div>
	<div id="tt">
		<a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>
		<a href="javascript:void(0)" class="icon-edit" onclick="javascript:alert('edit')"></a>
		<a href="javascript:void(0)" class="icon-cut" onclick="javascript:alert('cut')"></a>
		<a href="javascript:void(0)" class="icon-help" onclick="javascript:alert('help')"></a>
	</div>
</body>
</html>

上述代码中window控件引用的index.html是自定义的任意html.