JqGrid文檔：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs

JqGrid Demo：http://trirand.com/blog/jqgrid/jqgrid.html#t107

JqGrid的基礎(chǔ)，我這里就不做介紹了，不知道的可以去看看博客園或Google，最好去看文檔。先看效果圖：

本Demo可以查詢、修改、分組。新增、刪除等一些基本功能都可以去JqGrid Demo中找到。

邏輯思路：第一次加載本年度的經(jīng)營計劃數(shù)據(jù)，加載完成后，將JqGrid設(shè)置成本地數(shù)據(jù)，這樣分頁、數(shù)據(jù)查詢都成customs。只能修改本月以后的計劃，在afterShowForm和afterclickPgButtons做驗證，如果時間小于等于本月，這將提交按鈕設(shè)置成disabled。否則提交按鈕可以使用。在提交服務(wù)器前，需要將JqGrid的datatype設(shè)置成json,否則不會請求服務(wù)器。

本Demo只做了2010、2011、2012年三個靜態(tài)數(shù)據(jù)源，修改數(shù)據(jù)只做了返回信息，并沒修改數(shù)據(jù)源數(shù)據(jù)。

Apsx頁面代碼：
<table id="jqgridlist">
</table>
<div id="pager">
</div>
Javascript中JqGrid的配置代碼：

對一些屬性做一個解釋：
datatype：如果設(shè)置成json ,那么請求的數(shù)據(jù)是json格式。而且每次增刪查改操作，都會請求服務(wù)器。
如果設(shè)置成local ,那么所有操作都將在是客服端完成，不發(fā)送到服務(wù)器。
如果設(shè)置成函數(shù)(見本示例)，每次獲取數(shù)據(jù)，都會經(jīng)過本函數(shù)處理一次。
可以通過調(diào)試JS代碼，來驗證。
rownumbers: 設(shè)置成false，就不顯示行號；否則反之
loadonce: 設(shè)置成true，表示一次性導(dǎo)入數(shù)據(jù)；默認(rèn)為false
rowTotal: 表色一次性導(dǎo)入數(shù)據(jù)的最大行數(shù)。
jsonReader：配置與服務(wù)器端返回的數(shù)據(jù)做相關(guān)對應(yīng)，詳細(xì)情況見文檔：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
gridComplete：全部數(shù)據(jù)加載完成并且其他所有處理事件完成時觸發(fā)。英文文檔解釋：This fires after all the data is loaded into the grid and all other processes are complete. Also the event fires independent from the datatype parameter and after sorting paging and etc.如果你只是數(shù)據(jù)加載完成時就需要觸發(fā)某個函數(shù)，可以采用loadComplete事件。
loadComplete：This event is executed immediately after every server request. data Data from the response depending on datatype grid parameter
caption：字符串類型。表格的標(biāo)題。但這里可以寫一些html代碼，這是一個小技巧。
grouping ：默認(rèn)false 不分組，反之亦然。
groupingView：關(guān)于分組：請參考JqGrid Demo，里面有詳細(xì)介紹。
editurl：編輯數(shù)據(jù)發(fā)送Url
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
jQuery("#jqgridlist").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false }, {}, {}, {}, { multipleSearch: true, closeAfterSearch: true, closeOnEscape: true })
.navButtonAdd("#pager", {
caption: "",
buttonicon: "ui-icon-pencil",
onClickButton: function () {
var gr = jQuery("#jqgridlist").jqGrid("getGridParam", "selrow");
if (gr != null)
jQuery("#jqgridlist").jqGrid("editGridRow", gr, {
afterclickPgButtons: function (whichbutton, formid, rowid) {
var ret = jQuery("#jqgridlist").jqGrid('getRowData', rowid),
objYear = ret.JHQJ;
if (!ValidateDate(objYear)) jQuery("#sData").attr('disabled', 'disabled');
else
jQuery("#sData").removeAttr('disabled');
},
afterShowForm: function (formid) {
var jqgrid = jQuery("#jqgridlist");
var rowid = jqgrid.jqGrid("getGridParam", "selrow"),
ret = jqgrid.jqGrid('getRowData', rowid);
if (!ValidateDate(ret.JHQJ)) jQuery("#sData").attr('disabled', 'disabled');
else
jQuery("#sData").removeAttr('disabled');
},
beforeSubmit: function (postdata, formid) {
var reg = "^(([1-9]\\d*)|0)(\\.\\d{1,2})?$";
if (!Regex(reg, postdata.a21))
return [false, "銷售回款 格式錯誤"];
if (!Regex(reg, postdata.a22))
return [false, "營業(yè)收入 格式錯誤"];
if (!Regex(reg, postdata.a23))
return [false, "工業(yè)總產(chǎn)值 格式錯誤"];
if (!Regex(reg, postdata.a24))
return [false, "利潤總額 格式錯誤"];
if (!Regex(reg, postdata.a25))
return [false, "上交稅金 格式錯誤"];
else
return [true, ""];
},
afterSubmit: function (response, postdata) {
var json = response.responseText; //format is {status:"success/error",msg:""}
var result = eval("(" + json + ")"), successs = false;
if ("success" == result.status) {
successs = true;
$("#FormError td").html(result.msg);
$("#FormError").show();
}
return [successs, result.msg, ""];
}
});
else
alert("請選擇行");
},
position: "first",
title: "修改",
cursor: "pointer"
}).filterToolbar({ stringResult: true, autosearch: true, searchOnEnter: false, groupOp: "AND" });
function Regex(reg, val) {
var patt = new RegExp(reg, "g");
return patt.test(val);
}
function ValidateDate(objYear) {
var year = null,
month = null,
currentYear = null,
date = new Date();
if (objYear.length == 4) {
year = parseInt(objYear.substr(0, 4));
currentYear = parseInt(date.getFullYear());
} else {
year = parseInt(objYear.substr(0, 6))
month = (date.getMonth() + 1).toString();
month = month.length == 1 ? "0" + month : month;
currentYear = parseInt(date.getFullYear() + month);
}
if (year <= currentYear)
return false; //不?可¨¦以°?編À¨¤輯-
else
return true; //可¨¦以°?編À¨¤輯-
}
});
////////////////////////////////////////////////////////////////////////////////////////////////////
動態(tài)改變分組
jQuery("#chngroup").live("change", function () {
var vl = $(this).val(); if (vl) {
if (vl == "clear") {
jQuery("#jqgridlist").jqGrid('groupingRemove', true);
} else {
jQuery("#jqgridlist").jqGrid('groupingGroupBy', vl);
}
}
});
//////////////////////////////////////////////////////////////////////////////////////////////////////////
Slider 控制代碼
function CreateYearList() {
var currentYear = parseInt(new Date().getFullYear());
var mulitYear = currentYear - 1990;
var objul = $(".slider_context ul");
if (mulitYear >= 0) {
for (var index = -1, len = mulitYear; index <= len; index++) {
if (currentYear - index == currentYear)
objul.append("<li class='selected'>" + currentYear.toString() + "</li>");
else
objul.append("<li>" + (currentYear - index).toString() + "</li>");
}
} else {
objul.append("<li class='selected'>" + currentYear.toString() + "</li>");
}
}
$(function () {
CreateYearList();
$(".slider").silder({
speed: "normal",
slideBy: 2
});
});
$(".slider_context li").live("click", function () {
$.each($(".slider_context li"), function (id, item) {
$(this).removeClass('selected');
});
$(this).addClass('selected');
var yearVal = $(this).html();
var jqgrid = $("#jqgridlist");
jqgrid.setGridParam({ datatype: 'json' });
jqgrid.jqGrid('appendPostData', { year: yearVal, f: "year" });
jqgrid.trigger("reloadGrid");
jqgrid.jqGrid('removePostDataItem', "f");
});
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var jqgrid = $("#jqgridlist");
//即本次修改前 先將datatype修改成json,否則不能回發(fā)到服務(wù)器
jqgrid.setGridParam({ datatype: 'json' });
jqgrid.jqGrid('appendPostData', { year: yearVal, f: "year" });//添加PostData
jqgrid.trigger("reloadGrid");//重新加載JqGrid
jqgrid.jqGrid('removePostDataItem', "f");//刪除PostData
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
gridComplete: function () {
$("#jqgridlist").setGridParam({ datatype: 'local' });
},
每次加載完成 就將jqgrid設(shè)置成本地數(shù)據(jù)。
Demo下載地址 /201105/yuanma/JqGridDemo.rar