我想知道使用jqGrid创建按钮列的最佳方法吗? 因为我看到可以通过在colModel行中创建属性formatter或使用gridCOmplete方法来实现这一点,但是没有看到任何适合此问题的最佳方法。
在this link中解释了如何使用格式化程序。
<script>
jQuery("#grid_id").jqGrid({
...
colModel: [
...
{name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter},
...
]
...
});
function currencyFmatter (cellvalue, options, rowObject)
{
be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#rowed2').editRow('"+cellvalue+"');\" />";
se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#rowed2').saveRow('"+cellvalue+"');\" />";
ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#rowed2').restoreRow('"+cellvalue+"');\" />";
return be+se+ce;
}
</script>
this link is used the gridComplete(转到Row Editting (new)
- &gt; Edit Custom
)
Java Script code
...
jQuery("#rowed2").jqGrid({
url:'server.php?q=3',
datatype: "json",
colNames:['Actions','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'act',index:'act', width:75,sortable:false},
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90, editable:true},
{name:'name',index:'name', width:100,editable:true},
{name:'amount',index:'amount', width:80, align:"right",editable:true},
{name:'tax',index:'tax', width:80, align:"right",editable:true},
{name:'total',index:'total', width:80,align:"right",editable:true},
{name:'note',index:'note', width:150, sortable:false,editable:true}
],
rowNum:10,
rowList:[10,20,30],
pager: '#prowed2',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
gridComplete: function(){
var ids = jQuery("#rowed2").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++){
var cl = ids[i];
be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#rowed2').editRow('"+cl+"');\" />";
se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#rowed2').saveRow('"+cl+"');\" />";
ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#rowed2').restoreRow('"+cl+"');\" />";
jQuery("#rowed2").jqGrid('setRowData',ids[i],{act:be+se+ce});
}
},
editurl: "server.php",
caption:"Custom edit "
});
jQuery("#rowed2").jqGrid('navGrid',"#prowed2",{edit:false,add:false,del:false});
我认为第一种方式更简单,因此我的问题。