7

普通の古い html テーブルを jqGrid に変換しようとしています。古いテーブルには、順序付けられていないリストとリスト項目を使用して作成されたタグを含む列があります。

前のテーブルと後の jqGridの例 (jsfiddle)を次に示します。

この例では、 jQuery テンプレートを使用して DOM 要素を構築するカスタム フォーマッタを使用しており、フォーマッタは結果の DOM 要素から $.html() を返します。

function getTagCellContents(cellvalue) {
    var domitems=$("#jqgrid-tag-list-item").tmpl({tags: callvalue});
    return domitems.html();
}

これで私が抱えていた問題は、結果の html に空白が含まれているために行が高すぎることです。これにより、セルの「タイトル」属性も扱いにくくなります。

jqGrid は、カスタム フォーマッタからテキストを返すのではなく、セルに DOM オブジェクトを直接挿入するための API を提供していますか? カスタマイズされたhtmlをjqGridセルに配置するためのベストプラクティスは何ですか?

4

1 に答える 1

8

あなたの質問は非常に興味深いと思うので、質問に対して私から +1 します。

カスタム フォーマッタの使用に関する主な理解上の問題は、コールバック関数が HTML フラグメントを string として返す必要があることです。その利点は、大規模なグリッドで主に見られる優れたパフォーマンスです。DOM 要素を操作し、次のような構成を使用すると、domitems.html()パフォーマンスがあまり良くありません。

まずは$.templatejQuery Templatesの機能を使うことをお勧めします。DOM を使用せずに文字列を操作できます。たとえば、答えは、コードの変更の主なアイデアを説明しています。

主な問題を解決するに\nは、文字列からスペースを削除することをお勧めします。私は正規表現の専門家ではないので、次の迅速で汚い解決策をお勧めします。

// Create and cache a named template function
$("#jqgrid-tag-list-item").template("cellContents");
var tmpl = $.template("cellContents"); // template function

function getTagCellContents(a) {
    var strings = tmpl($, {data: {tags: a}}); // array of strings
    return strings.join('')
               .replace(/\n+/g,'')
               .replace(/\s+/g,' ')
               .replace(/> </g,'><');
}

このような変更を行った後のjsfiddle デモは次のようになります。

于 2013-09-11T09:44:14.773 に答える