jqgrid+bootstrap样式实践

时间：2016-12-21 07:45:18 阅读：4201 评论：0 收藏：0 [点我收藏+]

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

需要引入的样式

bootstrap.min.css

ui.jqgrid.css

需要引入的JS

jquery.min.js

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

html代码:

[html] view plain copy

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

jqgrid初始化

[javascript] view plain copy

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

[javascript] view plain copy

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

获取jqgrid的所有选中的数据

[javascript] view plain copy

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]);
}
}

最终的效果图:

技术分享

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

[csharp] view plain copy

/*******************************************************************************
* 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);
}
}
}

jqgrid+bootstrap样式实践

原文：http://www.cnblogs.com/webenh/p/6206217.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)