【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 publicclass 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 key41 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 =10057 } 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>

2 3级和多级分层