DIV CSS 佈局教程網

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

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

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

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

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

本Demo只做了2010、2011、2012年三個靜態數據源，修改數據只做了返回信息，並沒修改數據源數據。

Apsx頁面代碼：
<table id="jqgridlist">
</table>
<div id="pager">
</div>
Javascript中JqGrid的配置代碼：
代碼如下:
jQuery("#jqgridlist").jqGrid({ url: 'DataHandler.ashx',
datatype: function (pdata) {
$.ajax({ url: 'DataHandler.ashx',
dataType: "json", type: "post",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
data: pdata,
error: function (data, status, statusText) {
if (!(status == 200 && statusText == "parsererror"))
alert("客服端解析數據錯誤！\n請與管理員聯系");
else
alert"請求服務器錯誤！\n請稍後再試或與管理員聯系");
},
complete: function (jsondata, stat) {
if (stat == "success") {
var thegrid = jQuery("#jqgridlist")[0],
data = eval("(" + jsondata.responseText + ")");
thegrid.addJSONData(data);
data = null;
jsondata = null;
}
}
});
},
colNames: ["行號", "日期期間", "c_code", "單位名稱", "銷售回款", "營業收入", "工業總產值", "利潤總額", "上交稅金"],
colModel: [{ name: "ROWNUM", index: "ROWNUM", editable: false, summaryType: 'count',
summaryTpl: '({0}) total'
},
{ name: "JHQJ", index: "JHQJ", editable: true, stype: 'text', search: true, searchoptions: { sopt: ['eq'] },
editoptions: { style: "border:0; background-color:transparent;" }
},
{ name: "C_CODE", index: "C_CODE", sortable: false, editable: true, search: false, hidden: true,
editrules: { edithidden: false }, editoptions: { style: "border:0; background-color:transparent;" }
},
{ name: "DWJC", index: "DWJC", editable: true, search: true, stype: 'text', searchoptions: { sopt: ['cn'] },
editoptions: { style: "border:0; background-color:transparent;" }
},
{ name: "a21", index: "a21", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a22", index: "a22", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a23", index: "a23", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a24", index: "a24", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
},
{ name: "a25", index: "a25", editable: true, search: true, editrules: { number: true },
formatter: 'currency', summaryType: 'sum'
}
],
height: 400,
autowidth: true,
width: 700,
rowNum: 70,
rowTotal: 1300,
rowList: [13, 70, 100],
rownumbers: false,
loadonce: true,
loadtext: '載入中...',
forceFit: true,
gridview: true,
pager: '#pager',
sortname: 'ROWNUM',
scroll: 0,
page: 1,
viewrecords: true,
editurl: 'DataHandler.ashx',
sortorder: "asc",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
grouping: false,
groupingView: {
groupField: ['DWJC'],
groupColumnShow: [true],
groupText: ['<b>{0}</b>'],
groupCollapse: false,
groupOrder: ['asc'],
groupSummary: [false],
groupDataSorted: true
},
gridComplete: function () {
$("#jqgridlist").setGridParam({ datatype: 'local' });
},
caption: "<table><tr><td>分組:<select id='chngroup'> <option value='clear'>清除分組</option> <option value='DWJC'>單位名稱</option><option value='JHQJ'>日期期間</option></select></td><td><div class='slider'><div class='slider_context'><ul></ul></div><div class='btn_pre'> </div><div class='btn_next'> </div></div></div></td></tr></table>"
});

對一些屬性做一個解釋：
datatype：如果設置成json ,那麼請求的數據是json格式。而且每次增刪查改操作，都會請求服務器。
如果設置成local ,那麼所有操作都將在是客服端完成，不發送到服務器。
如果設置成函數(見本示例)，每次獲取數據，都會經過本函數處理一次。
可以通過調試JS代碼，來驗證。
rownumbers: 設置成false，就不顯示行號；否則反之
loadonce: 設置成true，表示一次性導入數據；默認為false
rowTotal: 表色一次性導入數據的最大行數。
jsonReader：配置與服務器端返回的數據做相關對應，詳細情況見文檔：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
gridComplete：全部數據加載完成並且其他所有處理事件完成時觸發。英文文檔解釋：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.如果你只是數據加載完成時就需要觸發某個函數，可以采用loadComplete事件。
loadComplete：This event is executed immediately after every server request. data Data from the response depending on datatype grid parameter
caption：字符串類型。表格的標題。但這裡可以寫一些html代碼，這是一個小技巧。
grouping ：默認false 不分組，反之亦然。
groupingView：關於分組：請參考JqGrid Demo，裡面有詳細介紹。
editurl：編輯數據發送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, "營業收入 格式錯誤"];
if (!Regex(reg, postdata.a23))
return [false, "工業總產值 格式錯誤"];
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; //可¨¦以°?編À¨¤輯-
}
});
////////////////////////////////////////////////////////////////////////////////////////////////////
動態改變分組
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,否則不能回發到服務器
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設置成本地數據。
Demo下載地址 /201105/yuanma/JqGridDemo.rar