jquery - 在 JQgrid 中动态添加 Dropdown

Question

我想在 JQGrid 中动态添加下拉菜单。

例如：-

我有以下类型的网格。

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

即它应该与第一行相同。

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

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'
        });

希望这对你有用。

谢谢，甘扬。