jQuery 在 JQgrid 中动态添加下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13116256/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add Dropdown in JQgrid dynamically
提问by Ankit
I want to add drop down in JQGrid dynamically.
我想在 JQGrid 中动态添加下拉列表。
For example:-
例如：-
I have below type of grid.
我有以下类型的网格。
Now when I click on a button a new row should be added in the grid. And for new row the first column data will be dropdown, second Hyperlink, third dropdown and forth checkbox.
现在，当我单击一个按钮时，应在网格中添加一个新行。对于新行，第一列数据将是下拉列表、第二个超链接、第三个下拉列表和第四个复选框。
i.e. It should be same as the first row.
即它应该与第一行相同。
And for every button click new row should be added similar to first row.
并且对于每个按钮单击新行应该添加类似于第一行。
回答by Gunjan Shah
For attribute of type formatter='select' and type='select', jQgrid internally maintains a list of key-value pairs.
对于 formatter='select' 和 type='select' 类型的属性，jQgrid 在内部维护了一个键值对列表。
So while inserting the new row, you need to provide "ID" as the value of drop down box.
因此，在插入新行时，您需要提供“ID”作为下拉框的值。
For Example :
例如 ：
For inserting a new row :
插入新行：
$("#listData").jqGrid('addRowData',index,{kpiParameter:1,product:'XYZ',metric:'1',perkSharing:'XYZ'});
Here, '1' is the ID of KpiParameter. For this solution to work you need to load whole list of key-value pair of the drop down while defining the jQgrid.
这里，“1”是 KpiParameter 的 ID。要使此解决方案起作用，您需要在定义 jQgrid 时加载下拉列表的整个键值对列表。
You can write jqGrid as below :
您可以编写 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'
});
Hope this will work for you.
希望这对你有用。
Thanks, Gunjan.
谢谢，甘詹。
