jqgrid+bootstrap样式实践

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

bootstrap.min.css

ui.jqgrid.css

需要引入的JS

jquery.min.js

bootstrap.min.js
jquery.jqGrid.min.js

html代码:

<div class="jqGrid_wrapper">
<table id="jqGridList"></table>
<div id="jqGridPager"></div>
</div>

jqgrid初始化

var jqGrid = $("#jqGridList");
jqGrid.jqGrid({
caption: "用户管理",
url: "/User/GetList",
mtype: "GET",
styleUI: 'Bootstrap',//设置jqgrid的全局样式为bootstrap样式
datatype: "json",
colNames: ['主键', '登录帐号', '姓名','性别', '邮箱', '电话', '身份证'],
colModel: [
                { name: 'Id', index: 'Id', width: 60, key: true, hidden: true },
                { name: 'Code', index: 'Code', width: 60 },
                { name: 'Name', index: 'Name', width: 60 },
                {
                    name: 'Gender', index: 'Gender', width: 60,
                    formatter: function(cellValue, options, rowObject) {
                        return cellValue == 0 ? "男" : "女";
                    }//jqgrid自定义格式化
                },
                { name: 'Email', index: 'Email', width: 60 },
                { name: 'Phone', index: 'Phone', width: 60 },
                { name: 'IdCard', index: 'IdCard', width: 60 }
            ],
viewrecords: true,
multiselect: true,
rownumbers: true,
autowidth: true,
height: "100%",
rowNum: 20,
rownumbers: true, // 显示行号
rownumWidth: 35, // the width of the row numbers columns
pager: "#jqGridPager",//分页控件的id
subGrid: false//是否启用子表格
});

// 设置jqgrid的宽度
$(window).bind('resize', function () {
var width = $('.jqGrid_wrapper').width();
jqGrid.setGridWidth(width);
});

其它jqgrid函数:

获取jqgrid选中的数据行:

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

获取jqgrid的所有选中的数据

var grid = $('#jqGridList');
var rowKey = grid.getGridParam("selrow");

if (rowKey) {
var selectedIDs = grid.getGridParam("selarrrow");
for (var i = 0; i < selectedIDs.length; i++) {
console.log(selectedIDs[i]);
}
}

最终的效果图:



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

/*******************************************************************************
* Copyright (C) JuCheap.Com
*
* Author: dj.wong
* Create Date: 2015/8/7 15:02:43
* Description: Automated building by service@aspxpet.com
*
* Revision History:
* Date         Author               Description
*
*********************************************************************************/

using EP.Component.Tools;
using EP.Site.Models;
using System;
using System.Linq;
using System.Collections.Generic;
using System.ComponentModel.Composition;
using System.Web.Mvc;
using System.Linq.Expressions;

namespace EP.Site.Web.Areas.Adm.Controllers
{
/// <summary>
/// 用户管理
/// </summary>
[Export]
public class UserController : BaseController
{
[Import]
public IAccountSiteContract AccountService { get; set; }

[Import]
public ISys_UserSiteContract UserService { get; set; }

[Import]
public ISys_ParameterSiteContract ParamService { get; set; }

// GET: Adm/User
public ActionResult Index()
{
return View();
}

// GET: Adm/User/Add
public ActionResult Add()
{

return View();
}

// GET: Adm/User/Edit
public ActionResult Edit(int id)
{
var model = UserService.GetByKeyId(id);

return View(model);
}

/// <summary>
/// 分页获取
/// </summary>
/// <param name="query"></param>
/// <returns></returns>
[HttpGet]
public JsonResult GetList(QueryBase query)
{
try
{
Expression<Func<Sys_UserDto, bool>> exp = item => !item.IsDeleted && !item.IsUser;
if (!query.SearchKey.IsBlank())
exp = exp.And(item => item.Name.Contains(query.SearchKey) || item.Code.Contains(query.SearchKey));
ResultDto<Sys_UserDto> dto = UserService.GetPages(query, exp, item => item.Id);
return Json(dto, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
Log(ex);
return Json(new ResultDto<Sys_UserDto>(), JsonRequestBehavior.AllowGet);
}
}

/// <summary>
/// 添加
/// </summary>
/// <param name="model"></param>
/// <returns></returns>
[HttpPost]
public JsonResult AddModel(Sys_UserDto model)
{
var result = new Result<string>();
try
{
if (model == null)
throw new ArgumentException("参数错误");
bool flag = AccountService.Insert(model);

if (result.flag)
{
ActionLog("Sys_User", model, ActionType.Insert, CurrentUser);
}

result.flag = flag;
}
catch (Exception ex)
{
Log(ex);
result.msg = ex.Message;
}
return Json(result, JsonRequestBehavior.AllowGet);
}

/// <summary>
/// 编辑
/// </summary>
/// <param name="model"></param>
/// <returns></returns>
[HttpPost]
public JsonResult EditModel(Sys_UserDto model)
{
var result = new Result<string>();
try
{
if (model == null)
throw new ArgumentException("参数错误");

bool flag = AccountService.Edit(model);
if (result.flag)
{
ActionLog("Sys_User", model, ActionType.Update, CurrentUser);
}

result.flag = flag;
}
catch (Exception ex)
{
Log(ex);
result.msg = ex.Message;
}
return Json(result, JsonRequestBehavior.AllowGet);
}
}
}