Question

我想动态地在JQGrid中添加下拉列表。

例如： -

我有以下类型的网格。

enter image description here

现在当我点击一个按钮时，应该在网格中添加一个新行。对于新行，第一列数据将是下拉列表，第二列是超链接，第三列是下拉列表。

即。它应该与第一行相同。

对于每个按钮，单击新行应添加类似于第一行。

Answer 1

对于formatter ='select'和type ='select'类型的属性，jQgrid在内部维护一个键值对列表。

因此，在插入新行时，您需要提供“ID”作为下拉框的值。

例如：

用于插入新行：

  $("#listData").jqGrid('addRowData',index,{kpiParameter:1,product:'XYZ',metric:'1',perkSharing:'XYZ'});

此处，'1'是KpiParameter的ID。要使此解决方案正常工作，您需要在定义jQgrid时加载下拉列表的键值对的完整列表。

您可以按如下方式编写jqGrid：

jQuery('#kpisetup').jqGrid({
            autowidth: true,
            autoheight: true,
            url : '',
            mtype : 'POST',
            colNames : [  'KPI ID','KPI Parameter', 'Product','Metric','Perk Sharing'],
            colModel : [ {name : 'kpi_id',index : 'kpi_id',autowidth: true,hidden:true,align:'center'},
                         {name : 'kpi_parameter',index : 'kpi_parameter',width:200,
                                                sortable:true,
                                                align:'center',
                                                editable:true,
                                                cellEdit:true,
                                                edittype: 'select', 
                                                formatter: 'select',
                                                editrules: { required: true},
                                                editoptions:{value: getKPIParameters()//LOAD ALL THE KPI PARAMETER KEY-VALUE PAIR}
                         },
                         {name : 'product',index : 'product',autowidth: true,formatter:'showlink',formatoptions:{baseLinkUrl:'#'},align:'center'},
                         {name : 'metric',index : 'metric',width:75,
                                                editable:true,
                                                edittype: "select",
                                                align:'center',
                                                formatter: 'select',
                                                editrules: { required: true},
                                                editoptions: {value: '1:select' //LOAD ALL THE METRIC VALUEs}
                         },
                         {name : 'perksharing',align:'left',index : 'perksharing',autowidth: true,editable:true,edittype: "checkbox",align:'center'}
                       ],
            rowNum : 10,
            sortname : 'kpi_parameter',
            viewrecords : true,
            gridview:true,
            pager : '#kpisetup_pager',
            sortorder : 'desc',
            caption : 'KPI Setup',
            datatype : 'json'
        });

希望这对你有用。

谢谢， Gunjan。

动态地在JQgrid中添加下拉列表

1 个答案: