2012-02-03 58 views
1

我使用jqGrid在頁面上構建自定義內聯條目小部件。在jqjGrid設置的相關部分是:jqGrid自定義輸入元素需要父表處理

colModel:[ { 
     // Other columns removed. 
    {name:'ship',index:'ship', width:90, editable: true, sortable: false, 
      edittype: "custom", 
      editoptions:{ custom_element: customElement, 
          custom_value: customValue} } 
    ], 

我的回調函數是:

function customElement(value, options) { 
    var a = $("<input>").attr({ 
       type: 'text', 
       size: 2, 
       value: value, 
       style: 'float: left' 
     }).add(
      $("<span>").attr({ 
       style: 'float: left; margin-top: 2px;', 
       'class': 'ui-icon ui-icon-search' 
     }).click(function() { 
        // My custom function here. 
      }) 
     ).appendTo($("<div>")); 

    return a; 
} 

這一切都正常工作。

但是,我正在建立一個庫來管理頁面上的幾個jqgrid表。我想使用相同的函數在幾個這樣的表上構建自定義元素。問題是這個特定的函數需要知道它正在處理哪個jQuery表。

我可以在customElement開始通過哈克的方式獲得表ID,並在關閉它傳遞給函數:

var fieldID = options.id; 
var rowID = fieldID.replace(/_.*/, ""); 
var containingTable = $("#" + rowID + "_id").closest("table"); 

但這是假設列「ID」在當前的jqGrid存在,它是較早的(向左)列。我無法使用「發貨」欄,因爲它尚未創建。我不能假設表中有其他行也會有「發貨」列。

我該如何在custom_element處理程序中可靠地獲取「調用」表的句柄?

回答

1

我同意這是jqGrid的當前代碼中的一個問題。沒有簡單而優雅的方式來獲取創建控件的網格的id。

您已經建議了一種解決方法。我可以建議你多一個版本來獲得「調用表」的ID。

自定義元素可用於每種編輯模式:內聯編輯,表單編輯和單元格編輯。該click處理接收Event objecte

.click(function(e) { 
    // My custom function here. 
}) 

,你可以檢測到「主叫網格」的ID。在線編輯或單元格編輯的情況下,檢測是最容易的。這將是

.click(function(e) { 
    var $grid = $(e.target).closest('table.ui-jqgrid-btable'); 
    ... 
}) 

裏面的形式編輯的click事件處理程序,你可以使用

.click(function(e) { 
    // you can do the following 
    var $t = $(e.target).closest('table.EditTable'), 
     tid = $t.attr('id'); // id=TblGrid_list 
    if (typeof tid === "string" && tid.substr(0, 8) === 'TblGrid_') { 
     var gridId = tid.substr(8); 
    } 
    var grid = $('#' + $.jgrid.jqID(gridId)); 

    // or the following 
    var $f = $(e.target).closest('form.FormGrid'), 
     fid = $f.attr('id'); // id=FrmGrid_list 
    if (typeof fid === "string" && fid.substr(0, 8) === 'FrmGrid_') { 
     var grid_id = tid.substr(8); 
    } 
    var mygrid = $('#' + $.jgrid.jqID(grid_id)); 
    ... 
}) 

上面的代碼使用編輯表單包含IDS將根據構造兩個元素的事實網格ID:如果網格ID =「列表」且<form>元素具有ID =「FrmGrid_list」,則編輯表單中的<table>元素具有id =「TblGrid_list」。

$('#' + $.jgrid.jqID(gridId))的使用與$('#' + gridId)更安全,因爲在網格ID包含meta characters的情況下,它會給出正確的結果。 jqID功能非常簡單(請參閱here)。它只是逃避在jQuery選擇器中使用的meta characters