jqGrid的使用总结
jqGrid是一个基于Jquey的表格控件，jqGrid以.ajax的方法实现服务器后台通信，因此利用jqGrid可以快速实现从服务器后台获取数据并在前端展示出来。
如何使用
jqGrid Demo在线文档简单粗暴，上面可以看到每个参数、方法的含义，而且从配置项开始、到使用、到特定需求的设置都进行了示例演示，很好入门，使用也方便，同时可以根据自己的需要进行一些修改。
下面是我在项目实践中的基本用法和一些用到的方法。
<script src='~/Scripts/js/jqGrid/jquery.jqGrid.min.js' type="text/javascript"></script>
//前端js（核心代码）
<script type="text/javascript">
var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";
//在document加载完之后执行list
function list() {
var url = "@Url.Content("~/Refrigeration/GetDeviceAttributes")";
url += "?rdm=" + Math.random();
var caption = "制冷系统监控";
jQuery(grid_selector).jqGrid({
url: url,
datatype: "json",
mtype: "POST",
caption: caption,
cellLayout: 0,
colNames: ['ID', '设备ID','设备名称', '属性', '描述', '值/单位', '单位', '更新时间'],
colModel: [
{ name: 'ID', index: 'ID', align: 'left', hidden: true, },
{ name: 'DeviceID', index: 'DeviceID', align: 'left', hidden: true, },
{ name: 'DeviceName', index: 'DeviceName', width: 50, align: 'left', sortable: false },
{ name: 'Item', index: 'Item', width: 50, align: 'left', sortable: false },
{ name: 'Description', index: 'Description', width: 50, align: 'left', sortable: false },
{ name: 'ObjectValue', index: 'ObjectValue', width: 50, align: 'left', sortable: false },
{ name: 'Units', index: 'Units', width: 50, align: 'left', sortable: false, hidden: true },
{
name: 'UpdateTime', index: 'UpdateTime', width: 50, align: 'left', sortable: false,
formatter: "date", formatoptions: { srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s' }
}],
viewrecords: true,//是否在浏览导航栏显示记录总数
rowNum: 5,
rowList: [5,10, 20, 30],
pager: pager_selector,
toolbar: [true, 'top'],
rownumbers: true,
rownumWidth: 80,
altRows: true,
multiselect: false,
multiboxonly: true,
loadComplete: function () {
jQuery(grid_selector).jqGrid('setLabel', 'rn', '序号', { 'text-align': 'center' });
var table = this;
setTimeout(function () {
updatePagerIcons(table);
}, 0);
var grid = $(grid_selector);
var ids = grid.getDataIDs();
for (var i = 0; i < ids.length; i++) {
grid.setRowData(ids[i], false, { height: 40 });//设置行的高度
}
//默认显示第一个
var rowData = grid.getRowData(ids[0]);
SelectRowData(rowData.DeviceID, rowData.Item, rowData.Description, rowData.Units);
},
onSelectRow: function (id, status) {
//
var grid = $(grid_selector);
var rowData = grid.jqGrid("getRowData", id);
SelectRowData(rowData.DeviceID, rowData.Item, rowData.Description, rowData.Units);
},
autowidth: true,
height: "220px",
});
}
//加入筛选条件时进行查询
function query() {
var deviceName = "";
var descripton = "";
if ($("#txtDeviceName").val() != "") {
deviceName = $("#txtDeviceName").val();
}
if ($("#txtDescription").val() != "") {
descripton = $("#txtDescription").val();
}
jQuery(grid_selector).jqGrid('setGridParam', {
page: 1,
postData: { "DeviceName": deviceName, "Description": descripton },
}).trigger("reloadGrid");
};
$(document).ready(function () {
list();
$("#t_grid-table").append($("#toolbarVehile")).css('background-color', '#e4e6e9');//toolbar填充色
}
</script>
//前端HTML
<div class="row">
<div class="col-xs-12 col-sm-12 jqGrid">
<!-- jqGrid table list4 -->
<table id="grid-table"></table>
<!-- jqGrid 分页 div gridPager -->
<div id="grid-pager"></div>
<!-- jqGird toolbar -->
</div>
</div>
//后台C#
public ActionResult GetDeviceAttributes()
{
JqGridRow<DeviceData> rows = null;
try
{
Pager pager = new Pager(this.Request);
pager.PageIndex += 1;
string deviceId = this.Request["deviceid"];
List<WhereClause> wheres = new List<WhereClause>();
wheres.Add(new WhereClause
{
Key = "DeviceId",
Value = deviceId
});
Order order = new Order();
order.Name = this.Request["sidx"];
if (!string.IsNullOrEmpty(this.Request["sord"]) && this.Request["sord"] == "desc")
{
order.Direction = OrderDirection.Desc;
}
else
{
order.Direction = OrderDirection.Asc;
}
List<DeviceData> modelList = View<DeviceData>.FindAll(wheres, order, pager);
rows = new JqGridRow<DeviceData>() { total = pager.PageCount, records = pager.TotalCount, rows = modelList };
return this.Content(JsonUtility.SerializeObject(rows));
}
catch (System.Exception ex)
{
Log4netHelper.Error("【RefrigerationController】【GetDeviceAttributes】：" + ex.Message);
return this.Content(null);
}
}
表格效果：
部分代码解释：
-
关于@Url.Content("~/SVG/Refrigeration/GetDeviceAttributes")：我们使用的是ASP.NET MVC框架，@Url.Content是HTML的辅助方法，它可以把应用程序的相对路径转换为绝对路径（“~”可以理解为根目录）。
-
query()查询方法里面用的是“.trigger(“reloadGrid”)”，就是触发事件重新加载grid。因为查询数据时我们总会加入一些查询条件，当再查询的时候直接reload就行了。这个时候url不变，只要设置一些参数就行了。但是在设置参数时，应该注意：要避免重复传参数，有时候我们偷懒会在url中直接加入参数而不是使用postdata项。倘若不小心在query方法中的postData再次传了同名参数，那么后天的Request方法只会获取第一次识别到的参数值，也就得不到你query的postData的参数值了。
-
后台代码的一些数据模型和方法都是项目中我们自己的工具类，如JqGridRow和JsonUtility，这样我们就可以很方便的将数据列表序列化，并被前端绑定。
public class JqGridRow
{
///
/// 总页数
///
[JsonProperty(“total”)]
public int total { get; set; }
///
/// 当前页码
///
[JsonProperty(“page”)]
public int page { get; set; }
///
/// 查询出的记录数
///
public int records { get; set; }
///
/// 显示数据
///
[JsonProperty(“rows”)]
public IList rows { get; set; }
public override string ToString()
{
return JsonUtility.SerializeObject(this);
}
}
一些用法总结
下面我列举了一些我在项目中使用到的用法：
1、时间格式化。从C#的DateTime格式序列化后在前端的显示中 日期和时间中间用T分隔，或者有时候不需要精确到分和秒，因此会把格式改一下。这个在colModel的项中实现，加入format就可以了。
{name: 'UpdateTime', index: 'UpdateTime', width: 50, align: 'left', sortable: false,formatter: "date", formatoptions: { srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s' } }
2、设置toolbar的颜色。grid的div容器的id在经过编译后前面会多一个"t_",这样我们就可以利用这个规律进行诸如jqgrid列头、表格、pager块等的样式修改了，
$("#t_grid-table").append($("#toolbarVehile")).css('background-color', '#e4e6e9');//toolbar填充色
3、设置行高。jqgrid含有jqgrid的高度，但是没有对行高的设置，而当我们需要根据页面布局修行高时就可以这样做。setGridHeight只会对表格部分进行设置，而不是对行高。当内容多出来时就会显示滚动条。很显然，我的目的是通过适当的减小行高尽量不显示滚动条。
var grid = $(grid_selector);
var ids = grid.getDataIDs();
for (var i = 0; i < ids.length; i++) {
grid.setRowData(ids[i], false, { height: 40 });//设置行的高度
}
4、添加“序号”列
jQuery(grid_selector).jqGrid('setLabel', 'rn', '序号', { 'text-align': 'center' });
5、获取grid中的记录数
jQuery(grid_selector_1).jqGrid("getGridParam", "records")；
6、合并列头。从“lastroom”列开始后3列合并为1列，命名为“原位置”。从从“previousroom”列开始后3列合并为1列，命名为“现在位置”
$(grid_selector).jqGrid('setGroupHeaders', {
useColSpanStyle: true, // 没有表头的列是否与表头列位置的空单元格合并
index: "groupheader",
groupHeaders: [{
startColumnName: 'lastroom', // 对应colModel中的name
numberOfColumns: 3, // 跨越的列数
titleText: '原位置',
}, {
startColumnName: 'previousroom', // 对应colModel中的name
numberOfColumns: 3, // 跨越的列数
titleText: '现在位置'
}]
});
7、获取第一行的数据.getDataIDs会返回获得所有行的ID数组
var ids = $('#jqGrid').getDataIDs();//返回数据表的ID数组["66","39"..]
var rowData = $("#jqGrid").getRowData(ids[0]);
总结
jqGrid是一款使用简单、方便的表格控件，能够帮助开发者快速的将数据从服务端获取并展示浏览器上，但是jqGrid并不能解决所有问题从而实现你想要的任何样式，如有列头合并。由于合并列头出现了两级列头，导致了列头的高度加倍，很丑陋。我试图让两级列头高度与一级列头高度一样，强行设置，但是合并了列头的两个地方的文字大小就是无法控制。不知道大家有没有什么好的办法？！据项目中的同事也有提到，jqgrid很难完全按照想要的样式进行修改，有时候为了达到UED组的设计样式，费了很大的劲才完成了样式调整。总之，jqgrid在以表格形式呈现数据时确实很方便，功能也很全面，但是在样式的设计和修改上可能会有些不尽人意。
参考博文：
1、jqGrid demos-jqGrid实例-中文。网址：http://blog.mn886.net/jqGrid/
2、JqGrid 使用方法详解 - ____chen - 博客园。网址：https://www.cnblogs.com/chenhuichao/p/8268547.html
3、jqGrid使用记录 - 逆心 - 博客园。网址：https://www.cnblogs.com/kissdodog/p/3875992.html