Bootstrap原生的table组件只能满足简单的数据展示，满足不了更富有操作性的要求。当然了，你可以找到一款叫做“DataTables-1.10.11”的基于bootstrap的table组件，但如果你对API看得不甚了解的话，用起来可就痛苦了，但是如果你选择使用jqGrid，那么本篇教程就给你带来了解决这种富操作性table的解决方案。
一、效果展示
OK，就展示这一张图片，相信你已经爱上了bootstrap版的jqGrid，和bootstrap很兼容，简直完美，当然了，这需要我们在缘由的jqGrid上进行一些改动，同时对组件进行一定的封装。
二、资源下载
我反正挺热爱分享的，关于jqGrid的组件代码，你可以从jqGrid的官网上下载，但是下载下来需要一些改动，那么我直接将改动后的jqGrid上传到了git，你只需要把提供的文件导入到你对应的项目即可。
另外，你还需要下载一个jquery-ui-1.10.0.custom.css，我就不提供下载地址了，不过我相信，你肯定会找得到，就算是用频出事故的度娘，你也可以找得到。
三、本篇都讲一些什么
自从建了QQ群后，“络绎不绝”的有同学加入到群中，但我也发现，进群的一步人直接来找我要demo，或者项目代码，这个我可不喜欢，自己动手做一做，去实现以下，改造一下，才会是你自己的东西，完全照搬我的代码显然你得不到更多的帮助，希望以上同学学习的时候再主动一些。
说完上面这点小废话后，我们言归正传，来说说我们本篇博客主要来讲些什么，什么才是在bootstrap中嵌入jqGrid的关键所在，我总结有如下：
jqGrid在bootstrap中的布局方案jqGrid自身的构造化参数jqGrid在bootstrap中的模块化jqGrid的数据操作
暂定分为以上部分来说明，但必须注意，限于篇幅，博客中只提供思路和部分代码。
①、 jqGrid在bootstrap中的布局方案
<!DOCTYPE html>
<html lang="zh-CN">
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/components/common/taglib.jsp"%>
<%@ include file="/components/common/csslib.jsp"%>
<head>
<link type="text/css" rel="stylesheet" href="${ctx}/css/deal/my_pay_list.css" />
</head>
<body>
<div class="container">
<form class="form-horizontal" id="jqgridForm" role="form" action="${ctx}/deal/datablePayDealOrdersList"
method="post">
<div class="form-group">
<div class="col-sm-12">
<label for="name" class="control-label pull-left">项目名称：</label>
<div class="col-sm-3">
<input type="text" name="name" class="form-control" id="name" placeholder="请输入项目名称" value="" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-primary pull-right" id="searchBtn">检索</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<table id="pageGrid" rel="jqgridForm" class="jqgrid"></table>
<div id="pageGridPager"></div>
</div>
</div>
</form>
</div>
<%@ include file="/components/common/jslib.jsp"%>
<script type="text/javascript" src="${ctx}/js/deal/my_pay_list.js"></script>
</body>
</html>
介于每个人的项目千差万别，列出的代码中我们只关注jqGrid部分：
id="jqgridForm"，此处我们为jqGrid包含一层检索条件的form表单，也就是效果图上列出的search部分，当点击检索按钮时，就把form表单域的查询条件提交到controller，进而获取的数据。id="searchBtn"，定义检索按钮，后面讲模块化会用得到。<table id="pageGrid" rel="jqgridForm" class="jqgrid"></table> <div id="pageGridPager"></div>定义jqGrid的table元素和jqGrid的footer元素，使用的规则我的项目暂时约定这种规则，你也可以有你自己的规则。通过rel指定form的id，可以更便捷的使用table的检索form。②、 jqGrid自身的构造化参数
构造化参数，我把他提取到了①中的my_pay_list.js中。
$(function() {
var jqOption = {
datatype : "xml",
mtype : "POST",
shrinkToFit : true,
viewrecords : false,
rownumbers : false,
autowidth : true,
height : "100%",
colNames : [ 'id', 'status', '项目信息', '项目状态', '订单号', '项目名称', '下单时间', '支付金额', '支持数量', '订单状态', '操作' ],
colModel : [
{
name : 'id',
index : 'id',
hidden : true
},
{
name : 'status',
index : 'status',
hidden : true
},
{
name : 'image_str',
index : 'image_str',
width : 140,
resizable : false,
sortable : false,
formatter : function(cellvalue, options, rowObject) {
if (cellvalue == '支付总花费：') {
return cellvalue;
}
},
align : 'left'
}, {
name : 'oper',
index : 'oper',
width : 90,
resizable : false,
sortable : false,
align : 'center',
formatter : function(cellvalue, options, rowObject) {
var status = parseInt($(rowObject).find("status").text());
var id = $(rowObject).find("id").text();
if (status == 0) {
return '<a class="color0088cc" width="700" target="dialog" href="' + common.ctx + '/deal/initPayg/' + id + '">去支付</a>';
}
if (status == 1 || status == 3) {
return '<a class="color0088cc" target="_blank" href="' + common.ctx + '/deal/showDealOr/' + id + '">查看详情</a>';
}
if (status == 2) {
return '<a class="color0088cc" target="ajaxTodo" href="' + common.ctx + '/deal/receivder/' + id + '">确认收货</a>';
}
},
} ],
xmlReader : {
repeatitems : false,
root : "PageGrid",
row : "map",
page : 'page',
total : 'total',
records : 'records',
id : 'ID'
},
rowNum : 50,
rowList : [ 50, 100, 200, 300 ],
pager : "#pageGridPager",
footerrow : true,
loadError : YUNM.ajaxError,
gridComplete : function() {
var $form = $("#" + $("#pageGrid").attr("rel"));
$.ajax({
type : $form.method || 'POST',
url : common.ctx + "/deal/getAllOrded",
data : $form.serializeArray(),
dataType : "json",
cache : false,
success : function(json) {
$("#pageGrid").footerData("set", {
image_str : "支付总花费：",
order_price : json.message
});
},
error : YUNM.ajaxError
});
if ($.fn.ajaxTodo) {
$("a[target=ajaxTodo]", $("#pageGrid")).ajaxTodo();
}
// dialog
if ($.fn.ajaxTodialog) {
$("a[target=dialog]", $("#pageGrid")).ajaxTodialog();
}
},
};
initEnv(jqOption);
});
一点都不熟悉jqGrid的同学，建议先看jqGrid的demo，以及jqGrid的官方文档，当然了，对于已经熟悉jqGrid的同学，doc和demo肯定是必看的。
以上文件列出的属性非常多，对于jqGrid，我不做过多的介绍，本篇的主旨主要来介绍如何将jqGrid嵌入到bootstrap，那么重点就不在于介绍jqGrid上，我只介绍几个关键点：
formatter: function(cellvalue, options, rowObject) {，formatter还是很经常要使用的，那么对于如何获得对应单元格的值就很重要，我的jqGrid使用的是xml（datatype : “xml”）数据格式，那么可通过$(rowObject).find("deal_id").text()找到对应deal_id列的值。xmlReader : { repeatitems : false, root : "PageGrid",，注意xmlReader中的参数值，在接下来介绍④jqGrid的数据操作会细节介绍，和后台的xml数据封装有关系。$("#pageGrid").footerData("set", {image_str : "支付总花费：", order_price : json.message});，关于footerData方法，使用起来也很