如何在"jQGrid操作"列中添加“编辑"和“删除"图标 [英] How to add Edit and Delete Icons in jQGrid Actions column

问题描述

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

Somebody please help me adding edit and delete icons exactly as shown in the below demo link. http://www.trirand.net/aspnetmvc/grid/EditRowInlineActionIcons

下面是我的JQGrid.我尝试添加formatter:'actions'， 格式选项:{keys:true，editbutton:true，delbutton:true}

Below is my JQGrid. I tried adding formatter:'actions', formatoptions: {keys: true, editbutton:true,delbutton:true }

但是在显示用于编辑和删除的图标时没有运气.我想我需要将图像源传递给我不知道的地方以进行编辑和删除图标.并且还需要编写一些代码来处理图标的单击事件.有人可以给我一个在操作"列中添加编辑和删除图标进行内联编辑的基本示例吗?

but no luck in displaying the icons for edit and delete. I think I need to pass the Image sources for edit and delete icons somewhere, which I don't know. And also need to write some code to handle the click events of the icons. Can anybody please give me a basic example for adding edit and delete icons in the "Actions" column for inline editing?

仅供参考， 这不是MVC应用，而是ASP.Net4.0.我正在将这个网格绑定到一个表上，目前所有代码都在.js文件中.

Just an FYI, This is not MVC app, its ASP.Net4.0. I am binding this grid to a table, all the code is in .js file for now.

_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"

            });

推荐答案

您需要在列选项中添加该选项，例如

You need to add the option in the column options like

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

演示

这篇关于如何在"jQGrid操作"列中添加“编辑"和“删除"图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！