如何在 jQGrid 操作列中添加编辑和删除图标答案

【问题标题】：How to add Edit and Delete Icons in jQGrid Actions column如何在 jQGrid 操作列中添加编辑和删除图标
【发布时间】：2013-08-05 19:20:58
【问题描述】：

请有人帮我添加编辑和删除图标，正如下面的演示链接所示。 http://www.trirand.net/aspnetmvc/grid/EditRowInlineActionIcons

下面是我的 JQGrid。我尝试添加格式化程序：'actions'，格式选项：{keys: true, editbutton:true,delbutton:true }

但在显示用于编辑和删除的图标时没有运气。我想我需要在某个地方传递图像源以进行编辑和删除图标，我不知道。并且还需要编写一些代码来处理图标的点击事件。谁能给我一个基本示例，在“操作”列中添加编辑和删除图标以进行内联编辑？

仅供参考，这不是 MVC 应用程序，它的 ASP.Net4.0。我正在将此网格绑定到一个表，所有代码现在都在 .js 文件中。

_bindGridView: function (files) {
            var lastsel;
            jQuery("#gridJQ").jqGrid({
                datatype: "local",
                height: 250,

                colNames: ['Document Name', 'Category', 'Name/Account No.', 'RepID', 'Description', 'ClientView', 'Document Date', 'Actions'],
                colModel: [
                    { name: 'documentName', index: 'documentName', width: 200, editable: false },
                    { name: 'category', index: 'category', width: 100, editable: true, edittype: "select", editoptions: { value: "cl:Client;Ac:Account;Br:Branch"} },
                    { name: 'nameAccount', index: 'nameAccount', width: 170, editable: true },
                    { name: 'repId', index: 'repId', width: 70, editable: true, edittype: "select", editoptions: { value: "1:001A;2:001B;3:001C;4:001D"} },
                    { name: 'description', index: 'description', width: 100, editable: true, edittype: "select", editoptions: { value: "item:Item one;item:Item Two;item:Item Three"} },
                    { name: 'clientView', index: 'clientView', width: 90, editable: true, edittype: "checkbox", editoptions: { value: "Yes:No"} },
                    { name: 'documentDate', index: 'documentDate', width: 150, editable: true, editoptions: { dataInit: function (el) {
                        setTimeout(function () {
                            $(el).datepicker({
                                autoPopUp: 'button',
                                showOn: "both",
                                buttonImage: "~/Images/myCal.jpg",
                                buttonImageOnly: true,
                                buttonText: 'Calendar'
                            });
                        }, 10);
                    }, size:10, maxlength:100
                    }
                    },

                    { name: 'actions', index: 'actions', width: 70,  formatter:'actions',
                formatoptions: {keys: true, editbutton:true,delbutton:true } }

                ],

                onSelectRow: function (id) {
                    if (id && id !== lastsel) {
                        jQuery('#gridJQ').jqGrid('restoreRow', lastsel);
                        jQuery('#gridJQ').jqGrid('editRow', id, true);
                        lastsel = id;
                    }
                },
                editurl: "UploadDocument.aspx",
                caption: "FileUpload Grid"

            });

【问题讨论】：

标签： jquery jqgrid jqgrid-asp.net

【解决方案1】：

您需要在选项列中添加选项

colModel: [{
    name: 'documentName',
    index: 'documentName',
    width: 200,
    editable: false,

    //add the following in one of the colModel config
    formatter: 'actions',
    formatoptions: {
        keys: true,
        editformbutton: true
    }
}

Demo

【讨论】：

我将如何再添加一个动作？说我还需要view。