JqGrid implements this select-different options for different rows in the same column

Source: Internet
Author: User
Tags jqgrid
JqGrid is a jquery-based web-side table/treegrid component. Default select definition method [javascript] {name: & amp; #39; ship & amp; #39;, index: & amp; #39; ship & amp; #39;, width: 90, editable: true, editt

Introduction to jqGrid

Jqgrid is a jquery-based web-side table/tree grid component.
 

 

Default select definition method

[Javascript]
{Name: 'ship ', index: 'ship', width: 90, editable: true, edittype: "select", editoptions: {value: "FE: FedEx; IN: inTime; TN: TNT; AR: ARAMEX "}}

{Name: 'ship ', index: 'ship', width: 90, editable: true, edittype: "select", editoptions: {value: "FE: FedEx; IN: inTime; TN: TNT; AR: ARAMEX "} the default definition method is to set the colModel col definition in the grid definition options according to the above definition method.
FE: FedEx => the colon is preceded by value and followed by text.

After this setting, the options of all the drop-down lists under the same column are the same. How do I set different options for this field of each row?
Datatype is not local. If it is local, the implementation is as follows:

 


Customized implementation
ColModel Definition

[Javascript]
{Name: 'note', index: 'note', editable: true, edittype: 'custom', editoptions: {custom_element: myelem, custom_value: myvalue}, width: 150, sortable: false}]

{Name: 'note', index: 'note', editable: true, edittype: 'custom', editoptions: {custom_element: myelem, custom_value: myvalue}, width: 150, sortable: false}]
Javascript function definition
[Javascript]
Function myelem (value, options ){
Var el = document. createElement ("select ");
If (value! = Null & value. length> 0)
{
Var optvalues = eval (value );
If (optvalues. length> 0)
{
For (var I = 0; I {
Var optvalue = optvalues [I]. optvalue;
Var optdisplay = optvalues [I]. optdisplay;
Var optel = document. createElement ("option ");
Optel. innerHTML = optdisplay;
Optel. value = optvalue;
El. appendChild (optel );
}
}
}
Return el;
}
 
Function myvalue (elem, operation, value ){
If (operation = 'get '){
Return $ (elem). val ();
} Else if (operation === 'set '){
$ (Elem). val (value );
}
}

Function myelem (value, options ){
Var el = document. createElement ("select ");
If (value! = Null & value. length> 0)
{
Var optvalues = eval (value );
If (optvalues. length> 0)
{
For (var I = 0; I {
Var optvalue = optvalues [I]. optvalue;
Var optdisplay = optvalues [I]. optdisplay;
Var optel = document. createElement ("option ");
Optel. innerHTML = optdisplay;
Optel. value = optvalue;
El. appendChild (optel );
}
}
}
Return el;
}

Function myvalue (elem, operation, value ){
If (operation = 'get '){
Return $ (elem). val ();
} Else if (operation === 'set '){
$ (Elem). val (value );
}
}

When adding data, the value of this field is assigned in json format:
[Html]
{Optvalue: 'value', optdisplay: 'display '}

{Optvalue: 'value', optdisplay: 'display '}

 


 

Related Article

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.