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="width: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',width:5">編號</th>
        <th data-options="field:'userName',width:15">用戶名</th>
        <th data-options="field:'roleName',width:30,align:'left',formatter: function(value,row,index){return row.role.roleName}">用戶角色
        </th>
        <th data-options="field:'userDescription',width: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="width: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類型的對象集合