jqgrid+bootstrap样式实践

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

需要引入的样式

bootstrap.min.cssui.jqgrid.css

需要引入的JS

jquery.min.js
bootstrap.min.jsjquery.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 [e-mail] * * 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);        }    }}