jqgrid+bootstrap样式实践

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

需要引入的样式

bootstrap.min.css

ui.jqgrid.css

需要引入的JS

jquery.min.js

bootstrap.min.js
jquery.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. // 设置jqgrid的宽度
35. $(window).bind(‘resize‘, function () {
36. var width = $(‘.jqGrid_wrapper‘).width();
37. jqGrid.setGridWidth(width);
38. });

其它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. if (rowKey) {
4. var selectedIDs = grid.getGridParam("selarrrow");
5. for (var i = 0; i < selectedIDs.length; i++) {
6. console.log(selectedIDs[i]);
7. }
8. }

最终的效果图:

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

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