我正在开发一个jqgrid,我需要在每一行上显示Edit和Save按钮。我是第一次使用它,我无法在每行显示按钮。现在它只显示在最后一行。这是我的HTML和脚本。
HTML:
<table id="grid"></table>
<div id="pager"></div>
Script:
<script type="text/javascript">
var mydata = [
{ name : "abc1", id : "12345", address : "capetown"},
{ name : "abc2", id : "45474", address : "capetown"},
{ name : "abc3", id : "54142", address : "capetown"},
{ name : "abc4", id : "87845", address : "capetown"},
{ name : "abc5", id : "54145", address : "capetown"},
{ name : "abc6", id : "54896", address : "capetown"},
{ name : "abc7", id : "52514", address : "capetown"}
];
$("#grid").jqGrid({
data: mydata,
datatype: 'local',
width: 450,
emptyrecords: "Nothing to display",
//autowidth: true,
height: 'auto',
colNames:['Actions', 'Emp Name','Emp ID','Address'],
colModel:[
{name:'act',index:'act', width:75, sortable:false},
{name:'emp_name', index:'emp_name', key: true, width:100, editable:true},
{name:'emp_id', index:'emp_id', width:80, editable:true},
{name:'addr', index:'addr', width:100, editable:true}
],
gridComplete: function(){
var ids = jQuery("#grid").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++){
var cl = ids[i];
a1 = "<input style='height:22px;width:40px;' type='button' value='Edit' onclick=\"jQuery('#grid').editRow('"+cl+"');\" />";
b1 = "<input style='height:22px;width:40px;' type='button' value='Save' onclick=\"jQuery('#grid').saveRow('"+cl+"');\" />";
jQuery("#grid").jqGrid('setRowData',ids[i],{act:a1+b1});
}
},
pager: '#pager',
rowNum: 4,
pgbuttons: true,
altRows: true,
sortname: 'emp_name',
viewrecords: true,
sortorder: "asc",
});
//jQuery("#grid").jqGrid('navGrid',"#pager",{edit:false,add:false,del:false});
</script>
我在控制台中看不到任何未定义的错误。任何想法,如何让按钮在每一行显示它?