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

在editLink的{{1}}名称中提及deleteLink和colModel，在{jqgrid}中为edit显示delete和删除按钮。

<强>代码：

Edit

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

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

3 个答案: