一概述

1.easyui是什麼？

easyui是一個基於jQuery的使用者介面插件集合，即easyui主要使用的技術是jQuery，提供的是顯示在使用者介面的插件。

2.easyui是對HTML插件的擴展，因此使用easyui建立插件要結合對應的HTML插件，例如easyui提供的validatebox\textbox\filebox \ datebox\datatimebox等必須在標籤上實作。

3.data-options

用於實例化插件，即為easyui基礎插件增加新的特性，新增特性可以集中寫在data-options屬性中，屬性值用單引號括起來，兩個屬性間用逗號隔開。新增特性也可以單獨列舉。

4.每個外掛程式都可以看做一個容器，加入其他插件，新增方式：

透過對應的屬性引用其他插件的id，例如新增工具列toolbar="#toolbar"，新增按鈕buttons="#buttons"。

5.呼叫外掛函數的語法格式：

$(selector).插件名("方法名"[参数值]);

登入後複製

6.href reload url

#href:靜態加載，載入指定頁面資訊。
reload:動態加載，由事件驅動，例如點擊按鈕，加載指定頁面資訊。
url:指向伺服器資源，從伺服器取得資料。

二datagrid資料網格

# 1.作用

##資料網格主要用於以表格形式顯示透過Ajax從資料庫取得的資料。

2.伺服器傳回的json字串格式：

"rows":[{},{}]",total":int数据

登入後複製

3.datagrid建立在HTML的< table>標籤之上。

4.datagrid在頁面載入完成後，自動透過Ajax從伺服器取得數據，需要在實例化外掛程式時給定url。

5.datagrid屬性

#新增工具列：toolbar="#toolbar"。
顯示行號：rownumbers="true"。
只允許單行選擇：singleSelect="true"。
使列適應表的寬度：fitColumns="true":。
顯示分頁欄：pagination="true"。

6.列標題

<thead>  <tr><th field="在此列显示的数据库字段"width="">列标题</th><th field="在此列显示的数据库字段"width="">列标题</th>  </tr></thead>

登入後複製

7.取得選擇行

var row=$(selector).datagrid("getSelected")

登入後複製

row代表選擇行，包含id在內的全部數據，資料格式：

{name01:"value01",name02:"value02"}

登入後複製

8.表格中的資料修改以後需要重新載入：##

$(selector).datagrid("reload");

登入後複製

三form

1.form("clear")：清空表單。

2.載入資料

$(selector).form("load",{name:"myName"});//加载自定义数据
$(selector).form("load",row);//加载datagrid选中行数据

登入後複製

3.表單提交

$(selector).form('submit',{
                           url:xxx,
                           onSubmit:function(){
                                    return $(this).form("validate")；//验证，只要在前台验证通过后才提交
                                               },
                           success:function(){}//处理返回结果
})

登入後複製

如果不需要處理Ajax回傳數據，提交可以簡寫為：