JQGrid(SubGrid)

工作方面需要在Grid中再放一個Grid，因此實作了一下jquery的Grid及SubGrid

資料的部份，用ajax去抓取資料，再用json的格式塞到table中，其他的部份就交給jQuery去處理，按下「+」之後再用no去抓取子table的資料

注意colModel部份設定對應的欄位，在塞值時需要對應。

效果如下：


詳細功能請參考
JQGrid Demo

JavaScript Code
==========================================================
$(document).ready(function () {

$("#gridTable").jqGrid({
url: GetData(),
datatype: "local",
height: 400,
colNames: ['編號', '姓名', '生日'],
colModel: [
{ name: 'no', index: 'no', width: 250 },
{ name: 'nm', index: 'nm', width: 150 },
{ name: 'birthday', index: 'birthday', width: 100, sorttype: "date" }
],
sortname: 'no',
sortorder: 'asc',
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: "#gridPager",
caption: "測試JQueryGrid",
subGrid: true,
subGridRowExpanded: function (subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("

");
jQuery("#"+subgrid_table_id).jqGrid({
url: GetSubData(row_id, subgrid_table_id),
datatype: "local",
colNames: ['公司名稱', '公司類型', '地址類型'],
colModel: [
{name:"nm",index:"nm",width:80},
{name:"tp",index:"tp",width:130},
{name:"addr",index:"addr",width:70,align:"right"}
],
rowNum:10,
pager: pager_id,
sortname: 'nm',
sortorder: "asc",
viewrecords: true,
height: '100%'
});
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false})
},
subGridRowColapsed: function(subgrid_id, row_id) {}
}).navGrid('#gridPager', { edit: false, add: false, del: false });

});

function GetData() {
$.ajax({
url: "/Grid/GetCustM",
type: "POST",
data: '',
dataType: "json",
success: function (result) {
if (result != null && result != '') {
var custList = result.split(';');
for (var i = 0; i < custList.length; i++){
var cust = custList[i].split(',');
$("#gridTable").jqGrid('addRowData', i + 1, { no: cust[0], nm: cust[1], name: cust[2] });
}

}
},
error: function (error) { alert(error); return false; }
})
}

function GetSubData(rowid,tableid) {
var no = $("#gridTable").jqGrid('getRowData', rowid).no;
$("#gridTable").jqGrid('setSelection', rowid);
$.ajax({
url: "/Grid/GetCustComp",
type: "POST",
data: {custno : no},
dataType: "json",
success: function (result) {
if (result != null && result != '') {
var custList = result.split(';');
for (var i = 0; i < custList.length; i++) {
var cust = custList[i].split(',');
$("#" + tableid).jqGrid('addRowData', i + 1, { nm: cust[0], tp: cust[1], addr: cust[2] });
}

}
},
error: function (error) { alert(error); return false; }
})
}


==========================================================

Server端只單純用兩個Action回傳資料字串
Server Code
==========================================================
public JsonResult GetCustM()
{
var entitys = new LionCRMEntities();
var custm = entitys.CustM.ToList();

var returnJson = string.Empty;
foreach(var cust in custm)
{
returnJson += string.IsNullOrEmpty(returnJson) ? string.Empty : ";";
returnJson += cust.CustNO.ToString() + "," + cust.CustNM + "," + (cust.CustBirth.HasValue ? cust.CustBirth.Value.ToString("yyyy-mm-dd") : string.Empty);
}

return Json(returnJson);
}

public JsonResult GetCustComp(string custno)
{
var guidno = Guid.Parse(custno);
var entitys = new LionCRMEntities();
var cumpList = entitys.CustComp.Where(o => o.CustNO == guidno).ToList();

var returnJson = string.Empty;
foreach (var cump in cumpList)
{
returnJson += string.IsNullOrEmpty(returnJson) ? string.Empty : ";";
returnJson += cump.CompanyNM + "," + cump.CompTP + "," + cump.ADDRTP;
}

return Json(returnJson);
}

==========================================================