1.EasyUI 的介绍:
EasyUI -- Layout(布局)将布局容器分成了5个区域,分别是:east(东)、west(西)、south(南)、north(北)和center(中)。center(中)区域是必须的,其他边缘区域都是可选的。每个边缘区域都可以通过拖拽的方式改变大小,也可以点击折叠按钮将面板折叠起来。EasyUI 的布局是很灵活的,可以根据用户的需求,使用不同的嵌套,构建复杂的布局。
第二章 创建布局的几种方法
1.为<div/>标签增加名为'easyui-layout'的类ID。
1.为<div/>标签增加名为'easyui-layout'的类ID。
<div id="cc" class="easyui-layout" style="width:600px;height:400px;">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</div>
2. 使用完整页面创建布局
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>
Tree(树)
使用$.fn.tree.defaults重写默认值对象。
树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
使用案例
树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。以下显示的元素将被用作树节点嵌套在<ul>元素中。
<ul id="tt" class="easyui-tree">
<li>
<span>Folder</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li>
<span><a href="#">File 11</a></span>
</li>
<li>
<span>File 12</span>
</li>
<li>
<span>File 13</span>
</li>
</ul>
</li>
<li>
<span>File 2</span>
</li>
<li>
<span>File 3</span>
</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul>
树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据。
<ul id="tt"></ul>
使用loadFilter函数处理来自Web Services的JSON数据。
$('#tt').tree({
url: ...,
loadFilter: function(data){
if (data.d){
return data.d;
} else {
return data;
}
}
});
树控件数据格式化
每个节点都具备以下属性:
-
id:节点ID,对加载远程数据很重要。
-
text:显示节点文本。
-
state:节点状态,'open' 或 'closed',默认:'open'。如果为'closed'的时候,将不自动展开该节点。
-
checked:表示该节点是否被选中。
-
attributes: 被添加到节点的自定义属性。
-
children: 一个节点数组声明了若干节点。
一些案例:
Python中json的代码:
treeDict = [
{
"id": 1,
"text": "Folder1",
"iconCls": "icon-save",
"children": [{
"text": "File1",
"checked": "true"
}]
},{
"id": 1,
"text": "Folder1",
"iconCls": "icon-save",
"children": [{
"text": "File1",
"checked": "true"
}]
}
]
return HttpResponse(json.dumps(treeDict),"application/json")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="easyui/themes/icon.css">
<link type="text/css" rel="stylesheet" href="easyui/themes/default/easyui.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;">
<h1 style="text-align: center">MIMI商品管理系统</h1>
</div>
<div data-options="region:'west',title:'商品分类',split:true" style="width:300px;">
<ul id="categoryTree">
</ul>
</div>
<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
<script type="text/javascript">
$(function () {
//create tree
$('#categoryTree').tree({
url:'/goods/categoryTree'
});
</script>
</body>
</html>