我使用jqgrid作为数据网格。
我想使用编辑按钮和删除按钮编辑和删除每一行,而不是单击行。 这是jquery代码:
$(function(){
var lastsel2
$("#list").jqGrid({
url:'example.php',
datatype: 'xml',
mtype: 'GET',
colNames:['id','name', 'status'],
colModel :[
{name:'id', index:'id', width:155},
{name:'name', index:'name', width:190, editable: true},
{name:'status', index:'status', width:180, align:'right', editable: true},
],
onSelectRow: function(id){
//if(appid && appid!==lastsel2){
if (id && id !== lastsel2){
jQuery('#list').restoreRow(lastsel2);
jQuery('#list').editRow(id,true);
lastsel2=id;
}
},
editurl: "example.php",
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'appid',
sortorder: 'desc',
viewrecords: true,
gridview: true,
caption: 'My first grid'
});
});
HTML CODE
<table id="list"><tr><td> </td></tr></table>
<div id="pager"></div>
我正在附上一张图片,
答案 0 :(得分:0)
我做了什么:
这是我的代码
jQuery("#list4").
jqGrid(
{ datatype: "local"
, height: 250
, colNames:['Action','Inv No','Date', 'Client', 'Amount','Tax','Total','Notes']
, colModel:
[ {name:'action', width:30 }
, {name:'id',index:'id', width:60, sorttype:"int"}
, {name:'invdate',index:'invdate', width:90, sorttype:"date",editable:true}
, {name:'name',index:'name', width:100,editable:true}
, {name:'amount',index:'amount', width:80, align:"right",sorttype:"float",editable:true}
, {name:'tax',index:'tax', width:80, align:"right",sorttype:"float",editable:true}
, {name:'total',index:'total', width:80,align:"right",sorttype:"float",editable:true}
, {name:'note',index:'note', width:150, sortable:false,editable:true}
]
...
And populate data, it should contain such as:
action:"<a title='save' class='ui-pg-div ui-pg-button ui-corner-all' style='display:block; border:0px none' href='javascript:saveInLineRow(\"list4\")'><span class='ui-icon ui-icon-plus'></span></a>"