添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接


jqGrid 的简介

jqgrid 是一个基于jquery 的web 端 table/tree grid 的组件。

官方网址:

http://www.jqgrid.com


默认的select 定义方式



{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}}

默认的定义方式是在grid 的定义选项中设置 colModel 的col 定义按照以上的定义方式。

FE:FedEx ==> 冒号前面是value , 后面是显示的text.




这样的设定后, 一列下面所有的此栏位的下拉单的选项都是一样的。如何设定各行此栏位的选项不一致呢?



datatype 为非 local 的状况没有考虑过, 如果为local 的实现如下:






客制实现

colModel 中的定义


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


javascript function 定义



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<optvalues.length;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);
}
}


data 的添加时, 此栏位的值以json 格式赋值: 像



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