2013-02-06 196 views
0

Im使用jqgrid的數據網格。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代碼

<table id="list"><tr><td> </td></tr></table> 
<div id="pager"></div> 

enter image description here IM附加圖像,

回答

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>"