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);
});
![與專家面對面：Android開發入門問與答[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)