easyUI关键（常见）组件详解

一、easyUI 相关介绍

1、EasyUI 是前端框架，封装大量 css和封装大量 JS

2、使用前端框架时，给标签定义class 属性，就会有样式和脚本功能了（class属性对应了相关封装过的css和相关的js）

3、data-options 属性是定义 easyui 属性的，如果 easyui 提供的属性和 html 标签属性相同,这个属性可以不写在 data-options 中，easyUI自带（和元HTML重复的不算）的属性只能在
data-options中使用，会涉及到相关的，别的组件。

4、如果效果是静态的建议使用纯 html 标签方式，如果效果是动态建议使用 html 结合 js 方式

5、easyui 中所有脚本功能语法:重点理解

　　如果该效果(组件)是 abc,控制 abc 的语法，jQuery选择器选中的标签，作为easyUI中的abc组件，并且给组件设置相关的属性值或者方法（data-optiions中的）

　　{ }中的数据相当于在标签的 data-options中添加属性进行设置，

$(“jquery 选择器获取到 abc”).abc({
    属性名:值, 
    事件:function([参数]){}
})

6、如果该效果(组件)是 abc,控制 abc 方法的语法（不同的组件有自带的方法，只要方法名一致，就会执行或者触发）

$(“jquery 选择器获取到 abc”).abc(“方法名”);//调用方法，该方法没有参数
$(“jquery 选择器获取到 abc”).abc(“方法名”,”参数”);//调用方法

7、EasyUI 适用于后台管理界面,不适用于前台项目页面

8、优点:处理服务器传递过来的 json数据能力比较强，只要服务器传回固定格式的json数据，几乎不用写代码，效果就会呈现出来

注：能复制绝对不手写，html为弱规范，就算写错一个字母也不会报错

二、easyUI常见data-options中的属性的介绍

　1、（easyui-combobox）下拉框组件属性：一般下拉框的下拉内容都是通过远程获取到的

<select name="roleId" id="cb" class="easyui-combobox" data-options="100,url:'/role/roleList',valueField:'roleId',
textField:'roleName'"></select>

　　　　url：当页面加载到标签时。会访问url地址，并期望获取到一个list类型的集合对象

　　　　valueField：请求到的list集合中，对象的什么属性作为下拉列表的value值（当选中时，传递后台的时value）

　　　　textField：请求到的list集合中，对象的什么属性作为下拉列表的文本值（仅仅显示出来）

　2、（easyui-datagrid，easyui-treegrid）数据表格，树形表格

<table class="easyui-datagrid"
       data-options="title:'用户管理',url:'/user/dataList',fitColumns:true,pagination:true,rownumbers:true,pageNumber:1,pageSize:5,pageList:[5,10,15]">
    <thead>
    <tr>
        <th data-options="checkbox:true"></th>
        <th data-options="field:'userId',5">编号</th>
        <th data-options="field:'userName',15">用户名</th>
        <th data-options="field:'roleName',30,align:'left',formatter: function(value,row,index){return row.role.roleName}">用户角色
        </th>
        <th data-options="field:'userDescription',100,align:'left'">备注</th>
    </tr>
    </thead>
</table>

　　　　url：请求数据的路径，（根据pageNum，pageSize附带看浏览器F12可观察，携带 page ，rows 参数，为请求第几页，请求数量）

　　　　　　期望获取Map类型的数据，并且有 rows 关键字对应 list集合，total关键字对应 integer

　　　　　　rows映射的对象为表格一行数据信息的集合，total为总行数

　　　　field：字段的属性，本列显示的数据对应 rows中对象的属性

　3、（easyui-tree）

<ul id="tt"></ul>

<script>
//jQuery选中id为tt的标签， 为该标签执行tree组件的方法，默认为该标签就是一个树了
//添加树的属性，url数据请求地址。期望得到一个 list集合对象， list集合容纳的为easyui
//组件规定类型的对象
    $('#tt').tree({
        url: "auth/loadTreeNode",
        onClick: function (node) {
            if (node.attributes.authPath) {
                alert("添加选项卡")
                openTabs(node);
            }
        }
    });
</script>

　　　　组件规定的对象拥有以下属性，带对象一般由后台的对象转换而来。

id：节点ID，对加载远程数据很重要**对于后台对象，一般有两个类似id的属性。一个是自身的 id ，用于标识自己。另个一个作为连接自己上级的id，这个id对应的对象，就是自己的上级，通过id来区别父节点子节点的关联关系
text：显示节点文本**一般为后台对象的名字
iconCls：显示的节点图标CSS类ID**显示出来的图标
state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。***重要，为open代表，这个节点是展开的，不能再展开，即该节点没有子节点。closed该节点还可以展开，即还有子节点。对于closed的节点，用鼠标点击时，会把自身的 id作为参数，访问树加载数据时的路径，即查询自己的子节点，参数为 id 值为自己的id
checked：该节点是否被选中。
checked：表示该节点是否被选中。存在复选框（是不是自动生成的没在意），checked为true的会自动勾选复选框
attributes: 被添加到节点的自定义属性。用于存储一些别的数据数据类型为Map，获取值通过node.attributes.key(map中的key)
children: 一个节点数组声明了若干节点。数据类型为List ，list中存放的还是node对象。
组件把list中的第一个节点渲染出来，如果该节点的children属性中，还有list包含节点，继续深入，知道吧第一个节点，即第一个节点的子节点，及子节点的子节点（如果有的话），然后开始list中的第二的node节点。这样就形成了树形结构

　　属性表单同样的原理，不过为每一个节点后面都增加了一行记录，用于显示node节点中的信息

4、form表单

<form id="fm">
               <input type="hidden" name="userId" value="" id="userId">
           <table cellpadding="5">

               <tr>
                   <td>用户名：</td>
                   <td>
                       <input size="15" type="text" id="userName" name="userName">
                   </td>
                   <td>
                        用户密码：
                   </td>
                   <td>
                       <input id="password" size="15" type="password" name="password">
                   </td>
               </tr>
               <tr>
                   <td>角色：</td>
                   <td>
                       <select  name="role.roleId" id="roleList"  data-options="150"></select>
                   </td>
                   <td></td>
                   <td></td>
               </tr>
               <tr>
                   <td  valign="top">备注：</td>
                   <td colspan="3">
                       <textarea name="userDescription" id="" cols="50" rows="10"></textarea>
                   </td>
               </tr>
           </table>
           </form>

<script>
  function openModifyDialog(){
            var rows = $("#dg").datagrid("getSelections");//id 为dg的标签是一个数据表格，获取数据表格中被选中的行的数据（可以有多个选中的），树形表格也可以获取

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//$("#tree").tree("getChecked");选中id为tree的tree组件中复选框被勾选的节点的信息
            if(rows.length != 1){//用于判定数据表壳，只能选中一条
                $.messager.alert("系统提示","请选择一条数据");
                return ;
            }
            $("#dlg").dialog("open").dialog("setTitle","修改用户信息");
            $("#roleList").combobox({
                url:'/role/list',
                valueField:'roleId',
                textField:'roleName'
            })

            //将当前行中的数据，加载到表单中
            $("#fm").form("load",rows[0]);//获取选中的数据中的第一条数据，把该数据加载到 id为fm的 form表单中 根据数据表格中field 与form表单的 name进行匹配
            $("#password").val("");
            $("#userName").attr("readOnly","readOnly");
            $("#roleList").combobox("select",rows[0].role.roleId);
            var id = rows[0].userId;
            $("#userId").val(id);
            url = "/user/update";
        }
</script>

4、如何在前台通过点击节点，实现对上，对下的级联

　　　　勾选了一个节点，往上知道根节点（和自己有关系的）都会被勾选。例：勾选客户按贡献分析--->统计报表，某系统都被勾选，

　　　　取消勾选一个节点，如果同一级别没有被勾选的则取消父节点的勾选状态，对往无影响

　　　　勾选了一个节点，其所有子节点都会被勾选，

　　　　取消勾选一个节点，其所有子节点都会被取消勾选

　5、在后台如何封装符合easyui组件解析的list类型的对象集合