Supports multiple types of data sets to cooperate as data sources
jqGrid can bind three types of data: XML, JSON and arrays. Using different data types is mainly to set the datatype attribute, its values are 'xml', 'json', 'local' (array)
$("#grid1").jqgrid(........datatype: "xml",.......);The following lists the formats of various data types
XML format:
<rows><page></page><total></total><records></records><row id="rowid"><cell>value1</cell>.........<cell>valueN</cell></row></rows>
json format
{"page":"Page number","rows":[{name1:'value1',name2:'value2',....nameN:'valueN'},.... {..} ], "total": record count, "records": total record count}
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 attribute
$("#grid1").jqgrid(......data:mydata, datatype:'local',.......);The function of statistical operations
Set footerrow to true and bind 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 });}When statistics, use the getCol method. The first parameter is the name value of colMode, and the second parameter is set to false. Otherwise, an array will be returned instead of a data. The third is to set the statistics method, including 'sum', 'avg' and 'count'.
Sort
Just click on the column's title and sort the column in ascending or descending order. Set whether the column allows sorting, set sortable in the column properties. At the same time, for different data types, the corresponding sorttype needs to be set, including int/integer integer, float/number/currency floating point type, date date, text text, and function define functions to implement custom sorting rules.
$("#grid1").jqgrid( ........ colModel: [......{ name: 'id', index: 'id', width: 60, myexport: true, editable: true , sorttype: "int", sortable: true},............],......);Grouping
var mydata = [{id:"1",invdate:"2010-05-24",name:"test",note:"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:"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:"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:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210 .00"},{id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},{id:"13",invdate:"2007-09-01",name:"test3",note:"no te3",amount:"400.00",tax:"30.00",total:"430.00"},{id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},{id:"15",i nvdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},{id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400 .00",tax:"30.00",total:"430.00"},{id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},{id:"18",invdate:"2007-10- 03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},{id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00" ,total:"430.00"},{id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},{id:"22",invdate:"2007-10-02",name:"test2" ,note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},{id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} ,{id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},{id:"25",invdate:"2007-10-05",name:"test2",note:"note2",am ount:"300.00",tax:"20.00",total:"320.00"},{id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},{id:"27",invdat e:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},{id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",ta x:"20.00",total:"320.00"},{id:"29",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:['Inv 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:100, 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,sortname: 'name',grouping:true,groupingView : {groupField : ['name']},caption: "Grouping Array Data"});There are also more complicated sorting, so let’s take a look at jqGrid Demos!
filter
jqGrid filtering is not filtering content in grid, but actually filtering the data in the database.
html:
<table id="s2list"></table><div id="s2pager"></div>
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(){ mygrid[0].clearToolbar() }}); jQuery("#s3list").jqGrid('filterToolbar');Add, delete, modify and check toolbar and pagination bar
jqGrid comes with a paging bar, where you can add, modify, delete and query buttons.
Add one more layer to html, and this layer stores the paging bar:
<div id="pager"></div>$("#grid1").jqgrid(......pager:"#pager", //This property can also set the optional page size rowList: [10, 20, 30],......);//The edit, add, etc. here correspond to the editing and adding buttons. By setting the boolean value, it determines whether to display jQuery("#grid1").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: true, refresh: true});//or use this form jQuery("#grid1").jqGrid('navGrid', '#pager', {}, //options {height: 280, reloadAfterSubmit: false }, // edit options {height: 280, reloadAfterSubmit: false }, // add options {reloadAfterSubmit: false }, // del options {} // search options );Remember to assign the editable value to true for editable columns in colModel before editing.
Read data on pages
Since the above mentioned pagination, the following introduces another pagination method, which is to turn pages through scroll bars. In this pagination method, all the data in the database is not read out and filled into the grid at once, but is used to obtain which page of data you are currently browsing through the scroll bar, and then that part of the data is read from the database.
$("#grid1").jqgrid(......// Only after setting this will it read data according to the scroll paging scroll: 1, //Set the page size rowNum: 10,......);The following example only uses local data, which also achieves the effect of scrolling and turning pages.
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"});Father and son table
Subtables can be used by the following settings
$("#grid1").jqgrid(......//Enable subtable subGrid: true,subGridUrl: '.........',//Set the attributes of subtable subGridModel: [{name : ['name1','name2',......,'nameN'], width : [width1,width2,......,widthN] } ],.......);The settings of subtables here are only the most basic. For more information about attributes, please refer to http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid
Get/Set cell value
To get the value of a certain cell, getCell(rowid, iCol) is called. iCol can be either the position index currently listed in the colModel or the name value. Note: This method cannot be used when editing rows or cells. At this time, the returned value is not the changed value, but the original value.
Setting the value of a certain cell calls setCell(rowid,colname, data, class, properties). rowid: current row id; colname: column name, or column position index, starting from 0; data: change the content of the cell, and if it is empty, it will not be updated; class: if it is string, it will be added to the cell's css using the addClass method, and if it is array, it will be directly added to the style property; properties: set the cell property colModel.
Of course, you can also get/Set rows or columns. Here you can check more methods for get/set/add http://www.trirand.com/jqgridwiki/doku.php?
id=wiki:methods
Data Verification
By setting the editrules property of colModel, you can verify the input data
jQuery("#grid_id").jqGrid({...colModel: [ ... {name:'price', ..., edittrules:{edithidden:true, required:true......}, editable:true },...]...});Below are the available verification options
Set striped columns
jQuery("#ghcs").jqGrid('setGroupHeaders', { //Set whether to enable colSpan effect usingColSpanStyle: false, groupHeaders:[{ startColumnName: 'colName', //The first column name of the merge column group numberOfColumns: number, //The number of merge column titleText: 'title' //The title of merge column}, .....] }Editor
jqGrid's template column comes with some very basic editors, including: 'text' single-line text box, 'textarea' multi-line text box, 'select' drop-down box, 'checkbox' checkbox, 'password' password box, 'button' button, 'image' picture button, 'file' file upload box and 'custom' custom editor.
Set edittype in colModel
jQuery("#grid_id").jqGrid({...colModel: [ ... {name:'price', ..., editable:true, edittype:'text',editoptions: {size:10, maxlength: 15}......}, ... ] ... });The editoption is some settings for the editor, and the text box can set size, maxlength, etc.; the check box can set value;
ditoptions: { value:"Yes:No" }
The drop-down box is in this form
editoptions: { value: "val1:text1; val2:text2; val3:text3" }
For more information, please refer to http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#edittype
Template column calls other editors
The editor introduced above only uses the form elements of html, and the one introduced below is calling the plug-in.
<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>Here, the My97DatePicker plugin is called as the calendar editor.
If you want to place multiple controls in a template column, you can use the following methods
jQuery("#grid_id").jqGrid({...afterInsertRow: function (rowid, aData) {var controls=" "; //Control placed in the template......$("#grid_id").jqGrid('setCell', rowid, 'tag', controls);} ... });This is actually achieved by editing its html in the grid cell.
Move cell selection imitation Excel
After setting the cell editing mode, you can jump to the cell you need to edit through the up, down, left and right navigation keys, press Enter to enter to enter the editing state, press Esc key to not save the changes, press Enter to save the changes
jQuery("#grid_id").jqGrid({...cellEdit:true,cellsubmit:'clientArray', //Define the default value of the cell content storage location 'remote' ... });The above is a summary of the usage of jqGrid introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!