2

親子関係を示すためにjQGridを使用してサブグリッドを構築しようとしていました。私はマネージャーと従業員の関係をたどりました。サーバーでJSONを構築していますが、これがどのように見えるかです

{"total":1,"page":1,"records":20,
"rows":[{"id":"Mgr 001","EmpId":"Mgr 001","Manager Name":"Murali","Dept":"D1"
 ,"Employees":[{"EmpId":"Emp 100","Name":"Alex","Dept":"Infrastucture"}]}]

問題は、展開をクリックすると、ローカルに保存された employeeLocalJSON 変数からデータを見つけて、コレクションをサブグリッドに割り当てることです。しかし、サブグリッドには表示されませんでした。なぜそうなのか、私にはわかりません。サーバーからjsonをロードし、同じものを使用する必要があるサブグリッドを表示したいので、それをローカル変数employeeLocalJSONに保存しました。

ネストされた単一のjsonからjqgridサブグリッドをたどりました

「ローカル」データを持つjqGridサブグリッド

サブグリッドと単一の XML ファイルを入力とする JqGrid

これが私のjQGridコードです

$(function() {

var employeeLocalJSON;
jQuery("#list").jqGrid({
    //start
    url: '/Employee/Search',
    datatype: "json",
    postData: {
        searchModel: function () {
            var result = {}, i, item,
             formInfo = $('#search-form').serializeArray(),
             l = formInfo.length;
            for (i = 0; i < l; i++) {
                item = formInfo[i];
                result[item.name] = item.value;
            }
            return JSON.stringify(result);
        }
    },
    mtype: "POST",
    colNames: ['id', 'EmpId', 'Manager Name', 'Dept'],
    colModel: [
    { name: 'id', index: 'id', hidden: true, width: 1, align: 'left', key: true },
    { name: 'EmpId', index: 'EmpId', search: true, width: 260, align: 'left' },
    { name: 'ManagerName', index: 'ManagerName', search: false, width: 110, align: 'left' },
    { name: 'Dept', index: 'Dept', search: true, width: 54, align: 'left' }],
    pager: $("#pager"),
    rowNum: 20,
    rowList: [5, 10, 20, 50],
    sortname: 'EmpId',
    sortorder: "asc",
    viewrecords: true,
    loadonce: true,
    sortable: true,
    jsonReader: {
        repeatitems: false
    },
    loadComplete: function (data) {
        if (data.rows) {
            employeeLocalJSON = data.rows; // save original JSON data
        }
    },
    caption: 'Employee Manager Detail',
    subGrid: true,
    subGridOptions: {
        "plusicon": "ui-icon-triangle-1-e",
        "minusicon": "ui-icon-triangle-1-s",
        "openicon": "ui-icon-arrowreturn-1-e",
        "reloadOnExpand": false,
        "selectOnExpand": true
    },
    subGridRowExpanded: function (grid_id, row_id) {
        //            //start of subgrid row expanded
        var subgrid_table_id, pager_id;
        subgrid_table_id = grid_id + "_tone";
        pager_id = "pone_" + subgrid_table_id;
        $("#" + grid_id).html("<table id='" + subgrid_table_id + "' class='scroll' style='width:100%'></table><div id='" + pager_id + "' class='scroll'></div>");
        var indexes = $(this).jqGrid('getGridParam', '_index');

        var empList = employeeLocalJSON[indexes[row_id]].Employees;

        $("#" + subgrid_table_id).jqGrid({
            datatype: 'local',
            data: empList,
            colNames: ['EmpId', 'Name', 'Dept'],
            colModel: [
                        { name: 'EmpId', width: 170 },
                        { name: 'Name', width: 110 },
                        { name: 'Dept', width: 60 }
                       ],
            sortname: 'EmpId',
            viewrecords: true,
            sortorder: "asc",
            width: 960
        });
    }

    //end
});
//                         });
jQuery("#list").jqGrid('navGrid', '#pager', { add: false, edit: false, del: false });
});

単一の JSON からサブグリッドをロードするにはどうすればよいですか? 私のコードで何が間違っている可能性がありますか? データをバインドしてもサブグリッドが表示されない

4

1 に答える 1

2

あなたが持っている最初の重要な問題は、値でのスペースの使用idです(データを参照"id":"Mgr 001"してください)。問題を解決するための 2 つの代替案を提案できます。最初の 1 つは、ID 値を生成する方法のアルゴリズムを変更することです。たとえば、可能であれば ID からすべてのスペースを削除する" "か、他の文字に置き換えることができます。もう 1 つの方法は、jqGrid コードの行を変更することです。

return String(sid).replace(/[!"#$%&'()*+,.\/:;<=>?@\[\\\]\^`{|}~]/g,"\\$&");

に

return String(sid).replace(/[!"#$%&'()* +,.\/:;<=>?@\[\\\]\^`{|}~]/g,"\\$&");

(jqGrid でエンコードする必要がある文字のリストにスペースを追加します)。

サブグリッド情報をメイン グリッド データと一緒に1 つの応答で投稿するには、jqGrid のパラメーターuserdataとして後でアクセスされる JSON の一部を使用することをお勧めします (大文字と小文字が区別されます!!!)。"userData"サーバー側でこれを行うことができない場合は、beforeProcessingコールバック内でサーバー応答の対応する変換を行うことができます。対応するコード例については、回答を参照してください。

更新: . _ _ idちょうど今 (ここを参照) 変更は jqGrid のメイン コードに含まれています。そのため、次のバージョン (現在の 4.4.3 以降) では、jqGrid はスペースを含む ID で動作します。

于 2013-01-28T11:46:30.633 に答える