Ligerui Grid组件--学生信息列表
一、目录
1、多层架构+MVC+EF+AUTOFAC+AUTOMAPPER；
4、Ligerui Grid组件--学生信息列表
二、正文
数据库中存在一张学生表，字段在下图中有所反应，Grid数据来源比较简单，不做数据库的介绍。最终做出的效果：
1.Ligerui-Grid组件介绍
grid一词，翻译过来叫做“表格”，我的理解就是一个多功能列表(⊙ｏ⊙)。其数据展现形式可以为树形结构、可以行内编辑、支持分页、支持单行排序、支持分组功能……。官方的解释中，其grid具有如下特性：
描述:
- 1,支持本地数据和服务器数据(配置data或者url)——这点，我们后面有说明
- 2,支持排序和分页(包括Javascript排序和分页)——当点击grid的表头（比如上图中的学校），grid会在客户端改变数据的排序方式，比如点击上图中的“学校“，”学校“字段相同数据会聚拢在一起。
- 3,支持列的“显示/隐藏”——后面代码也有说明
- 4,支持明细行(表格内嵌)——也就是点击某一行会显示出该行更为详尽的内容
- 5,支持汇总行——统计功能
- 6,支持单元格模板——将某一单元格渲染。具体实例，某一行最后渲染为”添加“、”删除“等链接
- 7,支持编辑表格(ligerGrid的一个特色,需要其他表单插件的支持)——双击单元格可以即时编辑，并能选择保存到数据库还是本地保存。
- 8,支持树表格
- 8,支持分组
- 8,支持多表头
具体效果，大家可以去ligerui官网看demo。
2、上一部分说到Ligerui的grid支持”支持本地数据和服务器数据(配置data或者url)“，本地数据通常情况下需要我们以JSON格式引入到界面，而服务器数据让我们可以通过给grid 的url属性传递一个链接来获取数据。
2.1 本地数据
获取本地数据我用官方的demo来作说明。
grid的效果：
js代码：
1 // <div id="maingrid4" style="margin: 0; padding: 0"></div>
2 var g;
3 $(function ()
4 {
5 //将id为maingrid4的元素渲染为liger的grid
6 g = $("#maingrid4").ligerGrid({
7 // columns:列集合
8 columns: [
9 {display: '主键', name: 'CustomerID', align: 'left', width: 120 } ,
10 { display: '公司名', name: 'CompanyName', minWidth: 60 },
11 { display: '联系名1', name: 'ContactName', width: 100, align: 'left', frozen: true },
12 { display: '联系名2', name: 'ContactName', width: 200, align: 'left' },
13 { display: '联系名3', name: 'ContactName', width: 200, align: 'left' },
14 { display: '联系名4', name: 'ContactName', width: 200, align: 'left', frozen: true },
15 { display: '城市', name: 'City', width: 200 }
16 ], data: CustomersData, pageSize: 20, sortName: 'CustomerID',
17 width: '98%', height: '98%', checkbox: true,rownumbers:true,
18 fixedCellHeight:false
19 });
20 //grid加载数据期间的图标
21 $("#pageloading").hide();
22 });
23
display：表头名；name：表格列名，必须与JSON数据中相应字段名称一致；checkbox:是否显示复选框；data:数据源。
代码中，data: CustomersData是关键。CustomersData是一个存储JSON数据的变量，结构如下：
1 var CustomersData =
2 {Rows:[{"CustomerID":"ALFKI","CompanyName":"Alfreds Futterkiste","ContactName":"Maria Anders","ContactTitle":"Sales Representative","Address":"Obere Str. 57","City":"Berlin","Region":null,"PostalCode":"12209","Country":"Germany","Phone":"030-0074321","Fax":"030-0076545"},{"CustomerID":"ANATR","CompanyName":"Ana Trujillo Emparedados y helados","ContactName":"Ana Trujillo","ContactTitle":"Owner","Address":"Avda. de la Constitución 2222","City":"México D.F.","Region":null,"PostalCode":"05021","Country":"Mexico","Phone":"(5) 555-4729","Fax":"(5) 555-3745"},{"CustomerID":"ANTON","CompanyName":"Antonio Moreno Taquería","ContactName":"Antonio Moreno","ContactTitle":"Owner","Address":"Mataderos 2312","City":"México D.F.","Region":null,"PostalCode":"05023","Country":"Mexico","Phone":"(5) 555-3932","Fax":null},{"CustomerID":"AROUT","CompanyName":"Around the Horn","ContactName":"Thomas Hardy","ContactTitle":"Sales Representative","Address":"120 Hanover Sq.","City":"London","Region":null,"PostalCode":"WA1 1DP","Country":"UK","Phone":"(171) 555-7788","Fax":"(171) 555-6750"},{"CustomerID":"BERGS","CompanyName":"Berglunds snabbköp","ContactName":"Christina Berglund","ContactTitle":"Order Administrator","Address":"Berguvsvägen 8","City":"Luleå","Region":null,"PostalCode":"S-958 22","Country":"Sweden","Phone":"0921-12 34 65","Fax":"0921-12 34 67"},{"CustomerID":"BLAUS","CompanyName":"Blauer See Delikatessen","ContactName":"Hanna Moos","ContactTitle":"Sales Representative","Address":"Forsterstr. 57","City":"Mannheim","Region":null,"PostalCode":"68306","Country":"Germany","Phone":"0621-08460","Fax":"0621-08924"},{"CustomerID":"BLONP","CompanyName":"Blondel père et fils","ContactName":"Frédérique Citeaux","ContactTitle":"Marketing Manager","Address":"24, place Kléber","City":"Strasbourg","Region":null,"PostalCode":"67000","Country":"France","Phone":"88.60.15.31","Fax":"88.60.15.32"},{"CustomerID":"BOLID","CompanyName":"Bólido Comidas preparadas","ContactName":"Martín Sommer","ContactTitle":"Owner","Address":"C/ Araquil, 67","City":"Madrid","Region":null,"PostalCode":"28023","Country":"Spain","Phone":"(91) 555 22 82","Fax":"(91) 555 91 99"},{"CustomerID":"BONAP","CompanyName":"Bon app'","ContactName":"Laurence Lebihan","ContactTitle":"Owner","Address":"12, rue des Bouchers","City":"Marseille","Region":null,"PostalCode":"13008","Country":"France","Phone":"91.24.45.40","Fax":"91.24.45.41"},{"CustomerID":"BOTTM","CompanyName":"Bottom-Dollar Markets","ContactName":"Elizabeth Lincoln","ContactTitle":"Accounting Manager","Address":"23 Tsawassen Blvd.","City":"Tsawwassen","Region":"BC","PostalCode":"T2F 8M4","Country":"Canada","Phone":"(604) 555-4729","Fax":"(604) 555-3745"},{"CustomerID":"BSBEV","CompanyName":"B's Beverages","ContactName":"Victoria Ashworth","ContactTitle":"Sales Representative","Address":"Fauntleroy Circus","City":"London","Region":null,"PostalCode":"EC2 5NT","Country":"UK","Phone":"(171) 555-1212","Fax":null},{"CustomerID":"CACTU","CompanyName":"Cactus Comidas para llevar","ContactName":"Patricio Simpson","ContactTitle":"Sales Agent","Address":"Cerrito 333","City":"Buenos Aires","Region":null,"PostalCode":"1010","Country":"Argentina","Phone":"(1) 135-5555","Fax":"(1) 135-4892"},{"CustomerID":"CENTC","CompanyName":"Centro comercial Moctezuma","ContactName":"Francisco Chang","ContactTitle":"Marketing Manager","Address":"Sierras de Granada 9993","City":"México D.F.","Region":null,"PostalCode":"05022","Country":"Mexico","Phone":"(5) 555-3392","Fax":"(5) 555-7293"},{"CustomerID":"CHOPS","CompanyName":"Chop-suey Chinese","ContactName":"Yang Wang","ContactTitle":"Owner","Address":"Hauptstr. 29","City":"Bern","Region":null,"PostalCode":"3012","Country":"Switzerland","Phone":"0452-076545","Fax":null},{"CustomerID":"COMMI","CompanyName":"Comércio Mineiro","ContactName":"Pedro Afonso","ContactTitle":"Sales Associate","Address":"Av. dos Lusíadas, 23","City":"São Paulo","Region":"SP","PostalCode":"05432-043","Country":"Brazil","Phone":"(11) 555-7647","Fax":null},{"CustomerID":"CONSH","CompanyName":"Consolidated Holdings","ContactName":"Elizabeth Brown","ContactTitle":"Sales Representative","Address":"Berkeley Gardens\r\n12 Brewery ","City":"London","Region":null,"PostalCode":"WX1 6LT","Country":"UK","Phone":"(171) 555-2282","Fax":"(171) 555-9199"},{"CustomerID":"DRACD","CompanyName":"Drachenblut Delikatessen","ContactName":"Sven Ottlieb","ContactTitle":"Order Administrator","Address":"Walserweg 21","City":"Aachen","Region":null,"PostalCode":"52066","Country":"Germany","Phone":"0241-039123","Fax":"0241-059428"},{"CustomerID":"DUMON","CompanyName":"Du monde entier","ContactName":"Janine Labrune","ContactTitle":"Owner","Address":"67, rue des Cinquante Otages","City":"Nantes","Region":null,"PostalCode":"44000","Country":"France","Phone":"40.67.88.88","Fax":"40.67.89.89"},{"CustomerID":"EASTC","CompanyName":"Eastern Connection","ContactName":"Ann Devon","ContactTitle":"Sales Agent","Address":"35 King George","City":"London","Region":null,"PostalCode":"WX3 6FW","Country":"UK","Phone":"(171) 555-0297","Fax":"(171) 555-3373"},{"CustomerID":"ERNSH","CompanyName":"Ernst Handel","ContactName":"Roland Mendel","ContactTitle":"Sales Manager","Address":"Kirchgasse 6","City":"Graz","Region":null,"PostalCode":"8010","Country":"Austria","Phone":"7675-3425","Fax":"7675-3426"},{"CustomerID":"FAMIA","CompanyName":"Familia Arquibaldo","ContactName":"Aria Cruz","ContactTitle":"Marketing Assistant","Address":"Rua Orós, 92","City":"São Paulo","Region":"SP","PostalCode":"05442-030","Country":"Brazil","Phone":"(11) 555-9857","Fax":null},{"CustomerID":"FISSA","CompanyName":"FISSA Fabrica Inter. Salchichas S.A.","ContactName":"Diego Roel","ContactTitle":"Accounting Manager","Address":"C/ Moralzarzal, 86","City":"Madrid","Region":null,"PostalCode":"28034","Country":"Spain","Phone":"(91) 555 94 44","Fax":"(91) 555 55 93"},{"CustomerID":"FOLIG","CompanyName":"Folies gourmandes","ContactName":"Martine Rancé","ContactTitle":"Assistant Sales Agent","Address":"184, chaussée de Tournai","City":"Lille","Region":null,"PostalCode":"59000","Country":"France","Phone":"20.16.10.16","Fax":"20.16.10.17"},{"CustomerID":"FOLKO","CompanyName":"Folk och fä HB","ContactName":"Maria Larsson","ContactTitle":"Owner","Address":"Åkergatan 24","City":"Bräcke","Region":null,"PostalCode":"S-844 67","Country":"Sweden","Phone":"0695-34 67 21","Fax":null},{"CustomerID":"FRANK","CompanyName":"Frankenversand","ContactName":"Peter Franken","ContactTitle":"Marketing Manager","Address":"Berliner Platz 43","City":"München","Region":null,"PostalCode":"80805","Country":"Germany","Phone":"089-0877310","Fax":"089-0877451"},{"CustomerID":"FRANR","CompanyName":"France restauration","ContactName":"Carine Schmitt","ContactTitle":"Marketing Manager","Address":"54, rue Royale","City":"Nantes","Region":null,"PostalCode":"44000","Country":"France","Phone":"40.32.21.21","Fax":"40.32.21.20"},{"CustomerID":"FRANS","CompanyName":"Franchi S.p.A.","ContactName":"Paolo Accorti","ContactTitle":"Sales Representative","Address":"Via Monte Bianco 34","City":"Torino","Region":null,"PostalCode":"10100","Country":"Italy","Phone":"011-4988260","Fax":"011-4988261"},{"CustomerID":"FURIB","CompanyName":"Furia Bacalhau e Frutos do Mar","ContactName":"Lino Rodriguez ","ContactTitle":"Sales Manager","Address":"Jardim das rosas n. 32","City":"Lisboa","Region":null,"PostalCode":"1675","Country":"Portugal","Phone":"(1) 354-2534","Fax":"(1) 354-2535"},{"CustomerID":"GALED","CompanyName":"Galería del gastrónomo","ContactName":"Eduardo Saavedra","ContactTitle":"Marketing Manager","Address":"Rambla de Cataluña, 23","City":"Barcelona","Region":null,"PostalCode":"08022","Country":"Spain","Phone":"(93) 203 4560","Fax":"(93) 203 4561"},{"CustomerID":"GODOS","CompanyName":"Godos Cocina Típica","ContactName":"José Pedro Freyre","ContactTitle":"Sales Manager","Address":"C/ Romero, 33","City":"Sevilla","Region":null,"PostalCode":"41101","Country":"Spain","Phone":"(95) 555 82 82","Fax":null}],Total:91};
上面是官方demo所有数据，但是都是重复的数据，我们截取一行就是这样的：
1 var CustomersData =
2 {Rows:[
3 {"CustomerID":"ALFKI",
4 "CompanyName":"Alfreds Futterkiste",
5 "ContactName":"Maria Anders",
6 "ContactTitle":"Sales Representative",
7 "Address":"Obere Str. 57",
8 "City":"Berlin","Region":null,
9 "PostalCode":"12209",
10 "Country":"Germany",
11 "Phone":"030-0074321","Fax":"030-0076545"}
12 ]
13 }
将数据与Grid名字的JS代码对比看，一目了然。
2.2 服务器数据
与本地数据不同，我们需要改为使用url属性，并指定一个链接，比如我们在StudentController中定义了一个Action叫做StudentData。
1 public ActionResult StudentData()
2 {
3 //StudentModel： 学生界面模型
4 List<StudentModel> list = new List<StudentModel>();
5 //查库
6 var entity = _studentService.GetAllEntities(p => p.ID != 0).OrderByDescending(p => p.ID);
7 //把查询结果添加到list列表
8 foreach (var item in entity)
9 {
10 StudentModel model = new StudentModel();
11 model = item.ToModel();
12 list.Add(model);
13 }
14 //返回JSON数据
15 return Json(new { Rows = list, Total = list.Count() }, JsonRequestBehavior.AllowGet);
16 }
17 }
1 public class StudentModel
2 {
3
4 public int ID { get; set; }
5
6 [Required]
7 [DisplayName("学生姓名")]
8 public string Std_Name { get; set; }
9
10 //名族
11 [Required]
12 [DisplayName("学生民族")]
13 public string Std_Ethnic { get; set; }
14
15 [Required]
16 [DisplayName("专业")]
17 public int Std_ProID { get; set; }
18 [Required]
19 [DisplayName("班级")]
20 public int Std_ClassID { get; set; }
21 [Required]
22 [DisplayName("学校")]
23 public int Std_SchoolID { get; set; }
24 [DisplayName("班级")]
25 public string Std_ClassName { get; set; }
26 [DisplayName("专业")]
27 public string Std_ProfessionName { get; set; }
28 [DisplayName("学校")]
29 public string Std_SchoolName { get; set; }
30 [Required]
31 [DisplayName("身份证号")]
32 public string Std_ID { get; set; }
33
34 //政治面貌
35 [DisplayName("政治面貌")]
36 public string Std_PoliicalStatus { get; set; }
37
38 //户籍
39 [DisplayName("户籍")]
40 public string Std_Census { get; set; }
41 //[Required]
42 //[DisplayName("联系电话")]
43 [DisplayName("联系电话")]
44 public string Std_Telephone { get; set; }
45
46 [DisplayName("备用电话")]
47 public string Std_SecondTelephone { get; set; }
48 //学籍号
49 [DisplayName("学籍号")]
50 public string Std_SchoolRoll { get; set; }
51 //准考证号
52 [DisplayName("准考证号")]
53 public string Std_AdmissionNum { get; set; }
54
55 [DisplayName("地址")]
56 public string Std_Address { get; set; }
57
58 [DisplayName("电子邮件")]
59 public string Std_Email { get; set; }
60 //邮编
61 [DisplayName("邮编")]
62 public string Std_ZipCode { get; set; }
63
64 [DisplayName("QQ")]
65 public string Std_QQ { get; set; }
66
67 [DisplayName("微信")]
68 public string Std_WeiXin { get; set; }
69
70
71
72
73
74 }
可以看到，我们其实就是在服务器端将数据库中查出的数据组织成JSON格式，grid会接收到数据渲染到grid组件当中。而组织JSON数据的过程已经由微软在Json(object)方法中封装了，调用即可。
界面如此获取数据：
1 g = manager = $("#maingrid").ligerGrid({
2 checkbox: true,
3 height: '100%',
4 allowUnSelectRow: true,
5 columns: [
6 {
7 display: '学校', name: 'Std_SchoolName', width: 100, minWidth: 60,
8 editor: { type: 'text' }
9
10 },
11 {
12 display: '专业', name: 'Std_ProfessionName', minWidth: 100, type: 'date',
13 editor: { type: 'text' },
14 },
15 {
16 display: '班级', name: 'Std_ClassName', minWidth: 100,
17 editor: { type: 'text' },
18
19
20 },
21 {
22 display: '姓名', name: 'Std_Name', minWidth: 100,
23 editor: { type: 'text' },
24
25
26 },
27 {
28 display: '性别', name: 'Std_Gender', minWidth: 100,
29 editor: { type: 'text' }, render: function (item) {
30 if (item.Std_Gender == false) {
31 return '女';
32 }
33 if (item.Std_Gender == true) {
34 return '男';
35 }
36 }
37
38
39 },
40 {
41 display: '准考证', name: 'Std_AdmissionNum', minWidth: 100,
42 editor: { type: 'text' },
43
44
45 },
46 {
47 display: '联系电话', name: 'Std_Telephone', minWidth: 100,
48 editor: { type: 'text' },
49
50
51 },
52
53
54
55
56 {
57 display: '操作', isSort: false, width: 120, render: function (rowdata, rowindex, value) {
58 var h = "";
59 h += "<a href='javascript:getDetail(" + rowdata.ID + ")'>查看</a> ";
60 return h;
61 }
62 }
63 ],
64 enabledEdit: false, detailToEdit: false, isScroll: true, frozen: false,
65 url: @Url.Action("StudenData","Student"), pageSize: 30, rownumbers: true,
66 width: '100%',
67 toolbar: {
68 items: [
69 { text: '增加', click: itemclick, icon: 'add', option: "add" },
70 { line: true },
71 { text: '修改', click: itemclick, icon: 'modify', option: "modify" },
72 { line: true },
73 { text: '删除', click: itemclick, img: '@Url.Content("~/(和谐)/delete.gif")', option: "delete" },
74 { line: true },
75 { text: '批量设置登录口令', click: itemclick, icon: 'settings', option: "set" },
76 { line: true },
77 { text: '批量导入学生信息', click: itemclick, icon: 'down', option: "Export_stu" },
78 { line: true },
79 { text: '导出所有学生信息', click: itemclick, icon: 'down', option: "Export_All" },
80 { line: true },
81 { text: '将查询结果导出', click: itemclick, icon: 'down', option: "Export_zd" },
82
83 ]
84
85 }
86 });
大家重点看url属性，将columns属性的name与StudentModel对比（部分字段我删除了）。
2013-12-10
