如何添加編輯和刪除圖標在jQGrid操作列

有人請幫助我添加編輯和刪除圖標完全如下面的演示鏈接所示。 http://www.trirand.net/aspnetmvc/grid/EditRowInlineActionIcons 如何添加編輯和刪除圖標在jQGrid操作列

以下是我的JQGrid。我嘗試添加格式化程序：'actions'， 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" 

      });

來源

2013-08-05 Naveen Reddy

您需要添加的選項列選項，如

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-06 04:51:22 zsong

我將如何增加一個行動是什麼？說我也需要一個「視圖」。 –

如何添加編輯和刪除圖標在jQGrid操作列

回答

相關問題