【jqGrid for ASP.NET MVC Documentation】.学习笔记.6.分层
1 两级分层
每个父 grid 的行，都能有子 grid 。这被叫做 层次，它用来显示相关的 表，主信息 –> 明细信息等。
1
using
System;
2
using
System.Collections.Generic;
3
using
System.Linq;
4
using
System.Web;
5
using
Trirand.Web.Mvc;
6
using
System.Web.UI.WebControls;
7
8
namespace
JQGridMVCExamples.Models
9
{
10
public
class
TwoLevelHierarchyJqGridModel
11
{
12
public
JQGrid CustomersGrid {
get
;
set
; }
13
public
JQGrid OrdersGrid {
get
;
set
; }
14
15
public
TwoLevelHierarchyJqGridModel()
16
{
17
CustomersGrid
=
new
JQGrid
18
{
19
Columns
=
new
List
<
JQGridColumn
>
()
20
{
21
new
JQGridColumn { DataField
=
"
CustomerID
"
,
22
HeaderText
=
"
ID
"
,
23
PrimaryKey
=
true
,
24
Width
=
50
},
25
new
JQGridColumn { DataField
=
"
CompanyName
"
},
26
new
JQGridColumn { DataField
=
"
ContactName
"
},
27
new
JQGridColumn { DataField
=
"
Phone
"
},
28
new
JQGridColumn { DataField
=
"
City
"
}
29
},
30
Width
=
Unit.Pixel(
650
),
31
Height
=
Unit.Pixel(
350
)
32
};
33
34
OrdersGrid
=
new
JQGrid
35
{
36
Columns
=
new
List
<
JQGridColumn
>
()
37
{
38
new
JQGridColumn { DataField
=
"
OrderID
"
,
39
//
always set PrimaryKey for Add,Edit,Delete operations
40
//
if not set, the first column will be assumed as primary key
41
PrimaryKey
=
true
,
42
Editable
=
false
,
43
Width
=
50
},
44
new
JQGridColumn { DataField
=
"
OrderDate
"
,
45
Editable
=
true
,
46
Width
=
100
,
47
DataFormatString
=
"
{0:d}
"
},
48
new
JQGridColumn { DataField
=
"
CustomerID
"
,
49
Editable
=
true
,
50
Width
=
50
},
51
new
JQGridColumn { DataField
=
"
Freight
"
,
52
Editable
=
true
,
53
Width
=
75
},
54
new
JQGridColumn { DataField
=
"
ShipName
"
,
55
Editable
=
true
,
56
Width
=
100
57
}
58
},
59
Width
=
Unit.Pixel(
450
),
60
Height
=
Unit.Percentage(
100
)
61
};
62
63
}
64
}
65
}
一旦你为 父子 grid 都定义了 Models ，下一步就是设置 HierarchSetting.HierarchyMode 。并且绑定它的客户端事件 SubGridRowExpanded。
被ClientSideEvents.SubGridRowExpanded设计的客户端事件，会调用指定的自动生成的功能，扩展grid。它需要在View中定义，它自动生成的名字总是叫 showSubGrid_GridID，GridID是 gird 的 ID。
1
<
script type
=
"
text/javascript
"
>
2
function showSubGrid(subgrid_id, row_id)
3
{
4
showSubGrid_OrdersGrid(subgrid_id, row_id);
5
}
6
</
script
>
它会调用 child grid 的 Data Requested Action ，带上触发row 展开的ID/Primary key，作为参数。你可以用它来获得所有的子行，并绑定子grid。
1
public
JsonResult TwoLevel_OrdersDataRequested(
string
parentRowID)
2
{
3
var northWindModel
=
new
NorthwindDataContext();
4
var model
=
new
TwoLevelHierarchyJqGridModel();
5
SetUpGrids(model);
6
7
var orders
=
from o
in
northWindModel.Orders
8
where
o.CustomerID
==
parentRowID
9
select o;
10
11
return
model.OrdersGrid.DataBind(orders);
12
}
最后，在 View中，我们需要定义这两个 grid。
1
<%
=
Html.Trirand().JQGrid(Model.CustomersGrid,
"
CustomersGrid
"
)
%>
2
<%
=
Html.Trirand().JQGrid(Model.OrdersGrid,
"
OrdersGrid
"
)
%>
3
4
<
script
type
="text/javascript"
>
5
function
showOrdersSubGrid(subgrid_id, row_id) {
6
showSubGrid_OrdersGrid(subgrid_id, row_id);
7
}
8
</
script
>