Как добавить значки редактирования и удаления в столбце jQGrid Actions

Question

Кто-нибудь, пожалуйста, помогите мне добавить значки редактирования и удаления в точности так, как показано в приведенной ниже демонстрационной ссылке. http://www.trirand.net/aspnetmvc/grid/EditRowInlineActionIcons

Ниже мой JQGrid. Я попытался добавить форматирование: «действия», formatoptions: {keys: true, editbutton: true, delbutton: true}

, но не повезло в отображении значков для редактирования и удаления. Я думаю, мне нужно передать источники изображений для редактирования и удалять значки где-то, чего я не знаю. А также нужно написать код для обработки событий кликов значков. Может ли кто-нибудь дать мне базовый пример добавления значков редактирования и удаления в столбце «Действия» для встроенного редактирования?

Только FYI, Это не приложение 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