jqgrid自定義列

我在我的應用程序中使用Jqgrid。我想創建一個有2個按鈕的列。我想列中，因爲按鈕可能會根據行的數據而有所不同。我搜索了它，我可以找到只使用自定義格式化選項創建按鈕，但它只出現在雙擊一行或編輯一行，但我希望它顯示在列本身。任何幫助或包含信息的鏈接將不勝感激。以下是我的網格代碼。需要用按鈕創建另一列。jqgrid自定義列

編輯：

var grid = $(gridId); 
grid.jqGrid({ 
    data: gridData, 
    datatype: "local", 
    gridview: true, 
    colModel: [ 
     { 
      label: 'Employee Name', name: 'employeeName', width: 195, editable:true, 
      sortable:true, editrules:{required:true} 
     }, 
     { 
      label: 'Address', name: 'address', width: 170, editable:true, 
      sortable:true, 
      editrules:{required:true} 
     }, 
     { 
      label: 'Department', name: 'department', width: 120, editable:true, 
      sortable:true, 
      edittype:'custom', 
      editoptions: { 
       'custom_element' : populateReturnTypeAutocomplete, 
       'custom_value' : autocomplete_value 
       }, 
      editrules:{required:true} 
     }, 
    });

來源

2012-08-28 Mojoy

自定義格式化程序應該滿足您的需求，請編輯您的問題並添加網格聲明和自定義格式化程序的代碼，我們將能夠更好地爲您提供幫助。 –

我的回答對你有幫助嗎？ –

奧凱在gridComplete或loadComplete添加到您的colModal

{label: 'My Custom Column', name: 'custom', index:'custom' width: 120}

現在添加以下代碼

var grid = $("#grid"), 
     iCol = getColumnIndexByName(grid,'custom'); // 'custom' - name of the actions column 
     grid.children("tbody") 
       .children("tr.jqgrow") 
       .children("td:nth-child("+(iCol+1)+")") 
       .each(function() { 
       $("<div>", 
         { 
          title: "button1", 
          mouseover: function() { 
           $(this).addClass('ui-state-hover'); 
          }, 
          mouseout: function() { 
           $(this).removeClass('ui-state-hover'); 
          }, 
          click: 
          handle your click function here 
          } 
        ).css({"margin-left": "5px", float:"left"}) 
         .addClass("ui-pg-div ui-inline-save") 
         .attr('id',"customId") 
         .append('<span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>') 
         .appendTo($(this).children("div")); 




$("<div>", 
          { 
           title: "custombutton 2", 
           mouseover: function() { 
            $(this).addClass('ui-state-hover'); 
           }, 
           mouseout: function() { 
            $(this).removeClass('ui-state-hover'); 
           }, 
           click: 
           handle click here 
           } 
         ).css({"margin-left": "5px", float:"left"}) 
          .addClass("ui-pg-div ui-inline-custom") 
          .attr('id',"customButton2") 
          .append('<span class="ui-button-icon-primary ui-icon ui-icon-circle-check"></span>') 
          .appendTo($(this).children("div"));

現在這些圖標我加入這裏將提供jquery ui.css，你將不得不添加你的腳本還有一個函數，它將爲你的'自定義'列索引排隊第一個上面的代碼。

var getColumnIndexByName = function(grid,columnName) { 
       var cm = grid.jqGrid('getGridParam','colModel'), i=0,l=cm.length; 
       for (; i<l; i+=1) { 
        if (cm[i].name===columnName) { 
         return i; // return the index 
        } 
       } 
       return -1; 
      };

我希望這會有所幫助。

來源

2012-08-29 05:39:27

謝謝Piyush Sardana。你的代碼真的幫了我。這是我正在尋找的。 – Mojoy

jqgrid自定義列

回答

相關問題