jqgrid+bootstrap样式实践

2023-08-03 16:50:34

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

需要引入的样式

bootstrap.min.css

ui.jqgrid.css

需要引入的JS

jquery.min.js

bootstrap.min.js

jquery.jqGrid.min.js

html代码:

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

jqgrid初始化

  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选中的数据行:

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

获取jqgrid的所有选中的数据

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

最终的效果图:

jqgrid+bootstrap样式实践

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

    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. 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. }
上一篇：清除系统日志及数据库（sql server)日志最佳实践


下一篇：HTML5 对于手机页面长按会粘贴复制的禁用 （解决方案）