JqGrid项目中,需要操作combxo,而且是动态改变的,这下子菊花又痒了,需要用到的函数
$('#grid').setColProp('cloumnNm', {editoptions: {value:"test:test;test2:test2"}})
,其中,一定要注意options里面的写法是 xx:xx 而且不要以分号结尾,不然就会导致有一个未定义的列表框
结尾不带分号的
结尾不带分号是正确的写法,就不会有undefined的字段
$('#gridData').setColProp('kantokuinCode', {editoptions: {value:"test:test;test2:test2"}});
结尾带分号的
$('#gridData').setColProp('kantokuinCode', {editoptions: {value:"test:test;test2:test2;"}});
在代码写死下拉框
代码中写死了,这种方法用于不需要动态改变下拉列表框
{name:"kantokuinCode",sortable:true, edittype:"select",editoptions: {value: "test:test;test2:test2"} ,editable: true,width:100, width:100,hidden:false},
演示代码
在动态设定的时候,需要先声明更改的grid是一个combox,添加edittype:"select",editable: true
设置。
//定义的 jqgrid
var colNames = [
"grdNo",
"grid2", //予算課コード
"grid3", //
"grid4", //
"grid5", //
"grid6", //
"grdHojyoName", //
"grdKeiyakuGakuValue", //
//非表示項目
"grdKantokuinNm", //
"grdKantokuinCode", //
"grdSeqNumber" //
];
var colModel = [
{name:"no",sortable:true, width:10, hidden:false},
{name:"yosanCode",sortable:true, width:100, hidden:true},
{name:"yosanNm",edittype:"select",editable: true,sortable:true, width:135, hidden:false},
{name:"kaikeiCode",sortable:true, width:100, hidden:true},
{name:"kaikeiName",sortable:true, width:100,hidden:false},
{name:"hojyoCode",sortable:true, width:100,hidden:true},
{name:"hojyoName",sortable:true, width:100,hidden:false},
{name:"keiyakuGakuValue",formatter:'integer',formatoptions:{thousandsSeparator: ','},sortable:true, width:100,hidden:false},
{name:"kantokuinCode",sortable:true, edittype:"select",editable: true,width:100, width:100,hidden:false},
{name:"kantokuinNm",sortable:true,hidden:true},
{name:"seqNumber",sortable:true, width:100,hidden:true},
];
var dataList = [];
//860
var gridWidth = Math.floor($(this).innerWidth() * 0.70); // Gridの高さを取得
var gridHeight = Math.floor($(this).innerHeight() * 0.15); // Gridの高さを取得
$("#gbox_gridData").remove();
$("#testData").append("<table id='gridData'></table>");
$('#gridData').jqGrid({
data: dataList,
datatype:"local",
multiboxonly:true,
cellEdit:true,
cellsubmit:'clientArray',
colNames:colNames,
colModel:colModel,
width:gridWidth,
height:gridHeight,
scrollOffset:0,
rowNum:dataList.length,
gridview: true,
regional:'ja',
beforeSelectRow: function(rowid, event){
},loadComplete(xhr){
}
});
//动态修改
$('#gridData').setColProp('yosanNm', {editoptions: {value:"test:test;test2:test2;"}});
动态修改
需要结合dataEvents 这个属性,然后监听change事件,获取下拉列表框 value
{
name: 'schoolName',
index: 'schoolName',
width: 150,
editable: true,
editrules: true,
edittype: "select",
editoptions: {
dataEvents: [//给当前控件追加事件处理
{
type: 'change', //下拉选择的时候
fn: function (e) { //触发方法
//获取当前下拉框的id名字(这是点击编辑按钮时才需要的,因为点击编辑按钮后,schoolName的下拉框会变成1_schoolName,其中”1“是行号)
var itemName = this.id;
var selectNum = itemName.match(/^\d+/);//(这是点击编辑按钮时才需要的)将id中的数字获取出来
var lablValue =this.value; //获取选中的学校名称
}
}
]
}