jqGridカスタム入力要素で親テーブルへのハンドルが必要

Question

jqGridを使用してページにカスタムインライン入力ウィジェットを作成しています。

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

そして、私のコールバック関数は次のとおりです：jqjGridセットアップの関連する部分はある

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テーブルを管理するライブラリを構築しています。私はそれらのテーブルのいくつかのカスタム要素を構築するために同じ関数を使用したいと思います。問題は、この特定のclick()関数が、どのjqueryテーブルを扱っているかを知る必要があることです。

私はcustomElementの先頭にハック方法を通じて、テーブルIDを取得し、関数にクロージャにそれを渡すことができます：

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

しかし、これは、列「ID」は、現在のjqGridに存在することを前提としてい、それはより早い（左に）列です。まだ作成されていないので、「船」列は使用できません。私は、テーブルに "船"列を持っている他の行があると仮定することはできません。

私は、custom_elementハンドラで確実に "呼び出し元"テーブルのハンドルを取得できますか？

Answer 1

私はそれがjqGridの現在のコードで問題であることに同意します。コントロールが作成されるグリッドのIDを取得する単純かつエレガントな方法はありません。

あなたが既に提案した回避策。私はあなたに "呼び出し元のテーブル"のIDを取得するためのもう一つのバージョンを提案することができます。

カスタム要素は、すべての編集モード（インライン編集、フォーム編集、セル編集）で使用できます。 clickは、あなたが「呼び出しグリッド」のIDを検出することができますEvent objecte

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

受信扱います。インライン編集やセル編集の場合、検出が最も簡単です。それはあなたが使用上のコードに編集フォームはIDがに基づいて構築される2つの要素が含まれているという事実を

.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)); 
    ... 
}) 

を使用することができます編集フォームのclickイベントハンドラの内部

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

になりますグリッドID：<table>編集フォーム内のエレメントは、グリッドID = "リスト"で、<form>エレメントのIDが "FrmGrid_list"の場合、id = "TblGrid_list"です。

グリッドIDにmeta charactersが含まれている場合に正しい結果が得られるので、の使用はより安全です。$('#' + gridId)jqIDの機能は非常に簡単です（here参照）。これは、jQueryセレクタで使用されているmeta charactersをエスケープするだけです。