jqgrid编辑行中的删除按钮

时间:2013-02-06 15:38:08

标签: jquery jqgrid-php

我使用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> 

enter image description here 我正在附上一张图片,

1 个答案:

答案 0 :(得分:0)

我做了什么:

  • 每一行都包含Action
  • 操作可以包含任何操作,例如:编辑或删除。

这是我的代码

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