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

希望这对您有用。

谢谢，冈詹。