如何为每一行的 Jq 网格添加编辑和删除按钮

Question

我想为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
    });

为了显示数据我使用了 Json。

我两天都在苦苦挣扎，谁能帮帮我。

Answer 1

在colModel 的名称edit 和delete 中提及editLink 和deleteLink 以显示Edit 和jqgrid 中每行的删除按钮。

代码：

$(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;
            }
        }

Answer 2

我明白了，只需添加额外的列，并将格式化程序操作添加为模型类。就是这样。

  <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"  
    });
});

Answer 3

试试这个删除

$(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;
    }