前言

1、为什么学习easyui

快速开发

2、easyui是什么

html4+jQuery的快速开发的前端框架

3、在哪使用

后端开发管理界面（主要应用于后端）

4、常用控件

layout、tree、tabs、datagrid、form、messager、combobox

5、easyui与bootstrap、layui的区别

easyui：不需要付费、完整性、前端框架的稳定性、组件丰富

bootstrap：需要付费、但界面效果非常美观、api文档不全

layui：界面效果还行、不需要付费、但完整性、前端框架的稳定性、组件丰富性不强、存在一些bug

提示：以下是本篇文章正文内容，下面案例可供参考

一、easyui布局

先创建一个static文件，然后里面css、images、js文件。

把jquery-easyui-1.5.1文件复制到js文件中。

二、easyui使用步骤

1.新建一个页面引入下面四行代码至新建的页面

代码如下（示例）：

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

把每行对应的文件改成相对于的全路径名

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/gray/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

2.开始布局（下面是布局代码）layout

代码如下（示例）：

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

3.树控件使用<ul>元素定义。

标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。以下显示的元素将被用作树节点嵌套在<ul>元素中。

<body class="easyui-layout">   
    <div data-options="region:'north',title:'李姣管理系统',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'版权/天韵',split:true" style="height:100px;"></div>   
    <div data-options="region:'west',title:'操作列表',split:true" style="width:100px;">
    <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>
    </div>   
    <div data-options="region:'center',title:'内容'" style="padding:5px;background:#eee;"></div>   
</body>