jqgrid simple study notes_jquery

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

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

I won’t introduce the basics of JqGrid here. If you don’t know, you can check the blog garden or Google. It’s best to read the documentation. Let’s look at the renderings first:

This demo can be queried, modified, and grouped. Some basic functions such as adding and deleting can be found in JqGrid Demo.

Logical idea: Load this year's business plan data for the first time. After the loading is completed, set JqGrid to local data, so that paging and data query become customs. Only plans after this month can be modified, and verification is done in afterShowForm and afterclickPgButtons. If the time is less than or equal to this month, this will set the submit button to disabled. Otherwise the submit button works. Before submitting to the server, you need to set the datatype of JqGrid to json, otherwise the server will not be requested.

This demo only uses three static data sources in 2010, 2011, and 2012. When modifying the data, it only returns information and does not modify the data source data.

Apsx page code:

JqGrid configuration code in Javascript:

Copy code The code is as follows:

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("Error in parsing data on the client side! Please contact the administrator") ;
else
alert "Request server error! Please try again later or contact the administrator");
},
complete: function (jsondata, stat) {
if ( stat == "success") {
var thegrid = jQuery("#jqgridlist")[0],
data = eval("(" jsondata.responseText ")");
thegrid.addJSONData( data);
data = null;
jsondata = null;
}
}
});
},
colNames: ["line number", "date period ", "c_code", "Unit name", "Sales return", "Operating income", "Total industrial output value", "Total profit", "Tax paid"],
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: 'Loading...',
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: ['{0}< /b>'],
groupCollapse: false,
groupOrder: ['asc'],
groupSummary: [false],
groupDataSorted: true
},
gridComplete: function () {
$("#jqgridlist").setGridParam({ datatype: 'local' });
},
caption: "

Group: Clear group Unit nameDate period

< ;/ul> < ;/td>

"
});

Explain some attributes:
datatype: If set to json, then the requested data is in json format. Moreover, every addition, deletion, check, and modification operation will request the server.
If set to local, all operations will be completed on the customer service side and will not be sent to the server.
If set to a function (see this example), every time the data is obtained, it will be processed by this function.
You can verify it by debugging the JS code.
rownumbers: If set to false, the row number will not be displayed; otherwise, the opposite is true
loadonce: Set to true, indicating that the data is imported at one time; the default is false
rowTotal: The maximum number of rows of data to be imported at one time. .
jsonReader: The configuration corresponds to the data returned by the server. For details, see the document: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
gridComplete: Load all data Fires when complete and all other processing events have completed. English document explanation: 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. If you only need to trigger something when the data is loaded Function, you can use the loadComplete event.
loadComplete: This event is executed immediately after every server request. data Data from the response depending on datatype grid parameter
caption: String type. The title of the table. But you can write some html code here, this is a little trick.
grouping: The default is false to not group, and vice versa.
groupingView: About grouping: Please refer to JqGrid Demo, which has detailed introduction.
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("

" currentYear.toString() "

");
else
objul.append("

" (currentYear - index).toString() "

");
}
} else {
objul.append("

" currentYear.toString() "

");
}
}
$(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");
//That is, change the datatype to json before this modification, otherwise it cannot be sent back to the server
jqgrid.setGridParam({ datatype: 'json' });
jqgrid.jqGrid('appendPostData', { year: yearVal, f: "year" });//Add PostData
jqgrid.trigger("reloadGrid");//Reload JqGrid
jqgrid.jqGrid('removePostDataItem', "f");/ /Delete PostData
//////////////////////////////////////////////// ///////////////////////////////////////////////////// ////////////////////////
gridComplete: function () {
$("#jqgridlist").setGridParam({ datatype: 'local ' });
},
Set jqgrid to local data each time loading is completed.
Demo download address /201105/yuanma/JqGridDemo.rar