jqgrid+bootstrap样式实践，报错数据加载，选中，删除等功能

需要引入的样式

bootstrap.min.cssui.jqgrid.css

需要引入的JS

jquery.min.js

bootstrap.min.jsjquery.jqGrid.min.js

html代码:

[html] view plain copy

 

 

1. <div class="jqGrid_wrapper">  
2.     <table id="jqGridList"></table>  
3.     <div id="jqGridPager"></div>  
4. </div>  

jqgrid初始化

[javascript] view plain copy

 

 

1. var jqGrid = $("#jqGridList");  
2.         jqGrid.jqGrid({  
3.             caption: "用户管理",  
4.             url: "/User/GetList",  
5.             mtype: "GET",  
6.             styleUI: ‘Bootstrap‘,//设置jqgrid的全局样式为bootstrap样式  
7.             datatype: "json",  
8.             colNames: [‘主键‘, ‘登录帐号‘, ‘姓名‘,‘性别‘, ‘邮箱‘, ‘电话‘, ‘身份证‘],  
9.             colModel: [  
10.                 { name: ‘Id‘, index: ‘Id‘, width: 60, key: true, hidden: true },  
11.                 { name: ‘Code‘, index: ‘Code‘, width: 60 },  
12.                 { name: ‘Name‘, index: ‘Name‘, width: 60 },  
13.                 {  
14.                     name: ‘Gender‘, index: ‘Gender‘, width: 60,  
15.                     formatter: function(cellValue, options, rowObject) {  
16.                         return cellValue == 0 ? "男" : "女";  
17.                     }//jqgrid自定义格式化  
18.                 },  
19.                 { name: ‘Email‘, index: ‘Email‘, width: 60 },  
20.                 { name: ‘Phone‘, index: ‘Phone‘, width: 60 },  
21.                 { name: ‘IdCard‘, index: ‘IdCard‘, width: 60 }  
22.             ],  
23.             viewrecords: true,  
24.             multiselect: true,  
25.             rownumbers: true,  
26.             autowidth: true,  
27.             height: "100%",  
28.             rowNum: 20,  
29.             rownumbers: true, // 显示行号  
30.             rownumWidth: 35, // the width of the row numbers columns  
31.             pager: "#jqGridPager",//分页控件的id  
32.             subGrid: false//是否启用子表格  
33.         });  
34.   
35.         // 设置jqgrid的宽度  
36.         $(window).bind(‘resize‘, function () {  
37.             var width = $(‘.jqGrid_wrapper‘).width();  
38.             jqGrid.setGridWidth(width);  
39.         });  

其它jqgrid函数:

获取jqgrid选中的数据行:

[javascript] view plain copy

 

 

1. var id = $(‘#jqGridList‘).jqGrid(‘getGridParam‘, ‘selrow‘);  
2. if (id)  
3.     return $(‘#jqGridList‘).jqGrid("getRowData", id);  
4. else  
5.     return null;  

获取jqgrid的所有选中的数据

[javascript] view plain copy

 

 

1. var grid = $(‘#jqGridList‘);  
2. var rowKey = grid.getGridParam("selrow");  
3.   
4. if (rowKey) {  
5.     var selectedIDs = grid.getGridParam("selarrrow");  
6.     for (var i = 0; i < selectedIDs.length; i++) {  
7.         console.log(selectedIDs[i]);  
8.     }  
9. }  

最终的效果图:

另附上后台控制器代码，又需要的可以看看

[csharp] view plain copy

 

 

1. /******************************************************************************* 
2. * Copyright (C) JuCheap.Com 
3. *  
4. * Author: dj.wong 
5. * Create Date: 2015/8/7 15:02:43 
6. * Description: Automated building by service@aspxpet.com  
7. *  
8. * Revision History: 
9. * Date         Author               Description 
10. * 
11. *********************************************************************************/  
12.   
13. using EP.Component.Tools;  
14. using EP.Site.Models;  
15. using System;  
16. using System.Linq;  
17. using System.Collections.Generic;  
18. using System.ComponentModel.Composition;  
19. using System.Web.Mvc;  
20. using System.Linq.Expressions;  
21.   
22. namespace EP.Site.Web.Areas.Adm.Controllers  
23. {  
24.     /// <summary>  
25.     /// 用户管理  
26.     /// </summary>  
27.     [Export]  
28.     public class UserController : BaseController  
29.     {  
30.         [Import]  
31.         public IAccountSiteContract AccountService { get; set; }  
32.   
33.         [Import]  
34.         public ISys_UserSiteContract UserService { get; set; }  
35.   
36.         [Import]  
37.         public ISys_ParameterSiteContract ParamService { get; set; }  
38.   
39.         // GET: Adm/User  
40.         public ActionResult Index()  
41.         {  
42.             return View();  
43.         }  
44.   
45.         // GET: Adm/User/Add  
46.         public ActionResult Add()  
47.         {  
48.   
49.             return View();  
50.         }  
51.   
52.         // GET: Adm/User/Edit  
53.         public ActionResult Edit(int id)  
54.         {  
55.             var model = UserService.GetByKeyId(id);  
56.   
57.             return View(model);  
58.         }  
59.   
60.         /// <summary>  
61.         /// 分页获取  
62.         /// </summary>  
63.         /// <param name="query"></param>  
64.         /// <returns></returns>  
65.         [HttpGet]  
66.         public JsonResult GetList(QueryBase query)  
67.         {  
68.             try  
69.             {  
70.                 Expression<Func<Sys_UserDto, bool>> exp = item => !item.IsDeleted && !item.IsUser;  
71.                 if (!query.SearchKey.IsBlank())  
72.                     exp = exp.And(item => item.Name.Contains(query.SearchKey) || item.Code.Contains(query.SearchKey));  
73.                 ResultDto<Sys_UserDto> dto = UserService.GetPages(query, exp, item => item.Id);  
74.                 return Json(dto, JsonRequestBehavior.AllowGet);  
75.             }  
76.             catch (Exception ex)  
77.             {  
78.                 Log(ex);  
79.                 return Json(new ResultDto<Sys_UserDto>(), JsonRequestBehavior.AllowGet);  
80.             }  
81.         }  
82.   
83.         /// <summary>  
84.         /// 添加  
85.         /// </summary>  
86.         /// <param name="model"></param>  
87.         /// <returns></returns>  
88.         [HttpPost]  
89.         public JsonResult AddModel(Sys_UserDto model)  
90.         {  
91.             var result = new Result<string>();  
92.             try  
93.             {  
94.                 if (model == null)  
95.                     throw new ArgumentException("参数错误");  
96.                 bool flag = AccountService.Insert(model);  
97.   
98.                 if (result.flag)  
99.                 {  
100.                     ActionLog("Sys_User", model, ActionType.Insert, CurrentUser);  
101.                 }  
102.   
103.                 result.flag = flag;  
104.             }  
105.             catch (Exception ex)  
106.             {  
107.                 Log(ex);  
108.                 result.msg = ex.Message;  
109.             }  
110.             return Json(result, JsonRequestBehavior.AllowGet);  
111.         }  
112.   
113.         /// <summary>  
114.         /// 编辑  
115.         /// </summary>  
116.         /// <param name="model"></param>  
117.         /// <returns></returns>  
118.         [HttpPost]  
119.         public JsonResult EditModel(Sys_UserDto model)  
120.         {  
121.             var result = new Result<string>();  
122.             try  
123.             {  
124.                 if (model == null)  
125.                     throw new ArgumentException("参数错误");  
126.   
127.                 bool flag = AccountService.Edit(model);  
128.                 if (result.flag)  
129.                 {  
130.                     ActionLog("Sys_User", model, ActionType.Update, CurrentUser);  
131.                 }  
132.   
133.                 result.flag = flag;  
134.             }  
135.             catch (Exception ex)  
136.             {  
137.                 Log(ex);  
138.                 result.msg = ex.Message;  
139.             }  
140.             return Json(result, JsonRequestBehavior.AllowGet);  
141.         }  
142.     }  
143. }  

jqgrid+bootstrap样式实践