關於easyui，之前只是聽說過了解一點點，到這邊上班之后發現他們用的極多，然后作為新人被安排的一些簡單的任務里也有用到它的。沒辦法，硬着頭皮上吧，一邊對着官網上的demo，一邊對着手冊，一邊摸索着做唄。首先看效果圖
相關代碼如下（只摘的部分供參考，不能運行的）：
$('#tt').datagrid({
nowrap: false,
striped: true,
remoteSort: false,
singleSelect: true,
fitColumns: true,
pageSize: 25,
pageList: [25, 35, 45, 55],
title: "商家信息",
toolbar: '#toors',
loadMsg: '加載中...',
// onDblClickRow: function (rowIndex, rowData) {
// getsub(rowIndex, rowData, callback);
// var ExpandRow = $("#ExpandRow").val();
// if (ExpandRow != '') {
// $('#tt').datagrid("expandRow", ExpandRow);
// }
// $("#ExpandRow").val(rowIndex); ;
// },
url: '../ashx/SellerManager.ashx?type=GetSellerList&se_property=0',
columns: [[
{ field: 'SE_NAME', title: '商家名稱', width: $(this).width() * 0.13, formatter: function (value, row, index) {
return "<a href='http://seller.jukelai.cn/AStation/?suname=" + row.USERNAME + "&supwd=" + row.UPASSWORD + "' target='_blank'>" + row.SE_NAME + "</a>";
}
},
{ field: 'USERNAME', title: '用戶名', width: $(this).width() * 0.1 },
{ field: 'SE_TYPE', title: '商家類型', width: $(this).width() * 0.1 },
{ field: 'PROVINCES', title: '所在地', width: $(this).width() * 0.1, formatter: function (value, row, index) {
return row.PROVINCES + '-' + row.CITY + "-" + row.COUNTY;
}
},
{ field: 'SE_CONTACT', title: '聯系人', width: $(this).width() * 0.1 },
{ field: 'SE_PHONE', title: '聯系電話', width: $(this).width() * 0.1 },
{ field: 'SE_EQUIPMENTCOUNT', title: '設備數量', width: $(this).width() * 0.1 },
{ field: 'SE_URL', title: '網址', width: $(this).width() * 0.1 },
{ field: 'SE_BUSINESSAREA', title: '營業面積', width: $(this).width() * 0.1 },
{ field: 'SE_PROPERTY', title: '性質', width: $(this).width() * 0.1, formatter: function (value, row, index) {
if (row.SE_PROPERTY == 0) {
return '總店';
}
else {
return '分店';
}
}
}
]],
onClickRow: function (rowIndex, rowData) {
if (childbody != null) {
childbody.datagrid('unselectAll');
}
},
pagination: true,
onLoadSuccess: function (data) {
if (data.total == 0) {
console.info('進入無數據');
var body = $(this).data().datagrid.dc.body2;
console.info("body:%f", body);
body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 25px; text-align: center; color:Red">抱歉，沒有查詢到數據</td></tr>');
}
}
});
var ExpandRow = null;
$('#tt').datagrid({
view: detailview,
detailFormatter: function (index, row) {
return '<div style="padding:3px" id="ddv-"' + index + '><table class="ddv"></table></div>';
},
onExpandRow: function (index, row) {
getsub(index, row, callback);
collapserow(index);
//$('#tt').datagrid('reload');
}
});
function collapserow(index) {
ExpandRow = $("#ExpandRow").val();
if (ExpandRow != '' && ExpandRow != index) {
$('#tt').datagrid("collapseRow", ExpandRow);
}
if (ExpandRow == index) {
$('#tt').datagrid("expandRow", index);
}
$("#ExpandRow").val(index);
}
function callback(gridbody) { //拿到子級對象
if (gridbody != null) {
childbody = gridbody;
}
}
function getsub(index, row, callback) {
ddv = $('#tt').datagrid('getRowDetail', index).find('table.ddv');
var tt = $('#tt');
var cc = row.SE_ID;
ddv.datagrid({
url: '../ashx/SellerManager.ashx?type=GetSellerList&se_property=1&se_parentid=' + cc,
nowrap: false,
striped: true,
remoteSort: false,
singleSelect: true,
fitColumns: true,
singleSelect: true,
rownumbers: true,
loadMsg: '加載中...',
height: 'auto',
onClickRow: function (rowIndex, rowData) {
$('#tt').datagrid('unselectAll');
ddv.datagrid('unselectAll');
$(this).datagrid('selectRow', rowIndex);
},
columns: [[
{ field: 'SE_NAME', title: '商家名稱', formatter: function (value, row, index) {
return "<a href='http://seller.jukelai.cn/AStation/?suname=" + row.USERNAME + "&supwd=" + row.UPASSWORD + "' target='_blank'>" + row.SE_NAME + "</a>";
}
},
{ field: 'USERNAME', title: '用戶名' },
{ field: 'SE_TYPE', title: '商家類型' },
{ field: 'PROVINCES', title: '所在地', formatter: function (value, row, index) {
return row.PROVINCES + '-' + row.CITY + "-" + row.COUNTY;
}
},
{ field: 'SE_CONTACT', title: '聯系人' },
{ field: 'SE_PHONE', title: '聯系電話' },
{ field: 'SE_EQUIPMENTCOUNT', title: '設備數量' },
{ field: 'SE_URL', title: '網址' },
{ field: 'SE_BUSINESSAREA', title: '營業面積' },
{ field: 'SE_PROPERTY', title: '性質', formatter: function (value, row, index) {
if (row.SE_PROPERTY == 0) {
return '總店';
}
else {
return '分店';
}
}
}
]],
onResize: function () {
$('#tt').datagrid('fixDetailRowHeight', index);
},
onLoadSuccess: function (data) {
setTimeout(function () {
$('#tt').datagrid('fixDetailRowHeight', index);
}, 0);
if (data.total == 0) {
//console.info('進入無數據');
var body = $(this).data().datagrid.dc.body2;
//console.info("body:%f", body);
body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 25px; text-align: center; color:Red">抱歉，沒有查詢到數據</td></tr>');
}
}
});
callback(ddv);
}
需注意的地方:
1,子層是異步加載的，在子層加載的時候，第一次點擊展開一個表的時候會把下面的內容擠下去，第二次點開的時候就好了。如圖：
解決辦法：在異步加載的onLoadSuccess里加 上下面幾行代碼就可以了，如果不寫settimeout,直接寫函數里面的那一行代碼卻不行，到最后也沒搞明白為什么要這樣寫，如果有誰懂的，請賜教。
setTimeout(function () {
$('#tt').datagrid('fixDetailRowHeight', index);
}, 0);
2，需求是不管是父層還是子層，每次只能選中一條信息，但是實際操作中發現父層和子層可以同時選中，這樣的話對數據的操作（編輯、刪除）就容易混淆，因為同時選中很多條，你就不知道當你點了刪除按鈕它會刪除哪一條。
解決辦法：在兩層表格中都加上一個點擊行事件（onClickRow），在點擊父層的時候讓子層的狀態改為‘unselectAll’，即取消選擇所有行。如圖：
3，在2的基礎上發現另外一個問題，在父層點擊行的時候會報錯，提示對象為null，但是alert時卻是object，研究了很長時間都找不到答案，最后請教了我的老師，他的一句話讓我茅塞頓開。他說：要在回調函數里去拿第二層，也就是要異步的回來之后再調用一個函數去拿，否則代碼立即執行，異步的還沒有回來當然是空了，alert是停頓的，所以不是null 。
解決辦法：定義一個全局變量，然后寫一個回調函數，在異步加載的時候把對象傳到回調函數里，再賦值給那個全局變量
這里getsub這個函數是異步加載第二層的那一塊，我把它抽出來做成一個函數了，callback就是那個回調函數，gridbody是getsub里拿到的第二層的對象，childbody是全局變量，這樣在父層里直接用childbody就可以控制子層了。
4，想把它做成展開一行的時候其余的都折疊的效果，百度了一下，發現有大神給出如下代碼：
$("#ExpandRow")是一個隱藏域，用來記錄你上一次展開的那一行的ID，但是這樣寫有一個漏洞，就是當你展開一次之后關閉，然后再點就展不開了。因為這段代碼里是把當前行的狀態改為‘collapseRow’，也就是折疊，當你再點的時候它的狀態還是折疊，所以就展不開了。
解決辦法：研究了一下，發現將這段代碼稍稍改造一下就可以了。如下代碼，又加了一個判斷，如果點擊的仍是當前行，就把該行的狀態改為展開，OK了。
這是本人第一次用博客記錄自己在工作中的學習心得，方便自己也方便大家，如果有疑問可留言討論。