的jqGrid - 删除一行按钮

http://jsfiddle.net/chandelyt/w4oudhh4/3/

HTML

<table id="list2"> 
    <tr> 
     <td /> 
    </tr> 
</table> 
<div id="jQGridDemoPager"></div>

JQuery的

var $j = $.noConflict(true); 
var mydata = [ 
    { "UserName": "8125579231", "RoleId": 1, "Name": "John", "RoleName": "Administrator" }, 
    { "UserName": "9676078986", "RoleId": 1, "Name": "Mia", "RoleName": "Administrator" }, 
    { "UserName": "9703804807", "RoleId": 1, "Name": "Shan", "RoleName": "Administrator" }, 
    { "UserName": "9177458358", "RoleId": 1, "Name": "Tim", "RoleName": "Administrator" }, 
    { "UserName": "7760699118", "RoleId": 2, "Name": "Harry", "RoleName": "Sales" } 
]; 


$j('#list2').jqGrid({ 
    caption: "Employee Details", 
    data: mydata, 
    datatype: "local", 
    colNames: ["UserName", "RoleId", "Name", "RoleName","Delete"], 
    colModel: [ 
    { name: "UserName", index: 'UserName', width: 150 }, 
    { name: 'RoleId', index: "RoleId", width: 150 }, 
    { name: "Name", index: "Name", width: 150 }, 
    { name: "RoleName", index: "RoleName", width: 150 }, 
    { name: 'Delete', formatter: buttonFormatter } 
    ], 
    rowNum: 10, 
    pager: '#jQGridDemoPager', 
    sortname: "UserName", 
    viewrecords: true, 
    sortorder: "desc", 
}); 


function buttonFormatter(cellvalue, options, rowObject) { 
    return '<button type="button" onClick=clickFunction1();>Delete</button>'; 
}; 

function clickFunction1() { 

    var grid = $j('#list2'); 
    var sel_id = grid.jqGrid('getGridParam', 'selrow'); 
    var myCellData = grid.jqGrid('getCell', sel_id, 'Name'); 
    alert("Selected Name: " + myCellData); 

};

CSS

.ui-jqgrid .ui-state-highlight { background: silver; }

问题如下：当我点击删除按钮（不选择行）这表明先前选定的行值（在这种情况下，名称）

我想点击任何按钮（和它应该选择该行 - 或不），并获取其字段值..我发布到服务器删除，然后刷新网格，一旦项目被删除。

它工作，如果我选择一行，然后单击按钮...我的工作的本地副本，但不能在小提琴......可能是becasue的旧版本的fiddeler

来源

2016-08-31 Harry S

首先，功能buttonFormatter，W你在onClick里面打电话必须是global函数（全局window对象的属性）。秒，我会建议你转this，这是点击td元素clickFunction1功能：

function buttonFormatter() { 
    return '<button type="button" onClick="clickFunction1.call(this)">Delete</button>'; 
}

，然后使用$j(this).closest("tr.jqgrow").attr("id")来获取点击的行的rowid：

function clickFunction1() { 
    var grid = $j('#list2'), rowid = $j(this).closest("tr.jqgrow").attr("id"); 
    var myCellData = grid.jqGrid('getCell', rowid, 'Name'); 
    alert("Selected Name: " + myCellData); 
}

你会看到演示结果http://jsfiddle.net/OlegKi/w4oudhh4/12/

或者，您可以使用自定义格式化程序的简化版本：

function buttonFormatter() { 
    return '<button type="button">Delete</button>'; 
}

其中使用没有onClick。 jqGrid已经在网格上注册了click事件处理程序。如果用户点击"Delete"按钮，则由于event bubbling将调用父外部元素的click事件处理程序。 jqGrid提供的beforeSelectRow回调函数将在click事件处理程序中调用。事件的target属性是<td>元素，它被单击。因此，人们可以使用

beforeSelectRow: function (rowid, e) { 
    var grid = $j(this), rowid = $j(e.target).closest("tr.jqgrow").attr("id"); 
    var myCellData = grid.jqGrid('getCell', rowid, 'Name'); 
    alert("Selected Name: " + myCellData); 
    return true; // allows selection of the row 
}

看到另一个演示http://jsfiddle.net/OlegKi/w4oudhh4/13/

来源

2016-08-31 17:02:17 Oleg

大。看起来不错 –

添加class删除按钮和删除onClick=clickFunction1();这样的：

return '<button class="dlt" type="button">Delete</button>';

和jQuery这样的：

$(document).ready(function(){ 

    $(".dlt").on("click",function(){ 

     $(this).closest("tr").remove(); 

    }) 

})

来源

2016-08-31 16:42:53 Ehsan

的jqGrid - 删除一行按钮

回答

相关问题