jqgrid+bootstrap样式实践

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

需要引入的样式

需要引入的JS

html代码:

<div class="jqGrid_wrapper">
    <table ></table>
    <div ></div>
</div>

jqgrid初始化

var jqGrid = $("#jqGridList");
        ({
            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();
            (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 = ("selrow");

        if (rowKey) {
            var selectedIDs = ("selarrrow");
            for (var i = 0; i < ; i++) {
                (selectedIDs[i]);
            }
        }

最终的效果图:

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

/*******************************************************************************
* Copyright (C) 
* 
* Author: 
* Create Date: 2015/8/7 15:02:43
* Description: Automated building by service@ 
* 
* Revision History:
* Date         Author               Description
*
*********************************************************************************/

using ;
using ;
using System;
using ;
using ;
using ;
using ;
using ;

namespace 
{
    /// <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 = (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 => ! && !;
                if (!())
                    exp = (item => () || ());
                ResultDto<Sys_UserDto> dto = (query, exp, item => );
                return Json(dto, );
            }
            catch (Exception ex)
            {
                Log(ex);
                return Json(new ResultDto<Sys_UserDto>(), );
            }
        }

        /// <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 = (model);

                if ()
                {
                    ActionLog("Sys_User", model, , CurrentUser);
                }

                 = flag;
            }
            catch (Exception ex)
            {
                Log(ex);
                 = ;
            }
            return Json(result, );
        }

        /// <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 = (model);
                if ()
                {
                    ActionLog("Sys_User", model, , CurrentUser);
                }

                 = flag;
            }
            catch (Exception ex)
            {
                Log(ex);
                 = ;
            }
            return Json(result, );
        }
    }
}