Jqgrid Usage Summary (All Classics) _jquery

Supports multiple types of data collections as data sources

Jqgrid can bind three types of data: Xml,json and array. The main use of different data types is to set the DataType property, which is the value of ' xml ', ' json ', ' local ' (array)

$ ("#grid1"). Jqgrid (
...) DataType: "xml",
...

The format of various data types is listed below

　　XML format:　

<rows>
<page></page>
<total></total>
<records></records >
<row id= "rowID" >
<cell>value1</cell> ...
<cell>valueN</cell>
</row>
</rows>

　JSON format

{"page": "Number", "Rows": [{name1: ' value1 ', name2: ' value2 ',..... Namen: ' Valuen '},.... {....} ], "Total": Number of records, "records": Number of records}

Array format

var datas=[
{name1: ' value1 ', name2: ' value2 ',..... Namen: ' Valuen '},
... 
. {....} 
];
Add data to Jqgrid
for (var i = 0; I <= mydata.length i++) {
jQuery ("#grid1"). Jqgrid (' Addrowdata ', i + 1, mydata[ I]);

or set the Data property

$ ("#grid1"). Jqgrid (
...) Data:mydata, datatype: ' local ',
...

The function of statistical operations

Set Footerrow to True to bind the Gridcomplete event.

$ ("#grid1"). Jqgrid (
...) Footerrow:true,
Gridcomplete:completemethod,
...);
function Completemethod ()
{
var sum_amount=$ ("#grid1"). Getcol (' Amount ', false, ' sum ');
var sum_tax=$ ("#grid1"). Getcol (' tax ', false, ' sum ');
var sum_total=$ ("#grid1"). Getcol (' Total ', false, ' sum ');
$ ("#grid1"). Footerdata (' Set ', {name: ' total: ', Amount:sum_amount, Tax:sum_tax, total:sum_total});
}

Statistics use the Getcol method, the first parameter is Colmode's name value, the second is set to false, otherwise it returns an array instead of a data, and the third is to set the statistics, with ' Sum ', ' avg ' and ' count '.

Sort

You can sort the column in ascending or descending order as long as you click the header of the column. Sets whether the column allows sorting, sets the sortable in the column's properties, and also sets its corresponding sort type SortType for different data types, Int/integer integral type, float/number/currency floating-point type, date day , text text, function definition functions to implement a custom collation.

$ ("#grid1"). Jqgrid (
...) Colmodel: [
...
] {name: ' id ', index: ' id ', width:60, Myexport:true, Editable:true, sorttype: ' int ', sortable:true},
...
],
........);

Group

var MyData = [{id: "1", Invdate: "2010-05-24", Name: "Test", Note: "*", Tax: "10.00", Total: "2111.00"}, {id: "2", Invdate: " 2010-05-25 ", Name:" Test2 ", note:" Note2 ", Tax:" 20.00 ", Total:" 320.00 "}, {ID:" 3 ", Invdate:" 2007-09-01 ", Name:" Test3 ", Note: "Note3", Tax: "30.00", Total: "430.00"}, {ID: "4", Invdate: "2007-10-04", Name: "Test", "note", Tax: "10.00", Total: "210.00"}, {ID: "5", Invdate: "2007-10-05", Name: "Test2", note: "Note2", Tax: "20.00", Total: "320.00"}, {ID: "6", Invdate: "2007-09-06", Name: "Test3", note: "Note3", Tax: "30.00", Total: "430.00"}, {ID: "7", Invdate: "2007-10-04", Name: " Test ", note:" The note ", Tax:" 10.00 ", Total:" 210.00 "}, {ID:" 8 ", Invdate:" 2007-10-03 ", Name:" Test2 ", note:" Note2 ", Amount:" 300.00 ", Tax:" 21.00 ", Total:" 320.00 "}, {ID:" 9 ", Invdate:" 2007-09-01 ", Name:" Test3 ", note:" Note3 ", Amount:" 400.00 ", tax : "30.00", Total: "430.00"}, {ID: "One", Invdate: "2007-10-01", Name: "Test", note: "The note", Amount: "200.00", Tax: "10.00", Total: "210.00"}, {ID: "A", Invdate: "2007-10-02", Name: "Test2", note: "Note2", Amount: "300.00", Tax: "20.00", Total: "
320.00 "},{ID: "invdate": "2007-09-01", Name: "Test3", note: "Note3", Amount: "400.00", Tax: "30.00", Total: "430.00"}, {ID: "14", Invdate: "2007-10-04", Name: "Test", note: "The note", Amount: "200.00", Tax: "10.00", Total: "210.00"}, {id: "", Invdate: " 2007-10-05 ", Name:" Test2 ", note:" Note2 ", Amount:" 300.00 ", Tax:" 20.00 ", Total:" 320.00 "}, {id:" ", Invdate:" 2007-09-06 ", Name:" Test3 ", note:" Note3 ", Amount:" 400.00 ", Tax:" 30.00 ", Total:" 430.00 "}, {id:" ", Invdate:" 2007-10-04 ", Name:" Test ", note:" The note ", Amount:" 200.00 ", Tax:" 10.00 ", Total:" 210.00 "}, {ID:" A ", Invdate:" 2007-10-03 ", Name:" Test2 ", note: "Note2", Amount: "300.00", Tax: "20.00", Total: "320.00"}, {ID: "A", Invdate: "2007-09-01", Name: "Test3", note: "Note3", Amount: "400.00", Tax: "30.00", Total: "430.00"}, {ID: "A", Invdate: "2007-10-01", Name: "Test", note: "The note", Amount: " 200.00 ", Tax:" 10.00 ", Total:" 210.00 "}, {id:" All ", Invdate:" 2007-10-02 ", Name:" Test2 ", note:" Note2 ", Amount:" 300.00 ", Tax: "20.00", Total: "320.00"}, {ID: "A", Invdate: "2007-09-01", Name: "Test3", note: "Note3", Amount: "400.00", Tax: "30.00 ", Total:" 430.00"}, {ID:" 25 ", Invdate:" 2007-10-04 ", Name:" Test ", note:" The note ", Amount:" 200.00 ", Tax:" 10.00 ", Total:" 210.00 "} Invdate: "2007-10-05", Name: "Test2", note: "Note2", Amount: "300.00", Tax: "20.00", Total: "320.00"}, {id: "", Invdate: " 2007-09-06 ", Name:" Test3 ", note:" Note3 ", Amount:" 400.00 ", Tax:" 30.00 ", Total:" 430.00 "}, {id:" ", Invdate:" 2007-10-04 ", Name:" Test ", Note:" Amount "," 200.00 ", Tax:" 10.00 ", Total:" 210.00 "}, {ID:" A ", Invdate:" 2007-10-03 ", Name:" Test2 ", note:" Note2 ", Amount:" 300.00 ", Tax:" 20.00 ", Total:" 320.00 "}, {id:" I ", Invdate:" 2007-09-01 ", Name:" Test3 ",
Note: "Note3", Amount: "400.00", Tax: "30.00", Total: "430.00"}]; JQuery ("#list48"). Jqgrid ({data:mydata, datatype: "Local", Height: ' Auto ', rownum:30, rowlist: [10,20,30], colnames:[' I NV No ', ' Date ', ' Client ', ' Amount ', ' Tax ', ' total ', ' Notes ', colmodel:[{name: ' id ', index: ' id ', width:60, sorttype: ' int '} , {name: ' invdate ', index: ' Invdate ', width:90, SortType: "Date", Formatter: "Date"}, {name: ' name ', index: ' name ', width : Editable:true}, {name: ' Amount ', Index: ' Amount ', width:80, align: "Right", SortType: "Float", Formatter: "Number", Editable:true}, {name: ' tax ', Index: ' tax ', WIDTH:80, align: "Right", SortType: "Float", editable:true}, {name: ' Total ', index: ' Total ', width:80,align: ' Right ', SortType: "Float"}, {name: ' Note ', index: ' Note ', width:150, sortable:false}], pager: "#plist48", Viewrecords:true, Sortn  Ame: ' name ', Grouping:true, Groupingview: {groupfield: [' name ']}, Caption: "Grouping Array Data"});

There is a more complex sort, that is still on Jqgrid demos look at it!

Screening

Jqgrid filter is not in the grid inside the content to filter, in fact, the data in the database filter query.

Html:

<table id= "S2list" ></table>

Javascript:

JQuery ("#s3list"). Jqgrid (' Navgrid ', ' #s3pager ', {edit:false,add:false,del:false,search:false,refresh:false}); JQuery ("#s3list"). Jqgrid (' Navbuttonadd ', "#s3pager", {caption: "Toggle", Title: "Toggle Search Toolbar", Buttonicon: ' Ui-icon-pin-s ', onclickbutton:function () {Mygrid[0].toggletoolbar ()}}); JQuery ("#s3list"). Jqgrid (' Navbuttonadd ', ' #s3pager ', {caption: "clear", Title: "Clear Search", Buttonicon: ' Ui-icon-refresh ', onclickbutton:function () {Mygr Id[0].cleartoolbar ()}); JQuery ("#s3list"). Jqgrid (' Filtertoolbar ');

Check toolbar and page bar

Jqgrid comes with a page bar where you can add additions, modifications, deletions, and query buttons on the page bar.

Add one more layer to the HTML, and this layer holds the page bar:

<div id= "Pager" ></div>
$ ("#grid1"). Jqgrid
Pager: "#pager",//through this property you can also set the optional page size rowlist: [A, M],
...
); /Edit,add here is the corresponding edit New button, to determine whether to display
jQuery ("#grid1") by setting a Boolean value. Jqgrid (' Navgrid ', ' #pager ', {edit:true, add:true, Del : True, Search:true, refresh:true});/or in this form 
jQuery ("#grid1"). Jqgrid (' Navgrid ', ' #pager ',
{},//options
    {height:280, reloadaftersubmit:false},//Edit options
{height:280, reloadaftersubmit:false},//AD D options
{Reloadaftersubmit:false},//Del options
{}//Search options
);

Remember to edit the editable of the column that you want to edit in Colmodel to be true.

Paging Read Data

Now that you've mentioned paging, here's another way to page through the scroll bar. In this paging, all the data in the database is not read out of the way to fill in the grid, but rather through the position of the scroll bar to get the current page of the data, before reading that part of the data from the database.

$ ("#grid1"). Jqgrid (
...) Set this to read the data scroll:1 according to the scrolling paging
,
//Set the size of the page
rownum:10,
...
);

The following example uses only local data, and it also implements scrolling page effects

JQuery ("#scrolling"). Jqgrid ({
scroll:1,
datatype: "Local",
Data:mydata,
height:100,
width:600,
colnames: [' Index ', ' Name ', ' Code '],
colmodel: [
{Name: ' id ', Index: ' ID ', width:65},
{ Name: ' Name ', index: ' Name ', width:150},
{name: ' Note ', index: ' Note ', width:100}
],
rownum:5,
Gridview:true,
Pager: ' #pscrolling ',
sortname: ' item_id ',
viewrecords:true,
sortorder: "ASC",
caption: "Loading data while scrolling"

Parent-child table

You can use child tables with the following settings

$ ("#grid1"). Jqgrid (
...) Enable child table
Subgrid:true,
subgridurl: ' ... ',
//Set the properties of the child table
Subgridmodel: [{
name: [' name1 ', '] Name2 ',......, ' Namen '], 
width: [width1,width2,....., Widthn]},
...
);

The settings for the child table are only the most basic, and more properties can be found in the data Http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid

Value of cell Get/set

Gets the value of a cell to invoke Getcell (rowID, Icol). Icol can be either the position index or the name value of the current column in Colmodel. Note: You cannot use this method when you are editing a row or cell, but you are returning the original value instead of the changed value.

Set the value of a cell to call Setcell (Rowid,colname, Data, class, properties). ROWID: Current row id;colname: Column name, also can be the index of the position of the column, starting from 0; Data: Changes the contents of a cell, and does not update if it is empty; class: If string, it is added to the cell's CSS using the AddClass method. An array is added directly to the Style property; properties: Sets the cell property Colmodel.

Of course, you can also get/set rows or columns, where you can look for more get/set/add methods http://www.trirand.com/jqgridwiki/doku.php?

Id=wiki:methods

Data validation

You can validate the input data by setting the Colmodel Editrules property

JQuery ("#grid_id"). Jqgrid ({
...
) Colmodel: [ 
... 
] {name: ' Price ', ..., editrules:{edithidden:true, required:true ...}, editable:true}, ...
]
...
});

The following are the available validation options

To set a striped column

JQuery ("#ghcs"). Jqgrid (' setgroupheaders ', {///Set column header to enable colspan effect
Usecolspanstyle:false, 
groupheaders:[
{　　　　Startcolumnname: ' colname ',//Merge column group's first column name Numberofcolumns:number,//The number of merged columns TitleText: ' title '/merge column headings}, ........
] 
}

Editor

Jqgrid's template columns come with some very basic editors, including: ' Text ' single-line text boxes, ' textarea ' multi-line text boxes, ' Select ' dropdown boxes, ' checkbox ' checkbox, ' Password ' Password box, ' button ' buttons, ' Image ' picture buttons, ' file ' files upload box and custom editor for ' Custom '.

Setting EditType in Colmodel can

JQuery ("#grid_id"). Jqgrid ({
...
) Colmodel: [ 
... 
] 　　{name: ' Price ', ..., editable:true, edittype: ' Text ', editoptions: {size:10, maxlength:15} ...] ... });

Where Editoption is the editor of some settings, text boxes can be set size,maxlength, etc., check box can set value;

Ditoptions: {value: "Yes:no"}

The dropdown box in this form

Editoptions: {value: "VAL1:TEXT1; VAL2:TEXT2; Val3:text3 "}

More information see Http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#edittype

Template columns Call other editors

The editor described above simply uses HTML form elements, and the invocation plug-in is described below.

<script src= "Js/my97datepicker/wdatepicker.js" type= "Text/javascript" ></script>
<script type= " Text/javascript ' >
function Initdatepicker (CL) {
$ (CL). Click (function () {
wdatepicker ();
});
....
JQuery ("#grid_id"). Jqgrid ({
...
) Colmodel: [ 
... 
]　　 {name: ' Date ', ..., editable:true, edittype: ' Text ', editoptions: {datainit:initdatepicker} ...} 
],
... 
};
.......
</script>

This calls the My97datepicker plug-in as the calendar editor.

If you want to place multiple controls in a template column, you can use a way

JQuery ("#grid_id"). Jqgrid ({
...
) Afterinsertrow:function (rowID, adata) {
var controls= ""; Controls placed in the template ....
$ ("#grid_id"). Jqgrid (' Setcell ', rowid, ' tag ', controls);
... 
});

This is actually done in the grid cell by editing its HTML.

Move selection cells by imitating Excel

After you set cell editing mode, you can jump to the cell you want to edit by clicking the navigation key up or down, press ENTER to enter the edit state, press ESC to save the changes, press ENTER to save the changes

JQuery ("#grid_id"). Jqgrid ({
...
) Celledit:true,
cellsubmit: ' Clientarray ',//defines the location where cell content is saved the default value is ' Remote '
... 
};

The above is a small set to introduce the Jqgrid usage summary, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!