如何在jqgrid上实现编辑和删除？

Question

下面是我的 JQGrid 代码，它可以很好地加载网格、分页和排序。

现在，我需要添加 - 编辑和删除功能。

我在谷歌上找到，在导航栏中启用“编辑”和“删除”选项，但是， 我希望它像----用户单击“a href”链接，它应该调用 javascritp 函数以及 rowID 。你能指导我，我怎样才能添加超链接并点击它允许调用functino？

        $('#CategoriesGrdList').jqGrid({
        ajaxGridOptions: {
            error: function () {
                $('#CategoriesGrdList')[0].grid.hDiv.loading = false;
                alert('An error has occurred.');
            }
        },
        url: '@Url.Action("GetAllCategoriesList", "Categories")/' + 0,
        gridview: true,
        autoencode: true,
        //public JsonResult GetEnrolls(int adClassSchedID,DateTime attendanceDate,int adProgramID,int syCampusID)
        postData: { categoryId: 1 },
        //postData: { categoryId: rowID, attendanceDate: $('#AttendanceDate').val(), adProgramID: $('#adProgramID').val(), syCampusID: $('#syCampusID').val() },
        datatype: 'json',
        jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'Id' },
        mtype: 'GET',
        colNames: ['Id', 'Code', 'Description', 'IsActive'],
        colModel: [
              { name: 'Id', index: 'Id', hidden: true },
            { name: 'Code', index: 'Code', width: 170 },
            { name: 'Description', index: 'Description', width: 170 },
        { name: 'IsActive', index: 'IsActive', width: 170 }
        ],
        pager: $('#CategoriesGrdPager'),
        sortname: 'Code',
        rowNum: 40,
        rowList: [3, 3, 3],
        width: '525',
        height: '100%',
        viewrecords: true,

        beforeSelectRow: function (rowid, e) {
            return false;

        },
        sortorder: 'desc'
    }).navGrid('#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: false });
});

注意：

根据以下评论之一的建议， 新增以下栏目：

                 {
                 name: 'act', index: 'act', width: 55, align: 'center', sortable: false,    formatter: 'actions',
                 formatoptions: {
                     keys: true, // we want use [Enter] key to save the row and [Esc] to cancel   editing.
                     onEdit: function (rowid) {
                         alert("in onEdit: rowid=" + rowid + "\nWe don't need return anything");
                     },
                     onSuccess: function (jqXHR) {
                         // the function will be used as "succesfunc" parameter of editRow function
                         // (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow)
                         alert("in onSuccess used only for remote editing:" +
                               "\nresponseText=" + jqXHR.responseText +
                               "\n\nWe can verify the server response and return false in case of" +
                               " error response. return true confirm that the response is successful");
                         // we can verify the server response and interpret it do as an error
                         // in the case we should return false. In the case onError will be called
                         return true;
                     },
                     onError: function (rowid, jqXHR, textStatus) {
                         // the function will be used as "errorfunc" parameter of editRow function
                         // (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow)
                         // and saveRow function
                         // (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow)
                         alert("in onError used only for remote editing:" +
                               "\nresponseText=" + jqXHR.responseText +
                               "\nstatus=" + jqXHR.status +
                               "\nstatusText" + jqXHR.statusText +
                               "\n\nWe don't need return anything");
                     },
                     afterSave: function (rowid) {
                         alert("in afterSave (Submit): rowid=" + rowid + "\nWe don't need return anything");
                     },
                     afterRestore: function (rowid) {
                         alert("in afterRestore (Cancel): rowid=" + rowid + "\nWe don't need return anything");
                     },
                     delOptions: {
                         // because I use "local" data I don't want to send the changes to the server
                          // so I use "processing:true" setting and delete the row manually in onclickSubmit
                         onclickSubmit: function (rp_ge, rowid) {
                             // we can use onclickSubmit function as "onclick" on "Delete" button
                             alert("The row with rowid=" + rowid + " will be deleted");

                             // reset processing which could be modified
                             rp_ge.processing = true;

                             // delete row
                             $(this).delRowData(rowid);
                             $("#delmod" + $(this)[0].id).hide();

                             if ($(this)[0].p.lastpage > 1) {
                                 // reload grid to make the row from the next page visable.
                                 // TODO: deleting the last row from the last page which number is higher as 1
                                 $(this).trigger("reloadGrid", [{ page: $(this)[0].p.page }]);
                             }

                             return true;
                         },
                         processing: true // !!! the most important step for the "local" editing
                         //     skip ajax request to the server
                     }
                 }
             }

现在，问题：

控制器的调用动作在哪里指定？ 单击编辑时，什么也没有发生，我想调用我自己的控制器操作并弹出我自己的对话框而不是 jqgrid 对话框。

请指导我。

Answer 1

我看到你正在使用 MVC，这就是我的做法，这可能与你的做法不同，但我喜欢这样做。基本上，您指定如何在控制器中编辑、添加和删除，然后使用 "url: '/YourController/YourActionMethod/' 告诉网格在哪里查看。您可以设置许多不同的选项，例如标题、宽度等 @987654321 @。

}).navGrid('#CategoriesGrdPager', { cloneToTop: true, search: false },
{
    url: '/YourController/EditCategories/',
    editCaption: 'Edit Post',
    closeAfterEdit: true,
    closeOnEscape: true,
    dataheight: 1150,
    top: 25,
    left: 50,
    width: 900,
},//edit options
{
    url: '/YourController/AddCategories/',
    addCaption: 'New Post',
    closeAfterAdd: true,
    closeOnEscape: true,
    dataheight: 1150,
    top: 25,
    left: 50,
    width: 900,
},//add options
{
    url: '/YourController/DeleteCategories/',
    caption: 'Delete Post',
    closeOnEscape: true,
}//delete options
);