由於公司做的系統大部分是後臺系統，系統中列表居多；EasyuUI的datagrid這個外掛對列表處理的還是很好的，滿足公司的大部分列表需求了。使用easyui框架也是進入現在的公司之後採用到的。
關於EasyuUI的datagrid可以在已有的表格元素建立資料網格（datagrid），在 html 中定義列、行及資料；也可以通過js來動態建立資料網格。關於如何建立看EasyUI的官網就可以了，比較簡單。
首先是關於接受到的資料格式最好是按照官網的例子寫
{"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}複製程式碼total是總計，rows這個陣列裡面是每一行資料；這樣寫的好處是如果開啟EasyuUI的datagrid的分頁功能可以識別，要不然沒有total總的頁碼數會顯示NaN。
英文會是這個樣子：Displaying 1 to NaN of NaN items
中文會是這個樣子：顯示1到NaN,共NaN記錄
如果不分頁的話，資料格式也可以是一個陣列包含多個物件
[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]複製程式碼在使用datagrid時中間遇到過一次這樣的情況，當時我的datagrid開啟了分頁，我在請求後臺的資料介面時會將當前的查詢條件當做queryParams額外引數給後臺，由於開啟了分頁，因此每次傳給後臺的引數EasyUI會自動的在我的額外引數後面加倆個引數，一個是page：1，另一個是rows：10，page是當前頁碼，rows是一頁展示多少條。
當我第一次查詢時，後臺接受到的引數是正常的，page：1，頁面展示也沒有問題。只有當我將page改為非第一頁時，這是點查詢傳給後臺的引數就變成了page：當前頁碼，這樣後臺就接受了一個錯誤的引數，後臺是根據我傳的引數來識別第幾頁，展示多少條資料的；因此就出現了bug；
這個問題讓我找了半天，最後看官網文件，有一個pageNumber屬性，就是告訴列表初始化的頁面，也就是傳給後臺的page。。。。。後來點查詢之後的程式碼就是這個樣子了
$(`#dg`).datagrid({
url：``, //介面
pageNumber:1, //初始化頁碼
queryParams:queryParams //查詢條件
});複製程式碼關於EasyUI上傳檔案的
<input id="import_excel" name="import_excel" class="easyui-filebox" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" style="width:430px">複製程式碼獲取上傳檔案的值是：
$(`#import_excel`).filebox(`getValue`)複製程式碼form表單裡面含有上傳檔案提交時form表頭應該帶上
<form id="batch_form" method="post" enctype="multipart/form-data">複製程式碼表單中enctype=”multipart/form-data”的意思，是設定表單的MIME編碼。預設情況，這個編碼格式是application/x-www-form-urlencoded，不能用於檔案上傳；只有使用了multipart/form-data，才能完整的傳遞檔案資料，進行下面的操作。
我使用的是EasyUI的form外掛來提交的
$(`#ff`).form(`submit`, {
url: ...,
onSubmit: function(){},
success: function(){}
});複製程式碼當時遇到的是在IE瀏覽器success返回的JSON物件會自動下載儲存，這個問題我是讓後臺給我返回字串，不要返回JSON物件；
關於EasyUI的日期框擴充套件校驗,可以這麼寫
$.extend($.fn.validatebox.defaults.rules, {
datecheck: {
validator: function (value, param) {
var end = $(param[0]).datetimebox(`getValue`); //獲取開始時間
return value > end;
},
message: `結束日期應大於開始日期!` //匹配失敗訊息
}
,equaldDate: {
validator: function (value, param) {
var start = $(param[0]).datetimebox(`getValue`); //獲取開始時間
var a = new Date(start.replace(/-/g,"/")).getTime();
var b = new Date(value.replace(/-/g,"/")).getTime();
var c = (b-a)/ 1000 / 60 / 60 / 24;
return c < 90;
},
message: `時間期間不能超過3個月!` //匹配失敗訊息
}
,equaldate:{
validator: function (value, param) {
var start = $(param[0]).datetimebox(`getValue`); //獲取開始時間
var a = new Date(start.replace(/-/g,"/")).getTime();
var b = new Date(value.replace(/-/g,"/")).getTime();
var c = (b-a)/ 1000 / 60 / 60 / 24;
return c < 7;
},
message: `時間期間不能超過7天!` //匹配失敗訊息
}
});
複製程式碼我是單獨寫了一個JS檔案，引入到html中的，放在easyui.js下面
html程式碼
<input id="startTime" class="easyui-datebox" style="width:100%;">
<input class="easyui-datebox" validType="equaldate[`#startTime`]" style="width:100%;">複製程式碼關於EasyUI的combobox使用
/*省市區下拉聯動*/
function provinceCityCountryFun(x,y,z) {
x.combobox({
url:province_url, //介面
valueField: `ProvinceId`, //每個option的value值
textField: `ProvinceName`, //每一個option展示的文字
editable: true, //可編
filter: function (q, row) //可以模糊匹配
var opts = $(this).combobox(`options`);
return row[opts.textField].indexOf(q) >= 0;//這裡改成>=即可在任意地方匹配
},
onSelect: function(rec) { //當選擇某一項時，讓城市重新載入符合的資料，區縣清空
y.combobox(`clear`).combobox(`reload`,city_url + "?ProvinceId=" + rec.ProvinceId);
z.combobox(`clear`).combobox(`loadData`,{});
},
onLoadSuccess: function(data) {}
});
y.combobox({
valueField: `CityId`,
textField: `CityName`,
editable: false,
onSelect: function(rec) {
z.combobox(`clear`).combobox(`reload`,country_url + "?CityId=" + rec.CityId);
},
onLoadSuccess: function(data) {}
});
z.combobox({
valueField: `CountyId`,
textField: `CountyName`,
editable: false,
onSelect: function(rec) {},
onLoadSuccess: function(data) {}
});
}複製程式碼關於EasyUI的正在處理彈窗；就是當請求ajax時，給使用者提示一個正在處理的資訊
function ajaxLoading(){
$("<div class="datagrid-mask"></div>").css({display:"block",zIndex:9019,width:"100%",height:$(window).height()}).appendTo("body");
$("<div class="datagrid-mask-msg"></div>").html("正在處理，請稍候。。。").appendTo("body").css({display:"block",zIndex:9020,left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});
}
function ajaxLoadEnd(){
$(".datagrid-mask").remove();
$(".datagrid-mask-msg").remove();
}複製程式碼$(`#batch_form`).form(`submit`, {
url: ``,
onSubmit: function(param){
ajaxLoading();
},
success: function(res){
ajaxLoadEnd();
}
});複製程式碼關於EasyUI的data-option屬性
data-option屬性可以將EasyUI外掛的屬性寫在html程式碼中來對元件例項化
使用data-option
<table id="dg" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:`datagrid_data1.json`,method:`get`">
</table>複製程式碼不使用data-option將是下面這個樣子，在js中來寫元件屬性使元件例項化
$(`#dg`).datagrid({
url:``,
method: `post`,
pagination:true,
pageSize: 20,
pageList: [20,50, 100, 200],
fitColumns:true,
fit:true,
nowrap:false,
singleSelect: false,
toolbar: `#tb`
})複製程式碼以上就是小白我目前使用EasyUI遇到的問題以及一些總結。。。。。。如有不對請各位指出，謝謝了；