JqGrid项目中,需要操作combxo,而且是动态改变的,这下子菊花又痒了,需要用到的函数$('#grid').setColProp('cloumnNm', {editoptions: {value:"test:test;test2:test2"}}),其中,一定要注意options里面的写法是 xx:xx 而且不要以分号结尾,不然就会导致有一个未定义的列表框

结尾不带分号的

结尾不带分号是正确的写法,就不会有undefined的字段

$('#gridData').setColProp('kantokuinCode', {editoptions: {
     
       value:"test:test;test2:test2"}});

JqGrid之动态改变下拉框-yellowcong_List

结尾带分号的

$('#gridData').setColProp('kantokuinCode', {editoptions: {
     
       value:"test:test;test2:test2;"}});

JqGrid之动态改变下拉框-yellowcong_其他_02

在代码写死下拉框

代码中写死了,这种方法用于不需要动态改变下拉列表框

 {
      
        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; //获取选中的学校名称 

                                                }  
                                            }  
                                        ]  
                                    }