0

以下のデモリンクに示されているように、編集アイコンと削除アイコンを正確に追加するのを手伝ってください。http://www.trirand.net/aspnetmvc/grid/EditRowInlineActionIcons

以下は私のJQGridです。formatter:'actions', formatoptions: {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"

            });
4

1 に答える 1

2

次のような列オプションにオプションを追加する必要があります

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

于 2013-08-06T04:51:22.507 に答える