Jqgrid Documents: Http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
Jqgrid demo:http://trirand.com/blog/jqgrid/jqgrid.html
Jqgrid Foundation, I do not introduce here, do not know can go to visit the blog Park or Google, the best to see the document. First look at the effect of the picture:
This demo can be queried, modified, grouped. Add, delete and some other basic functions can be found in Jqgrid demo.
Logic idea: The first load of the current year's business plan data, loading completed, will Jqgrid set cost data, so paging, data query are customs. You can only modify the plan after this month, in Aftershowform and afterclickpgbuttons, and if the time is less than this month, this will set the Submit button to disabled. Otherwise the submit button can be used. Before submitting the server, you need to set the Jqgrid datatype to JSON, otherwise the server will not be requested.
This demo only made 2010, 2011, 2012 Three static data sources, modify the data only do the return information, and did not modify the data source data.
APSX page Code:
<table id= "Jqgridlist" >
</table>
<div id= "Pager" >
</div>
Configuration code for Jqgrid in javascript:
Copy Code code 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 = = && StatusText = "ParserError")
Alert ("Customer service side parsing data Error!") \ nplease contact your administrator ");
Else
Alert "Request Server Error! \ nplease try again later or contact your 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 Back", "Operating income", "gross industrial output", "Total Profit", "tax payable"],
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: ' Download in ... ',
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> group: <select id= ' Chngroup ' > <option value= ' Clear ' > Purge Group </ option> <option value= ' DWJC ' > unit name </option><option value= ' JHQJ ' > Date period </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> "
});
Make an explanation of some attributes:
DataType: If set to JSON, the requested data is in JSON format. And each addition and deletion check to change operation, will request the server.
If set to local, then all operations will be completed on the customer service side, not sent to the server.
If you set up a function (see this example), each time you get the data, it will be processed once by this function.
You can verify it by debugging the JS code.
Rownumbers: Set to False, the line number is not displayed;
Loadonce: Set to True to import data at a one-time; default to False
Rowtotal: Table Color The maximum number of rows to import data at once.
Jsonreader: Configure the data returned by the server to do the corresponding, see documentation for details: Http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
Gridcomplete: triggered when all data loading is complete and all other processing events are complete. The English document explains: This fires the ' data is ' loaded into the grid and all other processes are complete. Also the event fires independent from the datatype parameter, sorting and etc. If you just need to trigger a function when the data is loaded, you can use Lo Adcomplete 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 here you can write some HTML code, which is a little trick.
Grouping: Default false is not grouped, and vice versa.
Groupingview: About grouping: Please refer to Jqgrid Demo, which has detailed introduction.
Editurl: Edit Data Send URL
/////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////
JQuery ("#jqgridlist"). Jqgrid (' Navgrid ', ' #pager ', {edit:false, Add:false, Del:false}, {}, {}, {}, {Multiplesearch:t Rue, 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*) |" (\\.\\d{1,2})? $ ";
if (! Regex (Reg, POSTDATA.A21))
return [False, "Sales back format error"];
if (! Regex (Reg, Postdata.a22))
return [False, "Operating income format error"];
if (! Regex (Reg, Postdata.a23))
return [False, "wrong industrial output value format"];
if (! Regex (Reg, Postdata.a24))
return [FALSE, "gross profit format error"];
if (! Regex (Reg, Postdata.a25))
return [False, "submit tax format error"];
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 ("Please select Rows");
},
Position: "A",
Title: "Modify",
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; No, but ¨¦ to ° ਤ series-
Else
return true; Can ¨¦ to ° ਤ series-
}
});
////////////////////////////////////////////////////////////////////////////////////////////////////
Dynamic Change grouping
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 Control Code
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");
That is, before the modification of the datatype to JSON, otherwise can not 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 '});
},
The cost data is set Jqgrid each time the load is completed.
Demo Download Address/201105/yuanma/jqgriddemo.rar
