Ligerui Grid組件--學生信息列表

時間 2019-11-30

標籤 ligerui grid 組件學生信息列表简体版

原文原文鏈接

1、目錄javascript

　一、多層架構+MVC+EF+AUTOFAC+AUTOMAPPER；html

　二、MVC中驗證碼的實現（常常用，記錄備用）java

　三、Ligerui首頁的快速搭建數據庫

　四、Ligerui Grid組件--學生信息列表服務器

2、正文微信

　　數據庫中存在一張學生表，字段在下圖中有所反應，Grid數據來源比較簡單，不作數據庫的介紹。最終作出的效果：架構

　　1.Ligerui-Grid組件介紹app

　　grid一詞，翻譯過來叫作「表格」，個人理解就是一個多功能列表(⊙ｏ⊙)。其數據展示形式能夠爲樹形結構、能夠行內編輯、支持分頁、支持單行排序、支持分組功能……。官方的解釋中，其grid具備以下特性：ide

　　描述:ui

1,支持本地數據和服務器數據(配置data或者url)——這點，咱們後面有說明
2,支持排序和分頁(包括Javascript排序和分頁)——當點擊grid的表頭（好比上圖中的學校），grid會在客戶端改變數據的排序方式，好比點擊上圖中的「學校「，」學校「字段相同數據會聚攏在一塊兒。
3,支持列的「顯示/隱藏」——後面代碼也有說明
4,支持明細行(表格內嵌)——也就是點擊某一行會顯示出該行更爲詳盡的內容
5,支持彙總行——統計功能
6,支持單元格模板——將某一單元格渲染。具體實例，某一行最後渲染爲」添加「、」刪除「等連接
7,支持編輯表格(ligerGrid的一個特點,須要其餘表單插件的支持)——雙擊單元格能夠即時編輯，並能選擇保存到數據庫仍是本地保存。
8,支持樹表格
8,支持分組
8,支持多表頭

　　具體效果，你們能夠去ligerui官網看demo。

　二、上一部分說到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

Grid

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};

CustomersData

　上面是官方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 }

CustomersData_Short

　將數據與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 }

StudentData

 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     }

StudentModel

能夠看到，咱們其實就是在服務器端將數據庫中查出的數據組織成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            });