jqgrid+bootstrap样式实践

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

需要引入的样式

bootstrap.min.css

ui.jqgrid.css

需要引入的JS

jquery.min.js

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

html代码:

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 [email protected] 
* 
* 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
{
    /// 

    /// 用户管理
    /// 
    [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);
        }

        /// 

        /// 分页获取
        /// 
        /// 
        /// 
        [HttpGet]
        public JsonResult GetList(QueryBase query)
        {
            try
            {
                Expression> 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 dto = UserService.GetPages(query, exp, item => item.Id);
                return Json(dto, JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                Log(ex);
                return Json(new ResultDto(), JsonRequestBehavior.AllowGet);
            }
        }

        /// 

        /// 添加
        /// 
        /// 
        /// 
        [HttpPost]
        public JsonResult AddModel(Sys_UserDto model)
        {
            var result = new Result();
            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);
        }

        /// 

        /// 编辑
        /// 
        /// 
        /// 
        [HttpPost]
        public JsonResult EditModel(Sys_UserDto model)
        {
            var result = new Result();
            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);
        }
    }
}