jQuery 如何为每一行的 Jq 网格添加编辑和删除按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21930003/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-27 01:45:52 来源:igfitidea点击:
How to add Edit and Delete button for Jq grid for every row
提问by Sanjay
I want to display edit and delete button for every row on jq grid, code as below:
我想为 jq 网格上的每一行显示编辑和删除按钮，代码如下：
$(document).ready(function () {
jQuery("#jQGridDemo").jqGrid({
url: 'http://localhost:52618/Sample/GetEmployeeDetails',
datatype: "json",
mtype: "POST",
colNames: ['Eno', 'Ename', 'City', 'Salary'],
colModel: [
{ name: 'Eno', index: 'Eno', width: 120, stype: 'text', height: 90, editable: true },
{ name: 'Ename', index: 'Ename', width: 150, editable: true },
{ name: 'City', index: 'City', width: 150, editable: true },
{ name: 'Salary', index: 'Salary', width: 100, height: 120, editable: true },
],
rowNum: 10,
mtype: 'Get',
loadonce: true,
pager: '#jQGridDemoPager',
viewrecords: true,
caption: "List Employee Details",
height: "230px",
search: true,
editable: true
});
To display data I have used Json.
为了显示数据，我使用了 Json。
I am struggling from two days, can anyone help me.
我挣扎了两天，任何人都可以帮助我。
采纳答案by Sanjay
I got it, Just take additional column, and add formaater actions as model class. That's it.
我明白了，只需添加额外的列，并将格式化程序操作添加为模型类。就是这样。
<script >
$(document).ready(function () {
jQuery("#jQGridDemo").jqGrid({
url: 'http://localhost:52618/Sample/GetEmployeeDetails',
datatype: "json",
mtype: "POST",
colNames: ['Eno', 'Ename', 'City', 'Salary','Actions'],
colModel: [
{ name: 'Eno', index: 'Eno', width: 120, stype: 'text', height: 90, editable: true },
{ name: 'Ename', index: 'Ename', width: 150, editable: true },
{ name: 'City', index: 'City', width: 150, editable: true },
{ name: 'Salary', index: 'Salary', width: 100, height: 120, editable: true },
{
name: 'Actions', index: 'Actions', width: 100, height: 120, editable: true, forma ter: 'actions',
formatoptions: {
keys: true,
editformbutton: true
}
}
],
rowNum: 10,
mtype: 'Get',
loadonce: true,
pager: '#jQGridDemoPager',
viewrecords: true,
caption: "List Employee Details",
height: "230px"
});
});
回答by UdayKiran Pulipati
Mention editLinkand deleteLinkin colModelname of editand deletefor display Editand Delete button in jqgrid for each row.
提到editLink和deleteLink在colModel名称edit和delete显示Edit在jqGrid的每一行和删除按钮。
Code:
代码：
$(document).ready(function(){
//jqGrid
$("#usersList").jqGrid({
url:'<%=request.getContextPath() %>/Admin/getAllUsersList',
datatype: "json",
colNames:['Edit', 'Delete','Primary Email','Active','First Name','Middle Name','LastName','Mobile Number'],
colModel:[
{name:'edit',search:false,index:'userId',width:30,sortable: false,formatter: editLink},
{name:'delete',search:false,index:'userId',width:35,sortable: false,formatter: deleteLink},
{name:'email',index:'user.primaryEmail',width:150},
{name:'isActive',index:'user.isActive',width:80},
{name:'firstName',index:'firstName', width:100},
{name:'middleName',index:'middleName', width:100},
{name:'lastName',index:'lastName', width:100},
{name:'mobileNo',index:'user.mobileNo', width:100},
],
rowNum:20,
rowList:[10,20,30,40,50],
rownumbers: true,
pager: '#pagerDiv',
sortname: 'user.primaryEmail',
viewrecords: true,
sortorder: "asc",
});
$('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
$('.ui-jqgrid-bdiv').css('height', window.innerHeight * .65);
$('#load_usersList').width("130");
$("#usersList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{}, {closeAfterSearch:true});
$(".inline").colorbox({inline:true, width:"20%"});
});
function editLink(cellValue, options, rowdata, action)
{
return "<a href='<%=request.getContextPath()%>/Admin/editUser/" + rowdata.userId + "' class='ui-icon ui-icon-pencil' ></a>";
}
function deleteLink(cellValue, options, rowdata, action) {
return "<a href='javascript:deleteRecord(" + rowdata.userId + ")' class='ui-icon ui-icon-closethick'></a>";
}
function deleteRecord(id){
var result = confirm("Are you sure you Want to delete?");
if (result==true) {
window.location.href="<%=request.getContextPath()%>/Admin/deleteUser/"+id;
}
}
回答by Rakesh Jena
Try this for delete
试试这个删除
$(document).ready(function () {
jQuery("#jQGridDemo").jqGrid({
url: "your get URL",
datatype: "json",
mtype: "POST",
colNames: ['Eno', 'Ename', 'City', 'Salary'],
colModel: [
{ name: 'Eno', index: 'Eno', width: 120, stype: 'text', height: 90, editable: true },
{ name: 'Ename', index: 'Ename', width: 150, editable: true },
{ name: 'City', index: 'City', width: 150, editable: true },
{ name: 'Salary', index: 'Salary', width: 100, height: 120, editable: true },
{ name: '', index: '', sortable: false, formatter: Remove, align: "center" },
],
rowNum: 10,
mtype: 'Get',
loadonce: true,
pager: '#jQGridDemoPager',
viewrecords: true,
caption: "List Employee Details",
height: "230px",
search: true,
editable: true
});
$(".memberAction").click(function () {
var mopId = $(this).attr("id");
var ref=$(this).attr("name");
//do remove ajax call with mopId
});
function Remove(cellvalue, options, rowObject) {
var id = rowObject.id;
var refNo = rowObject.Reference;
var html = '';
html = "<a id='" + id + "' class='memberAction' name='" + refNo + "' style='color:blue;cursor:pointer;' type='button' title='" + remove + "'>" + remove + "</a>";
return html;
}
