Easyui入门基本操作

1.在项目中添加easyui支持

1.1表格与代码

所需支持	名称
导入jquery	jquery-easyui-1.5.1 jquery.min.js
导入easyui	jquery-easyui-1.5.1 jquery.easyui.min.js
导入easyui所需要的css	jquery-easyui-1.5.1 themes(主题风)

这里的href是文件路径，具体已自己的存放路径为准

<!-- 全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<!-- 组件库js源码 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>  

<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>  

2.创建Tree（两种方法）

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

2.1直接创建

在界面中直接调用

<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>  

2.2通过js创建

树控件也可以定义在一个空ul元素中并使用Javascript加载数据。
树控件数据格式化

• id：节点ID，对加载远程数据很重要。
• text：显示节点文本。
• state：节点状态，‘open’ 或 ‘closed’，默认：‘open’。如果为’closed’的时候，将不自动展开该节点。
• checked：表示该节点是否被选中。
• attributes: 被添加到节点的自定义属性。
• children: 一个节点数组声明了若干节点。

示例

[{
	"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",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

//直接通过这一行就可以调用
<ul id="tt"></ul>  

js文件

$(function(){
	$('#tt').tree({    
	    url:'tree_data1.json'   
	});  
})

2.3属性

属性名	属性值类型	描述	默认值
url	string	检索远程数据的URL地址。	null
method	string	检索数据的HTTP方法。（POST / GET）	post
animate	boolean	定义节点在展开或折叠的时候是否显示动画效果。	false
checkbox	boolean	定义是否在每一个借点之前都显示复选框。	false
cascadeCheck	boolean	定义是否层叠选中状态。	true
onlyLeafCheck	boolean	定义是否只在末级节点之前显示复选框。	false
lines	boolean	定义是否显示树控件上的虚线。	false
dnd	boolean	定义是否启用拖拽功能。	false
data	array	节点数据加载。	null
queryParams	object	在请求远程数据的时候增加查询参数并发送到服务器。（该属性自1.4版开始可用）	{}
formatter	function(node)	定义如何渲染节点的文本.	false
filter	function(q,node)	定定义如何过滤本地展示的数据，返回true将允许节点进行展示。（该属性自1.4.2版开始可用）.	json loader
loader	function(param,success,error)	定义如何从远程服务器加载数据。返回false可以忽略本操作。param：发送到远程服务器的参数对象。error()：当检索数据失败的时候调用的回调函数	json loader
loadFilter	function(data,parent)	返回过滤过的数据进行展示。返回数据是标准树格式。该函数具备以下参数：data：加载的原始数据。parent: DOM对象，代表父节点。

界面效果

3.总结

一步一步实践操作。