前端ui架構之一， 相對extjs來說，算是小了，這兩天，抽空看了下easyui的相關知識，基本上可以和大夥分享一下：
學習的話，基本上思路就三個：
一個是demo，把所有提供的controls看一遍，然後用到哪個，就去看哪個。
一個是document，如果某個控件需要用js編碼控制，可能需要看一下相關的api提供的屬性，事件和方法。
一個是搜相關的文章，看看一些網上的示例或教程文章。
由于easyui是基于jq的文法，是以最好備有jq的api手冊。
如下圖，折騰基本的增删改查+分頁（費了我不少時間，遇到幾個坑）：
基本用法，可以看官網的demo，這裡說下我遇到的幾個問題：
一開始由于不知道表格的需要的預設json格式，是以隻能動态綁定資料，大體代碼如下：
$.getjson("json.ashx",function(result){$("#dg").datagrid("loaddata",result.data);}
然後又要另外把記錄總數賦給分頁控件：
$.getjson("json.ashx",function(result){$("#dg").datagrid("loaddata",result.data);$("#db").datagrid("gerpager").pagination({"total":result.count});}
折騰了n久後，發現了json的格式，隻要輸出的json格式按它的要求，隻要指定url就可以了，分頁控件也會自動綁定，輸出的格式為：
{"total":"42","errormsg":"","success":"true","rows":[{"id":"1","username":"22222","createtime":"2012/9/27 17:13:52"},{"id":"2","username":"2","createtime":"2012/9/27 17:12:05"},{"id":"3","username":"1","createtime":"2013/4/18 18:18:22"},{"id":"7","username":"ttttttttttt","createtime":"2012/9/27 17:15:33"},{"id":"8","username":"ttttttt","createtime":""},{"id":"9","username":"999","createtime":""},{"id":"10","username":"2222","createtime":""},{"id":"11","username":"333","createtime":""},{"id":"12","username":"44","createtime":""},{"id":"13","username":"55","createtime":""}]}
其中total和rows數組是标配字段名，剛好cyq.data背景表格的輸出代碼是count和data，名稱不一緻，為了更友善支援easyui，隻好把輸出名改成一緻了。
當通過以下代碼指定請求url時，發現請求發送了2次：
$(function () {
$("#dg").datagrid({
"url": "json.ashx",
"pagination":true
});
});
後來尋得，把html中的class去掉即可。
<table id="dg" title="my users" class="easyui-datagrid"
變更為：
<table id="dg" title="my users"
為了與easyui配合的更友善，我對cyq.data架構的jsonhelper這個類小小調整了幾個小點，使的開發更爽了一些。
前端按easyui的demo，而後端代碼可以寫成通殺式代碼如下：
public string outjson(string tname, int pageindex, int pagesize, string where)
{
string json = string.empty;
using (maction action = new maction(tname))
{
json=action.select(pageindex, pagesize, where).tojson();//輸出的格式直接迎合easyui
}
return json;
}
一個url過來，根據參數指定表名和條件直接傳回，通殺。
public string updateorinsert(string tname,int id) //預設easyui會自動post資料過來，這裡采用自動取值。
bool result = false;
if (id > 0)
{
result=action.insert(true);
}
else
result=action.update(id, true);
return jsonhelper.outresult(result, result ? "" : "操作失敗！");//新增的方法，配合easyui需要的儲存提示。
public string delete(string tname, int id)
result = action.delete(id);
return jsonhelper.outresult(result, result ? "" : "操作失敗！");
基本背景屬于小調整就可以通殺了，基礎的crud開發起來還是相當簡單的。
view code
1：easyui這個前端架構還是不錯的，雖然商業使用是需要付費的，但是對公司來說小錢，而且多數小公司根本沒打算交錢。
2：cyq.data 經過小調整，能夠更簡便的支援easyui開發。
3：如果你是用的開源版本v4.55，若需要支援easyui，jsonhelper類的輸出，把count變為total，把data改成rows即可。
本文原創發表于部落格園，作者為路過秋天，原文連結：http://www.cnblogs.com/cyq1162/p/3297892.html