Page contains single form with input elements and jqgrid data.
jqGrid data is
retrieved in json using loadonce: true option.
Data is edited locally.
How to submit all this data if submit button is pressed?
Has jqGrid any method which can help to submit all data from all rows.
mentions that
jQuery ajax form plugin should be used but I havent found any sample.
jqGrid probably holds retrieved json table in
element. In this case form plugin is not capable read this data.
How to get and submit all data retrieved using loadonce: true and edited?
Based on Oleg answer I tried:
function SaveDocument()
var gridData = $("#grid").jqGrid('getGridParam','data');
var postData = JSON.stringify(gridData);
$('#_detail').val( postData );
var res = $("#Form").serializeArray();
$.ajax({ type: "POST",
url: 'Edit'
data : res
aspx page:
&form id="Form" class='form-fields'&
.... other form fields
&input name='_detail' id='_detail' type='hidden' /&
&div id="grid1container" style="width: 100%"&
&table id="grid"&
In ASP.NET MVC2 Controller Edit method I tried to parse result using
public JsonResult Edit(string _detail) {
var order = new Order();
UpdateModel(order, new HtmlDecodeValueProviderFromLocalizedData(ControllerContext));
var serializer = new JavaScriptSerializer();
var details = serializer.Deserialize&List&OrderDetails&&&(_detail);
Exception occurs in Deserialize() call. Decimal and date properties are passed in localized format but it looks like Deserialize() does not parse
localized strings and there is no way to force it to use converter like HtmlDecodeValueProviderFromLocalizedData passed to UpdateModel.
How to fix ?
Is is reasonable/how to convert _detail parameter into NameValue collection and then use UpdateModel to update details,
use some other deserialize or other idea ?
Decimal and Date CurrentUICulture values are present in form and in jqGrid data. Sample provided handles them in form OK but fails for jqGrid data.
This controller should handle different entity types, form fields and jqgrid columns can defined at runtime. So using hard-coded names is not possible.
Based on Oleg reply I tried to override decimal conversion by creating converter
public class LocalizedTypeConverter : JavaScriptConverter
public override IEnumerable&Type& SupportedTypes
return new ReadOnlyCollection&Type&(new Type[] { typeof(decimal) });
public override object Deserialize(IDictionary&string, object& dictionary, Type type,
JavaScriptSerializer serializer)
if (dictionary == null)
throw new ArgumentNullException("dictionary");
if (type == typeof(decimal))
return decimal.Parse(dictionary["resources"].ToString(), CultureInfo.CurrentCulture);
public override IDictionary&string, object& Serialize(object obj, JavaScriptSerializer serializer)
throw new InvalidOperationException("We only Deserialize");
But conversion still causes exception
0,0000 is not valid value for decimal. It looks like decimal converter cannot overridden. How to fix ?
解决方案 First of all you can get all local data from the jqGrid with respect of
var localGridData = $("#list").jqGrid('getGridParam','data');
If you will need to send only subset of rows of the grid, like the selected rows only, you can need to get _index:
var idsToDataIndex = $("#list").jqGrid('getGridParam','_index');
To send the data to the server you can use the following function for example
var sendData = function(data) {
var dataToSend = JSON.stringify(data);
alert("The following data are sending to the server:\n" + dataToSend);
type: "POST",
url: "yourServerUrl",
dataType:"json",
data: dataToSend,
contentType: "application/ charset=utf-8",
success: function(response, textStatus, jqXHR) {
// display an success message if needed
alert("success");
error: function(jqXHR, textStatus, errorThrown) {
// display an error message in any way
alert("error");
you will find a little more sophisticated example having two buttons: "Send all grid contain", "Send selected rows". The corresponding code is below
$("#sendAll").click(function(){
var localGridData = grid.jqGrid('getGridParam','data');
sendData(localGridData);
$("#sendSelected").click(function(){
var localGridData = grid.jqGrid('getGridParam','data'),
idsToDataIndex = grid.jqGrid('getGridParam','_index'),
selRows = grid.jqGrid('getGridParam','selarrrow'),
dataToSend = [], i, l=selRows.
for (i=0; i&l; i++) {
dataToSend.push(localGridData[idsToDataIndex[selRows[i]]]);
sendData(dataToSend);
var grid = $("#list"),
decodeErrorMessage = function(jqXHR, textStatus, errorThrown) {
var html, errorInfo, i, errorText = textStatus + '\n&br /&' + errorT
if (jqXHR.responseText.charAt(0) === '[') {
errorInfo = $.parseJSON(jqXHR.responseText);
errorText = "";
for (i=0; i&errorInfo. i++) {
if (errorText.length !== 0) {
errorText += "&hr/&";
errorText += errorInfo[i].Source + ": " + errorInfo[i].M
catch (e) { }
html = /&body.*?&([\s\S]*)&\/body&/i.exec(jqXHR.responseText);
if (html !== null && html.length & 1) {
errorText = html[1];
return errorT
sendData = function(data) {
var dataToSend = JSON.stringify(data);
alert("The following data are sending to the server:\n"+dataToSend);
type: "POST",
url: "yourServerUrl",
dataType:"json",
data: dataToSend,
contentType: "application/ charset=utf-8",
success: function(response, textStatus, jqXHR) {
// remove error div if exist
$('#' + grid[0].id + '_err').remove();
alert("success");
error: function(jqXHR, textStatus, errorThrown) {
// remove error div if exist
$('#' + grid[0].id + '_err').remove();
// insert div with the error description before the grid
grid.closest('div.ui-jqgrid').before(
'&div id="' + grid[0].id + '_err" style="max-width:' + grid[0].style.width +
';"&&div class="ui-state-error ui-corner-all" style="padding:0.7float:"&&span class="ui-icon ui-icon-alert" ' +
'style="float: margin-right: .3"&&/span&&span style="clear:left"&' +
decodeErrorMessage(jqXHR, textStatus, errorThrown) + '&/span&&/div&&div style="clear:left"/&&/div&');
I think, that more difficult and more complex problem you will become on the server. In case of concurrency errors, but I wrote you about the problems before. Exactly because of the problems I personally would never implement saving of multiple rows on the server.
UPDATED: To get data from the form you can use . You should use name attribute for all fields in the form which you want to serialize. All data which you need to send are
var allData = {
localGridData: grid.jqGrid('getGridParam','data'),
formData: $("#formid").serialize()
You can send the data exactly like I described before: sendData(allData).
本文地址： &
页包含输入元素和数据的jqGrid单一形式。jqGrid的数据是使用JSON检索loadonce：true选项。数据本地编辑。 如何提交所有这些数据如果pressed提交按钮？已jqGrid的，它可以帮助从所有行提交的所有数据的任何方法。 jqGrid - 如何编辑，并在一次保存多个行提到jQuery的Ajax表单插件应该使用，但我还没有发现任何样本？ 大概的jqGrid保存检索JSON表中的元素。在这种情况下插件的形式是不能够读取该数据。如何获得和使用提交检索loadonce的所有数据：真实和编辑
根据奥列格答案我想： 函数SaveDocument（）{
。VAR的GridData = $（“＃电网”）的jqGrid（'getGridParam'，'数据'）;
VAR POSTDATA = JSON.stringify（的GridData）;
$（'#_明细“）VAL（POSTDATA）。
VAR解析度= $（“＃表”）serializeArray（）。
$阿贾克斯（{类型：“POST”，
网址：'编辑'
aspx页面： ＆LT;表ID =“形”类='表单字段'＆GT;....其他表单字段＆LT;输入名称='_细节'ID ='_细节“类型=”隐藏“/＆GT;＆LT; /表及GT;＆LT; DIV ID =“grid1container”的风格=“宽度：100％”＆GT;
＆LT;表ID =“网格”＆GT;
＆LT; /表＆＆LT; / DIV＆GT; 在ASP.NET MVC2控制器编辑方法，我试图解析使用效果 公共JsonResult编辑（字符串_detail）{VAR为了=新订单（）;的UpdateModel（订单，新HtmlDe codeValueProviderFromLocalizedData（ControllerContext））;VAR串行=新的JavaScriptSerializer（）;VAR细节= serializer.Deserialize＆LT;名单，LT;订单明细＆GT;＆GT;＆GT;（_细节）;} 在反序列化（）调用时发生异常。小数和日期属性在本地化的格式通过，但它看起来像反序列化（）不解析本地化的字符串，有没有办法迫使它使用转换器像HtmlDe codeValueProviderFromLocalizedData传递的UpdateModel。如何解决？难道是合理的/如何_detail参数转换成NameValue集合，然后使用的UpdateModel更新的详细信息，使用一些其他的反序列化或其他的想法？更新2 十进制和日期的CurrentUICulture值在形式和的jqGrid数据present。提供了样本处理它们的形式确定的，但失败的jqGrid的数据。该控制器应处理不同的实体类型，表单字段和列的jqGrid可以在运行时定义。因此，使用硬codeD的名字是不可能的。基于奥列格回答我试图通过创建转换覆盖十进制转换 公共类LocalizedTypeConverter：JavaScriptConverter{
公共覆盖的IEnumerable＆LT;类型＆GT; SupportedTypes
返回新ReadOnlyCollection还＆LT;类型和GT;（新类型[] {typeof运算（十进制）}）;
公众覆盖对象的Deserialize（IDictionary的＆LT;字符串对象＆的字典，类型类型，
串行的JavaScriptSerializer）
如果（字典== NULL）
抛出新的ArgumentNullException（“辞海”）;
如果（类型== typeof运算（十进制））
返回decimal.Parse（字典[“资源”]的ToString（），CultureInfo.CurrentCulture。）;
公共覆盖的IDictionary＆LT;字符串对象＆序列化（obj对象，序列化的JavaScriptSerializer）
抛出新的InvalidOperationException异常（“我们只反序列化”）;
}} 但转换还是引起异常 0,0000不是十进制有效值。它看起来像十进制转换器不能覆盖。如何解决？解决方案 首先，你可以从jqGrid的所有本地数据与尊重
VAR localGridData = $（“＃清单”）的jqGrid（'getGridParam'，'数据'）。 如果您将需要发送网格的行只子集，像只选定行，你可以根据需要获得 _index ：
VAR idsToDataIndex = $（“＃清单”）的jqGrid（'getGridParam'，'_索引“）。 要发送数据到可以使用例如下面的函数在服务器
VAR送出数据=功能（数据）{
变种dataToSend = JSON.stringify（数据）;
警报（“以下数据发送到服务器：\\ n”+ dataToSend）;
$阿贾克斯（{
键入：“POST”，
网址：“yourServerUrl”
数据类型：“JSON”
数据：dataToSend，
的contentType：“应用/ JSON的;字符集= UTF-8”，
成功：函数（响应，textStatus，jqXHR）{
如果需要的话//显示成功消息
警报（“成功”）;
错误：功能（jqXHR，textStatus，errorThrown）{
//以任何方式显示错误信息
警报（“错误”）;
}）;}; 在，你会发现有两个按钮，一个小更复杂的例子：“发送所有网格含有“，”发送所选行“。相应的code是低于
$（“＃sendAll”）。点击（函数（）{
VAR localGridData = grid.jqGrid（'getGridParam'，'数据'）;
送出数据（localGridData）;}）;$（“＃sendSelected”）。点击（函数（）{
VAR localGridData = grid.jqGrid（'getGridParam“，”数据“），
idsToDataIndex = grid.jqGrid（'getGridParam'，'_索引“），
selRows = grid.jqGrid（'getGridParam'，'selarrrow'），
dataToSend = []，I，L = selRows.
对于（i = 0; I＆LT;升;我++）{
dataToSend.push（localGridData [idsToDataIndex [selRows [我]]）;
送出数据（dataToSend）;}）; 其中，
VAR电网= $（“＃清单”），
德codeErrorMessage =功能（jqXHR，textStatus，errorThrown）{
VAR HTML，errorInfo中，我，ERRORTEXT = textStatus +的'\\ n＆LT; BR /＆GT;' + errorT
如果（jqXHR.responseText.charAt（0）==='['）{
errorInfo中= $ .parseJSON（jqXHR.responseText）;
ERRORTEXT =“”;
对于（i = 0; I＆LT; errorInfo.我++）{
如果（errorText.length！== 0）{
ERRORTEXT + =“＆LT;小时/＆”中;
ERRORTEXT + = errorInfo中由[i] .Source +“：”+ errorInfo中[I] .M
赶上（E）{}
HTML = /&body.*?&([\\s\\S]*)&\\/body&/i.exec(jqXHR.responseText）;
如果（HTML == NULL和放大器;！＆安培; html.length大于1）{
ERRORTEXT = HTML [1];
返回ERRORTEXT;
送出数据=功能（数据）{
变种dataToSend = JSON.stringify（数据）;
警报（“以下数据发送到服务器：\\ n”+ dataToSend）;
$阿贾克斯（{
键入：“POST”，
网址：“yourServerUrl”
数据类型：“JSON”
数据：dataToSend，
的contentType：“应用/ JSON的;字符集= UTF-8”，
成功：函数（响应，textStatus，jqXHR）{
//删除错误的div是否存在
$（'＃'+电网[0] .ID +'_ERR'）删除（）;
警报（“成功”）;
错误：功能（jqXHR，textStatus，errorThrown）{
//删除错误的div是否存在
$（'＃'+电网[0] .ID +'_ERR'）删除（）;
//插入DIV与电网前的错误描述
grid.closest（'div.ui-的jqGrid'）。前（
'＆LT; DIV ID =“”+电网[0] .ID +“_ERR”的风格=“最大宽度：'+电网[0] .style.width +
“;”＆GT;＆LT; DIV CLASS =“UI状态错误UI的角落都”的风格=“填充：0.7浮动：左;”＆GT;＆LT;跨度类=“UI图标UI的icon-提醒“'+
“风格=”浮动：左;保证金右：.3“＆GT;＆LT; / SPAN＆GT;＆LT;跨度风格=”明确：左“＆GT;' +
德codeErrorMessage（jqXHR，textStatus，errorThrown）+'＆LT; / SPAN＆GT;＆LT; / DIV＆GT;＆LT; DIV的风格=“明确：左”/＆GT;＆LT; / DIV＆GT;'）;
}; 我认为，更加困难和复杂的问题，你将成为在服务器上。在并发错误的情况下，但我写的关于你以前的问题。正是因为这些问题，我个人绝不会在服务器上实现多行的保存。 更新时间：：您可以通过您可以使用表单数据。您应该使用名称属性，它要序列表单中的所有领域。您需要发送的所有数据都是
VAR ALLDATA = {
localGridData：grid.jqGrid（'getGridParam“，”数据“），
FORMDATA：$（“＃formid”），序列化（）。}; 您可以像我确切地描述发送数据之前：送出数据（ALLDATA）
本文地址： &
扫一扫关注IT屋
微信公众号搜索 “ IT屋 ” ，选择关注
与百万开发者在一起
(window.slotbydup = window.slotbydup || []).push({
id: '5828425',
container: s,
size: '300,250',
display: 'inlay-fix'Bootstrap原生的table组件只能满足简单的数据展示，满足不了更富有操作性的要求。当然了，你可以找到一款叫做“DataTables-1.10.11”的基于bootstrap的table组件，但如果你对API看得不甚了解的话，用起来可就痛苦了，但是如果你选择使用jqGrid，那么本篇教程就给你带来了解决这种富操作性table的解决方案。
一、效果展示
OK，就展示这一张图片，相信你已经爱上了bootstrap版的jqGrid，和bootstrap很兼容，简直完美，当然了，这需要我们在缘由的jqGrid上进行一些改动，同时对组件进行一定的封装。
二、资源下载
我反正挺热爱分享的，关于jqGrid的组件代码，你可以从jqGrid的官网上下载，但是下载下来需要一些改动，那么我直接将改动后的jqGrid上传到了，你只需要把提供的文件导入到你对应的项目即可。
另外，你还需要下载一个jquery-ui-1.10.0.custom.css，我就不提供下载地址了，不过我相信，你肯定会找得到，就算是用频出事故的度娘，你也可以找得到。
三、本篇都讲一些什么
自从建了QQ群后，“络绎不绝”的有同学加入到群中，但我也发现，进群的一步人直接来找我要demo，或者项目代码，这个我可不喜欢，自己动手做一做，去实现以下，改造一下，才会是你自己的东西，完全照搬我的代码显然你得不到更多的帮助，希望以上同学学习的时候再主动一些。
说完上面这点小废话后，我们言归正传，来说说我们本篇博客主要来讲些什么，什么才是在bootstrap中嵌入jqGrid的关键所在，我总结有如下：
jqGrid在bootstrap中的布局方案
jqGrid自身的构造化参数
jqGrid在bootstrap中的模块化
jqGrid的数据操作
暂定分为以上部分来说明，但必须注意，限于篇幅，博客中只提供思路和部分代码。
①、 jqGrid在bootstrap中的布局方案
&!DOCTYPE html&
lang="zh-CN"&
&%@ page language="java" contentType="text/ charset=utf-8" pageEncoding="utf-8"%&
&%@ include file="/components/common/taglib.jsp"%&
&%@ include file="/components/common/csslib.jsp"%&
type="text/css" rel="stylesheet" href="${ctx}/css/deal/my_pay_list.css" /&
class="container"&
class="form-horizontal" id="jqgridForm" role="form" action="${ctx}/deal/datablePayDealOrdersList"
method="post"&
class="form-group"&
class="col-sm-12"&
for="name" class="control-label pull-left"&项目名称：&
class="col-sm-3"&
type="text" name="name" class="form-control" id="name" placeholder="请输入项目名称" value="" /&
class="form-group"&
class="col-sm-12"&
type="button" class="btn btn-primary pull-right" id="searchBtn"&检索&
class="form-group"&
class="col-sm-12"&
id="pageGrid" rel="jqgridForm" class="jqgrid"&&
id="pageGridPager"&&
&%@ include file="/components/common/jslib.jsp"%&
type="text/javascript" src="${ctx}/js/deal/my_pay_list.js"&&
介于每个人的项目千差万别，列出的代码中我们只关注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 == '支付总花费：') {
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',
rowNum : 50,
rowList : [ 50, 100, 200, 300 ],
pager : "#pageGridPager",
footerrow : true,
loadError : YUNM.ajaxError,
gridComplete : function() {
var $form = $("#" + $("#pageGrid").attr("rel"));
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();
if ($.fn.ajaxTodialog) {
$("a[target=dialog]", $("#pageGrid")).ajaxTodialog();
initEnv(jqOption);
一点都不熟悉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方法，使用起来也很方便，效果可参照效果图。
initEnv(jqOption);方法，在页面onload后，我们将jqGrid的初始化参数传递给initEnv方法，后续③jqGrid在bootstrap中的模块化会介绍initEnv方法。
③、jqGrid在bootstrap中的模块化
②中我们注意到initEnv方法，那么这个方法内部就是专门针对jqGrid做的模块化封装工作。
initEnv方法
function initEnv(jqOption) {
$(window).resize(function() {
initLayout();
initUI(null, jqOption);
该方法中，我们将会看到initLayout方法和initUI方法，具体内容稍候介绍。
initLayout
function initLayout() {
$("table[rel=jqgridForm]").each(function() {
var rel = $(this).attr("rel");
if (rel) {
var $form = $("#" + rel);
var tableWidth = $form.width();
$(this).setGridWidth(tableWidth, true);
也就是说，在窗口缩放的时候，我们为jqGrid重新绘制宽度，使其自适应于bootstrap的响应式布局。使用的方法就是jqGrid的setGridWidth方法。
function initUI(_box, jqOption) {
var $p = $(_box || document);
if (jqOption) {
YUNM.debug("初始化jqgrid");
var $form = $("#" + $("#pageGrid").attr("rel"));
YUNM.debug(YUNM.array2obj($form.serializeArray()));
var op = $.extend({
url : $form.attr("action"),
postData : YUNM.array2obj($form.serializeArray()),
}, jqOption);
$("#pageGrid").jqGrid(op);
$("#searchBtn", $form).click(function() {
$("#pageGrid").jqGrid('setGridParam', {
url : $form.attr("action"),
postData : YUNM.array2obj($form.serializeArray()),
$("#pageGrid").trigger("reloadGrid");
$(".btn", $form).each(function() {
var $this = $(this);
$this.css({
"border-radius" : "0px",
"border-bottom" : "0",
array2obj : function(array) {
var params = $({});
$.each(array, function(i) {
var $param = $(this)[0];
params.attr($param.name, $param.value);
return params[0];
如果你曾看过我之前的系列文章，对于initUi方法就不会太陌生，熟悉dwz的朋友，自然也不会陌生，我项目中的大部分模板还是依赖于dwz，谢谢这些前辈们。
var $form = $("#" + $("#pageGrid").attr("rel"));由于我们在jqGrid上关联了form检索条件的form表单，此处就可以将form表单对象取到，取到form表单对象，自然也就去得到了检索域的值（$form.serializeArray()）。
拿到form表单的检索域值后，此时就需要做一番处理了。我们知道，jqGrid在向controller传递参数时，必然需要上送分页、排序的相关字段（page、rows、sord、sidx），使用的方法是$("#pageGrid").jqGrid({postData:xxx});，通常情况下，我们上送form表单时，只需要使用$form.serializeArray()就可以，但如果此时，只是将xxx替换为$form.serializeArray()，那么controller中将不会获得分页、排序的相关字段（page、rows、sord、sidx），这是一个冲突，此时怎么处理呢？解决办法就是将form表单数据对象化（array2obj 方法），然后我们再通过var op =$.extend({url:$form.attr("action"),postData:YUNM.array2obj($form.serializeArray()),},jqOption);$("#pageGrid").jqGrid(op);将检索域的值和分页、排序的相关字段一起上送到controller。
$("#searchBtn", $form).click通过封装click事件，将jqGrid的数据重新加载。
$(".btn", $form).each(function() {此处的方法将检索button去圆角，使其更贴合jqGrid，见效果图。
④ 、jqGrid的数据操作
数据操作部分，我认为包含有 检索参数传递、分页排序参数传递、sql语句的编写。
关于参数传递，前端的参数封装在③中已有介绍，我们来看一看controller中如何处理数据的。
首先，我们来定义PageGrid，也就是jqGrid中xmlReader的数据源。
package com.honzh.common.
import java.util.L
import com.thoughtworks.xstream.annotations.XStreamA
@XStreamAlias("pageGrid")
@SuppressWarnings("rawtypes")
public class PageGrid {
private int
private int
private int
public int getPage() {
return this.
public void setPage(int page) {
this.page =
public int getTotal() {
return this.
public void setTotal(int total) {
this.total =
public int getRecords() {
return this.
public void setRecords(int records) {
this.records =
public List getData() {
return this.
public void setData(List data) {
this.data =
项目中需要xstream.jar，自行下载。
XStreamComponent.java
package com.honzh.common.
import org.apache.commons.lang.StringU
import com.thoughtworks.xstream.XS
import com.thoughtworks.xstream.converters.C
import com.thoughtworks.xstream.io.xml.DomD
import com.thoughtworks.xstream.mapper.DefaultM
import com.thoughtworks.xstream.mapper.XStream11XmlFriendlyM
public class XStreamComponent {
private XS
public static XStreamComponent newInstance() {
XStreamComponent xmlComponent = new XStreamComponent();
xmlComponent.alias(new Class[] { PageGrid.class });
return xmlC
public XStreamComponent() {
this.xstream = new XStream(new DomDriver());
public String toXML(Object obj) {
return this.xstream.toXML(obj);
public String toPageXML(Object obj) {
registerConverter(new MapCustomConverter(new DefaultMapper(XStream11XmlFriendlyMapper.class.getClassLoader())));
return toXML(obj);
public Object fromPageXML(String xml) {
registerConverter(new MapCustomConverter(new DefaultMapper(XStream11XmlFriendlyMapper.class.getClassLoader())));
return fromXML(xml);
public Object fromXML(String xml) {
return this.xstream.fromXML(xml);
@SuppressWarnings("rawtypes")
public void processAnnotations(Class type) {
this.xstream.processAnnotations(type);
@SuppressWarnings("rawtypes")
public void processAnnotations(Class[] types) {
this.xstream.processAnnotations(types);
@SuppressWarnings("rawtypes")
public void alias(String name, Class type) {
this.xstream.alias(name, type);
@SuppressWarnings("rawtypes")
public void alias(Class[] types) {
for (Class type : types) {
String className = type.getName();
String[] classNames = StringUtils.split(className, ".");
this.xstream.alias(classNames[(classNames.length - 1)], type);
} catch (Exception ex) {
this.xstream.alias(className, type);
public void registerConverter(Converter converter) {
this.xstream.registerConverter(converter);
@SuppressWarnings("rawtypes")
public void useAttributeFor(Class definedIn, String fieldName) {
this.xstream.useAttributeFor(definedIn, fieldName);
主要将pageGrid封装为xml对象，进而传递会前端。
MapCustomConverter.java
package com.honzh.common.
import java.util.HashM
import java.util.H
import java.util.I
import java.util.M
import com.thoughtworks.xstream.converters.MarshallingC
import com.thoughtworks.xstream.converters.UnmarshallingC
import com.thoughtworks.xstream.converters.collections.AbstractCollectionC
import com.thoughtworks.xstream.io.HierarchicalStreamR
import com.thoughtworks.xstream.io.HierarchicalStreamW
import com.thoughtworks.xstream.mapper.M
public class MapCustomConverter extends AbstractCollectionConverter {
public MapCustomConverter(Mapper mapper) {
super(mapper);
@SuppressWarnings("rawtypes")
public boolean canConvert(Class type) {
return (type.equals(HashMap.class)) || (type.equals(Hashtable.class))
|| (type.getName().equals("java.util.LinkedHashMap"))
|| (type.getName().equals("sun.font.AttributeMap"));
@SuppressWarnings({ "rawtypes" })
public void marshal(Object source, HierarchicalStreamWriter writer, MarshallingContext context) {
Map map = (Map)
for (Iterator iterator = map.entrySet().iterator(); iterator.hasNext();) {
Map.Entry entry = (Map.Entry) iterator.next();
writer.startNode(entry.getKey() == null ? "null" : entry.getKey().toString());
writer.setValue(entry.getValue() == null ? "" : entry.getValue().toString());
writer.endNode();
@SuppressWarnings("rawtypes")
public Object unmarshal(HierarchicalStreamReader reader, UnmarshallingContext context) {
Map map = (Map) createCollection(context.getRequiredType());
populateMap(reader, context, map);
@SuppressWarnings({ "rawtypes", "unchecked" })
protected void populateMap(HierarchicalStreamReader reader, UnmarshallingContext context, Map map) {
while (reader.hasMoreChildren()) {
reader.moveDown();
Object key = reader.getNodeName();
Object value = reader.getValue();
map.put(key, value);
reader.moveUp();
主要将数据库中获取的hashmap转换为标准的xml格式数据。
BaseConditionVO.java
package com.honzh.common.
import java.util.HashM
import java.util.M
import org.apache.ibatis.session.RowB
* 分页查询时的参数设置类.&br&
* 1.PAGE_SHOW_COUNT──当然默认一页显示10。&br&
* 2.pageNum──第几页。&br&
* 3.numPerPage──一页显示多少，为空时，显示PAGE_SHOW_COUNT。&br&
* 4.totalCount──总共数目。totalCount/numPerPage=多少页&br&
* 5.orderField──排序的列。&br&
* 6.orderDirection──排序的方向。
public class BaseConditionVO {
public final static int PAGE_SHOW_COUNT = 50;
private int pageNum = 1;
private int numPerPage = 0;
private long totalCount = 0;
private String orderField = "";
private String orderDirection = "";
* ps : 对参数类型进行封装.
private Map&String, Object& mo = new HashMap&String, Object&();
public int getPageNum() {
return pageN
public void setPageNum(int pageNum) {
this.pageNum = pageN
public int getNumPerPage() {
return numPerPage & 0 ? numPerPage : PAGE_SHOW_COUNT;
public void setNumPerPage(int numPerPage) {
this.numPerPage = numPerP
public String getOrderField() {
return orderF
public void setOrderField(String orderField) {
this.orderField = orderF
public String getOrderDirection() {
return "desc".equals(orderDirection) ? "desc" : "asc";
public void setOrderDirection(String orderDirection) {
this.orderDirection = orderD
public long getTotalCount() {
return totalC
public void setTotalCount(long totalCount) {
this.totalCount = totalC
public int getStartIndex() {
int pageNum = this.getPageNum() & 0 ? this.getPageNum() - 1 : 0;
return pageNum * this.getNumPerPage();
public RowBounds createRowBounds() {
RowBounds ro = new RowBounds(this.getStartIndex(), this.getNumPerPage());
*: addParams
*: 添加查询条件
public void addParams(String key, Object value) {
this.getMo().put(key, value);
*: getParams
*: 获取查询条件
public Object getParams(String key) {
return this.getMo().get(key);
public Map&String, Object& getMo() {
the mo to set
public void setMo(Map&String, Object& mo) {
public String toString() {
return "条件：" + pageNum + "，" + numPerPage + "，" + totalCount + "，" + orderField + "，" + orderDirection + "，"
分页的查询数据对象，包括分页、排序、检索域。
protected BaseConditionVO getBaseConditionVOForTable() {
BaseConditionVO vo = new BaseConditionVO();
int currentPage = getParaToInt("page");
int sizes = getParaToInt("rows");
String sortOrder = getPara("sord");
String sortCol = getPara("sidx");
vo.setNumPerPage(sizes);
vo.setPageNum(currentPage);
vo.setOrderField(sortCol);
vo.setOrderDirection(sortOrder);
将jqGrid传递的参数转换为BaseConditionVO分页查询对象。
protected void renderXml(HttpServletResponse res, String xmlResponse) {
res.setCharacterEncoding("UTF-8");
res.setHeader("Content-type", "text/xml");
PrintWriter out = res.getWriter();
out.print(xmlResponse);
if (out != null) {
out.close();
} catch (IOException e) {
logger.error(e.getMessage());
logger.error(e.getMessage(), e);
将xml写入到输出流中。
定义完了这些基础的对象，接下来，我们就要着手获取数据和传递数据了。
@SuppressWarnings("rawtypes")
@RequestMapping(value = "datablePayDealOrdersList")
public void datablePayDealOrdersList(HttpServletResponse response) {
logger.debug("获取我支付的订单");
XStreamComponent xstreamComponent = XStreamComponent.newInstance();
BaseConditionVO vo = getBaseConditionVOForTable();
vo.addParams("name", getPara("name"));
logger.debug("我支付的订单查询" + vo);
List myDealOrders = dealOrderService.getByIssueUid(vo, vo.createRowBounds());
Long count = dealOrderService.searchIssueTotalCount(vo);
String xmlResponse = xstreamComponent.toPageXML(createPageGrid(myDealOrders, vo, count.intValue()));
renderXml(response, xmlResponse.replaceAll("__", "_"));
} catch (UncategorizedSQLException e) {
logger.error(e.getMessage());
logger.error(e.getMessage(), e);
renderXml(response, Constants.QUERY_ERROR);
} catch (Exception e) {
logger.error(e.getMessage());
logger.error(e.getMessage(), e);
renderXml(response, Constants.SERVER_ERROR);
我们来详细说明一下：
1. XStreamComponent.newInstance()创建xml流对象。
2. BaseConditionVO vo = getBaseConditionVOForTable();创建分页查询参数对象。
3. vo.addParams("name", getPara("name"));将检索域的值放入到查询对象中。
4. dealOrderService.getByIssueUid(vo, vo.createRowBounds());mybatis的分页查询方式，超简单，之前一个群里的朋友专门做了一种mybatis的分页组件，我觉得用原始的mybatis查询方法更有效率，之后，我们会写出对应的mybatis中xml的sql写法。
5. renderXml(response, xmlResponse.replaceAll("__", "_"));将数据写入到jsp的out输出流中。
最后，我们来介绍，通过mybatis如何获取分页数据。
mapper.java
package com.honzh.biz.database.
import java.math.BigD
import java.util.HashM
import java.util.L
import org.apache.ibatis.session.RowB
import com.honzh.common.persistence.BaseConditionVO;
public interface DealOrderMapper {
@SuppressWarnings("rawtypes")
List&HashMap& getByIssueUid(BaseConditionVO vo, RowBounds createRowBounds);
想mapper.xml传递的两个对象，分别是BaseConditionVO 还有分页的RowBounds ，xml中sql就会自动分页。
mapper.xml
id="getByIssueUid" resultType="hashmap" parameterType="map"&
select * from daa
WHERE is_delete=0
test="mo.name != null and mo.name != ''"&
and y.name like CONCAT('%','${mo.name}','%')
test="orderField !=null and orderField !=''"&
ORDER BY ${orderField}
test="orderDirection != null and orderDirection != ''"&${orderDirection}&
order by d.order_time DESC
你完全可以不关注RowBounds ，mybatis内部会自动为你封装好limit的。
检索域的name可以直接通过mo.name或得到。
orderField、orderDirection也传递过来了。
到此为止，整篇的Bootstrap嵌入jqGrid就圆满结束了，ok，使你的table牛逼起来吧！
感谢您阅读【】，如果王二的博客给您带来一丝帮助或感动，我（也就是王二）将不甚荣幸。
如果您碰巧喜欢，可以留言或者 加qq群，这将是我鼓捣更多优秀文章的最强动力。
jqgrid+bootstrap样式实践
jqgrid+bootstrap样式实践，报错数据加载，选中，删除等功能
需要引入的样式
bootstrap.min.css
ui.jqgrid.css
需要引入的JS
jquery.mi...
bootstrap 表格基于jqgrid学习
jqGrid+bootstrap使用
本文章适用于使用jqGrid+bootstrap搭建的表格。效果图如下：
需要引入的资源文件
bootstrap.min.css
ui.jqgrid-bootstrap-ui.css
jqgrid使用bootstrap样式主题
在.js文件里必须声明
styleUI : 'Bootstrap',
JqGrid一些样式修改
一、表头过长自动换行
默认参数下，jqgrid对过长的表头 会将过长的文字隐藏起来，看起来不美观，这里我需要过长的表头自动换行。
我们可以在需要表头自动换行的页面加上如下样式：/*设置表头过长时自...
解决Bootstrap jqGrid单元格不换行的问题
如题，Bootstrap jqGrid不换行的问题足足让我研究了一个多小时，内心是崩溃的。
我在百度上搜以下内容时：
答案几乎都(TM)没用，无非就是告诉我：
style=&wor...
Jqgrid教程（简单上手）
Jqgrid是一个强大的Grid布局插件，通过它能够很好的显示数据，以及进行前后台的ajax操作，使用起来特别方便，相比于easyUI的datagrid来说，更加专业，而且jqgrid除了支持jque...
没有更多推荐了，}