1

私はjqGridを使用していますが、それを実装するための最良のソリューションを知りたいです。バックボーンとjQueryを使用しています。必要な機能は次のとおりです

  1. ハイパーリンクのある列。編集/削除/カスタムハイパーリンクになります。
  2. リンクをクリックすると、基本的には、関数を呼び出すだけでナビゲートするべきではありません。たとえば、削除すると、行が削除されます。
  3. ハイパーリンク列の数は動的です。

ハイパーリンクは2つの方法で実行できます

1）showlinkフォーマッターまたはカスタマーフォーマッターを使用します。問題は、グローバル関数showlinkしか呼び出せず、イベントロジックを関数で記述することに抵抗があることです。私のグリッドは再利用可能であり、ハイパーリンクを持つ列の数がわからないためです。だから私はこのようなカスタムフォーマッターを使用していますclickloadComplete

deleteLinkFmatter : function(cellvalue, options, rowObject)
{
   return '<a onclick="deleteRow(' + options.rowId + ')">'+ cellvalue + '</a>';
}

上記のコードの問題は、backbone.jsそれdeleteRowが見つからないということです。私はこのサイトで提案されたさまざまな方法を見つけましたが、すべて無駄でした。誰かが解決策を提案できますか？

4

1 に答える 1

3

事前定義されたフォーマッターのshowlinkがハイパーリンクに向けられており、リンクをクリックしてカスタムJavaScript関数を開始する必要がある場合に備えて快適ではないことに同意します。それにもかかわらず、答えshowlinkには、ケースでどのように使用できるかを説明するコードがあります。

編集/削除/カスタムハイパーリンクを別々の列に追加したい場合は、ここdynamicLinkで記述および説明した簡単に使用できます。あなたが属性で呼び出す関数がグローバルレベルで定義されなければならないと書くなら、あなたは正しいです。のような一般的なグローバル名前空間を使用して、名前空間から呼び出すことができる多くの関数を定義できることを忘れないでください。たとえば、ここからダウンロードできるものは、と同じように使用できます。例えばonclick<a>jQueryjQuerydynamicLinkshowlink

{ name: 'editlink', formatter: 'dynamicLink',
    formatoptions: {
        onClick: function (rowid, iRow, iCol, cellText, e) {
            // any your code
        }
    }}

実装では、$.fn.fmatter.dynamicLink.onClickからのメソッドが属性dynamicLinkで使用されonclickます。

控えめなJavaScriptスタイルを使用したい場合は、次の回答を読むことをお勧めします：this、this、thisと、対応するデモthis、this、this。または、列挙を少し単純化するdoInEachRowを使用することもできます

loadComplete: function() {
    var iCol = getColumnIndexByName.call(this, 'editlink'); // get index of the column

    $(this).jqGrid('doInEachRow', function (row, rowId, localRowData) {
        $(row.cells[iCol]).children("a").click(function (e) {
            e.preventDefault();
            // any your code here
        });
    });
}

どこ

var getColumnIndexByName = function (columnName) {
        var $this = $(this), cm = $this.jqGrid('getGridParam', 'colModel'), i,
            l = cm.length;

        for (i = 0; i < l; i++) {
            if (cm[i].name === columnName) {
                return i; // return the index
            }
        }
        return -1;
    };

<a>1つの列に多数のハイパーリンクを配置する場合は、上記のコードを簡単に変更できます。この場合、 toまたはand.children("a")の一部を置き換えるだけで、1番目、2番目、または3番目のハイパーリンクへのバインドを定義できます（「編集」/「追加」/「削除」）。変数に保存して、変数とともに使用することをお勧めします。$(row.cells[iCol]).children("a").click(function (e) {.children("a").eq(0).children("a").eq(1).children("a").eq(2)$(row.cells[iCol]).children("a").eq(1)

もう1つの方法は、すべてを定義せず<a>に、たとえば<span>（下線付きの装飾または背景画像を使用して）使用することです。デフォルトのハイパーリンクアクションを抑制する必要がない場合<table>、グリッド本体を定義する要素までクリックイベントはバブルになります。したがって、onCellSelectまたはbeforeSelectRowイベントを使用してJavaScriptコードをバインドできます。イベントのEvent（eパラメーター）を使用して、クリックされた行と列に関するすべての情報を取得できます。var $cell = $(e.target).closest('td')クリックされたセルvar $row = $cell.closest('tr.jqgrow')を取得し、クリックされた行を取得$row.attr('id')し、ROWIDになりvar iCol = $.jgrid.getCellIndex($cell[0])、列インデックスを取得します。this.p.colModel[iCol].nameクリックされた列の名前です。あなたはここでもっと多くの方法を読むことができます。

どのようにあなたがあなたが使うことができる本当に多くのオプションを持っているかを見ることができます。したがって、要件に適切に対応する方法を選択できます。

于 2012-05-07T09:43:07.047 に答える