0

ページの読み込み時にテーブルデータを表示するために、アプリケーションでjqGridを使用するのが好きです。初めて、サーバーからHTMLを作成し、tableToGridプラグインを使用してjqGridに変換したいと思います。

しかし、私はここで奇妙な問題に直面しています。tableToGridは、同じ行にテーブルhtmlを指定すると、テーブルをフォーマットします（JS BINデモはこちら）。しかし、整列した場合、同じHTMLコードが機能しません（ここではJS BINデモ）。しかし、どちらも同じHTMLです

上記の奇妙な問題について誰かが私を助けることができますか？

編集：VisualStudioを使用し、Ctrl + K+Dを使用してコードを調整します

問題はTDの高さです

この画像を参照してください。cssで22pxの高さを示していますが、39pxを使用しています。整列されたコードでのみ発生します。 ここに画像の説明を入力してください

必要なのは、ページの読み込み時にjqGridを構築し（document.readyでajax呼び出しを使用しない）、さらにAjaxを使用することだけです。初めてローカルデータを使用し、jsonをさらにajax呼び出しに使用できる可能性があります。しかし、私はそのような例を見ていません。例があれば教えてください。

4

2 に答える 2

1

縫い目の使用法はtableToGrid一見しただけで良いです。試してみるほど、間違った方向に進んでいることがわかります。jqGridは、データを視覚的表現（フォーマット）と区別するための設計です。データを入力した場合にのみ、グリッドからのデータを正しく並べ替えてフィルタリングできます。

これが私が何を意味するかを示す小さなデモです：

ここに画像の説明を入力してください

データの分離とデータの視覚化により、正しい並べ替えと検索/フィルタリングを行うことができます。

ここに画像の説明を入力してください

対応するJavaScriptコードは非常に簡単です。

$(function () {
    var d = [
        {id: "r1", name: "Bob", age: 10, married: false },
        {id: "r2", name: "Jim", age: 5, married: false },
        {id: "r3", name: "Marry", age: 29, married: true }
    ];
    $("#grid").jqGrid({
        datatype: "local",
        data: d,
        colNames: ["Name", "Age", "Married"],
        colModel: [
            {name: "name", width: 220},
            {name: "age", formatter: "integer", align: "right", sorttype: "integer", width: 90,
                searchoptions: {sopt: ['eq','ne','lt','le','gt','ge'] }}, 
            {name: "married", formatter: "checkbox", align: "center", width: 80,
              stype: "select", searchoptions: { sopt: ['eq', 'ne'], value: ":Any;true:Yes;false:No" }}
        ],
        sortname: "age",
        sortorder: "desc",
        ignoreCase: true,
        height: "auto",
        rowNum: 10000 // no paging of data
    });
    $("#grid").jqGrid("filterToolbar", {defaultSearch: "cn", searchOnEnter: false, stringResult: "true"});
});

更新：サーバーから読み込まれたJSONの使用法も非常に簡単です。デモはこれを示しています。

ここに画像の説明を入力してください

コードは

$(function () {
    $("#grid").jqGrid({
        url: "Murali.json",
        datatype: "json",
        colNames: ["Name", "Age", "Married"],
        colModel: [
            {name: "name", width: 220},
            {name: "age", formatter: "integer", align: "right", 
                sorttype: "integer", width: 50,
                searchoptions: {sopt: ['eq','ne','lt','le','gt','ge'] }},
            {name: "married", formatter: "checkbox", align: "center",
                width: 80, stype: "select",
                searchoptions: { sopt: ['eq', 'ne'], value: ":Any;true:Yes;false:No" }}
        ],
        ignoreCase: true,
        height: "auto",
        rowNum: 10,
        sortname: "name",
        pager: "#pager",
        loadonce: true,
        jsonReader: {
            repeatitems: false,
            root: function (obj) { return obj; }
        }
    });
    $("#grid").jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});
    $("#grid").jqGrid("filterToolbar",
        {defaultSearch: "cn", searchOnEnter: false, stringResult: "true"});
});
于 2012-11-24T13:13:49.983 に答える
0

私はあなたのコードをコピーして、私のシステムのhtmlページでそれを試しました。機能した。また、タグが1行で指定されている場合、jsbinで機能するようです。おそらくjsbinに関連する問題です。それ以外の場合は、htmlファイルとして実行しようとしたときに機能しないはずです。

于 2012-11-24T07:26:22.450 に答える