Wie hinzufügen, Bearbeiten und Löschen von Icons im jQGrid in der Spalte Aktionen

Jemand bitte helfen Sie mir, hinzufügen, Bearbeiten und löschen von icons genau, wie in der folgenden demo-link. http://www.trirand.net/aspnetmvc/grid/EditRowInlineActionIcons

Unten ist mein JQGrid. Ich habe versucht, das hinzufügen formatter:'Aktionen',
formatoptions: {Schlüssel: true, editbutton:true,delbutton:true }

aber kein Glück in der Anzeige die Symbole für Bearbeiten und löschen. Ich glaube, ich muss das Bild die Quellen für das Bearbeiten und löschen von icons irgendwo, das weiß ich nicht. Und muss auch schreiben einige code für die click-Ereignisse der Symbole. Kann jemand bitte geben Sie mir ein einfaches Beispiel für das hinzufügen, Bearbeiten und löschen Symbole in der Spalte "Aktionen" für die inline-Bearbeitung?

Nur ein FYI,
Dies ist nicht der MVC-app, Ihr ASP.Net4.0. Ich bin verbindlich, dieses Gitter zu einem Tisch, der gesamte code ist in .js-Datei für jetzt.

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

            });
InformationsquelleAutor Naveen Reddy | 2013-08-05
Schreibe einen Kommentar