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)營(yíng)計(jì)劃數(shù)據(jù)，加載完成后，將JqGrid設(shè)置成本地?cái)?shù)據(jù)，這樣分頁(yè)、數(shù)據(jù)查詢都成customs。只能修改本月以后的計(jì)劃，在afterShowForm和afterclickPgButtons做驗(yàn)證，如果時(shí)間小于等于本月，這將提交按鈕設(shè)置成disabled。否則提交按鈕可以使用。在提交服務(wù)器前，需要將JqGrid的datatype設(shè)置成json,否則不會(huì)請(qǐng)求服務(wù)器。

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

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

對(duì)一些屬性做一個(gè)解釋：
datatype：如果設(shè)置成json ,那么請(qǐng)求的數(shù)據(jù)是json格式。而且每次增刪查改操作，都會(huì)請(qǐng)求服務(wù)器。
如果設(shè)置成local ,那么所有操作都將在是客服端完成，不發(fā)送到服務(wù)器。
如果設(shè)置成函數(shù)(見(jiàn)本示例)，每次獲取數(shù)據(jù)，都會(huì)經(jīng)過(guò)本函數(shù)處理一次。
可以通過(guò)調(diào)試JS代碼，來(lái)驗(yàn)證。
rownumbers: 設(shè)置成false，就不顯示行號(hào)；否則反之
loadonce: 設(shè)置成true，表示一次性導(dǎo)入數(shù)據(jù)；默認(rèn)為false
rowTotal: 表色一次性導(dǎo)入數(shù)據(jù)的最大行數(shù)。
jsonReader：配置與服務(wù)器端返回的數(shù)據(jù)做相關(guān)對(duì)應(yīng)，詳細(xì)情況見(jiàn)文檔：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
gridComplete：全部數(shù)據(jù)加載完成并且其他所有處理事件完成時(shí)觸發(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ù)加載完成時(shí)就需要觸發(fā)某個(gè)函數(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)題。但這里可以寫(xiě)一些html代碼，這是一個(gè)小技巧。
grouping ：默認(rèn)false 不分組，反之亦然。
groupingView：關(guān)于分組：請(qǐng)參考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, "銷售回款 格式錯(cuò)誤"];
if (!Regex(reg, postdata.a22))
return [false, "營(yíng)業(yè)收入 格式錯(cuò)誤"];
if (!Regex(reg, postdata.a23))
return [false, "工業(yè)總產(chǎn)值 格式錯(cuò)誤"];
if (!Regex(reg, postdata.a24))
return [false, "利潤(rùn)總額 格式錯(cuò)誤"];
if (!Regex(reg, postdata.a25))
return [false, "上交稅金 格式錯(cuò)誤"];
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("請(qǐng)選擇行");
},
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; //可¨¦以°?編À¨¤輯-
}
});
////////////////////////////////////////////////////////////////////////////////////////////////////
動(dòng)態(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è)置成本地?cái)?shù)據(jù)。
Demo下載地址 /201105/yuanma/JqGridDemo.rar

最新評(píng)論