1. First look at the effect
2.html Code
<table id= "Grid-table" ></table>
3. In the $ (function () {...} method, write the following method, populate the Jqgrid with JSON data, implement the multiple-selection check box, and edit the column
JQuery ("#grid-table"). Jqgrid ({datatype: "local", Data:mydata, Colnames: [' Number ', ' Field name ', ' field description ', ' field type ', ' Primary GUID ', ' Sub Guid '], Colmodel: [{name: ' ID ', Index: ' ID ', width:35, align: ' center ', Key: ' true '}, {name: ' FieldName ', index: ' FieldName ', width:100} , {name: ' Fielddisc ', index: ' Fielddisc ', width:327, Editable:true, editoptions: {maxlength: "20" }, {name: ' FieldType ', index: ' FieldType ', width:100}, {name: ' Mainguid ', Index: ' Mainguid ', width:100, hidden:true}, {name: ' SubGuid ', index: ' SubGuid ', width:100, Hidd
En:true}], width:580, Height: ' Auto ', rownum:10, Rowlist: [A, A], Recordpos: ' Left ', Viewrecords:true, M ultiselect:true,//check box
Ondblclickrow Double-click the field Description column to edit it, edit it and press ENTER to save it on the page ondblclickrow:function (ID) {if (id && ID!== lastsel) {jQuery (' #grid-table '). Jqgrid (' Restorerow
', Lastsel);
JQuery (' #grid-table '). Jqgrid (' Editrow ', ID, true);
Lastsel = ID;
}, Editurl: "Jqgridhandler.ashx?sign=singleedit"//This file needs to have, but there is no need to write any processing code });
4. How to get the selected row
function Getselecteds () {
//Get multiple-selected IDs collection
var ids = $ ("#grid-table"). Jqgrid ("Getgridparam", "Selarrrow");
Traversal accesses this set
$ (IDS). Each (function (index, ID) {
//ID to get the corresponding data row
var row = $ ("#grid-table"). Jqgrid (' GetRowData ', id);
Alert ("Row.id:" +row.id+ " " + "Row.fieldname:" +row.fieldname);
}