Jqgrid Multiple-selection check box edit column

Source: Internet
Author: User
Tags jqgrid
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);
}


    




Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.