Question

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

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

但在显示编辑和删除图标方面没有运气。我想我需要传递Image源来编辑和删除图标，我不知道。还需要编写一些代码来处理图标的点击事件。有人可以给我一个基本的例子，在“操作”列中添加编辑和删除图标以进行内联编辑吗？

仅供参考，这不是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"

            });

Answer 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

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

1 个答案: