JSONデータの複数の列をマージし、jqGridで単一の列として表示します

google-fusion-tables jqgrid json jsonp
JSONデータの複数の列をマージし、jqGridで単一の列として表示します

FusionTablesからJSONPを介してjqGridに取得するデータの一部(3つのアドレス列を1つの列に)をマージします。

これが可能かどうか、誰がどのように対処するか知っていますか? 残念ながら、Fusion Tables SQL APIは現在、SELECTコマンドによるCONCATをサポートしていません。

Oleg提供コード基本的に2つの列が長いデータを持っている場合は2列をcolspan-ingしますが、実際には複数の列からデータを取得し、jqGridの_one_列として提示します

前もって感謝します

編集、コードのスニペットを追加:

datatype: "jsonp", // "json" or "jsonp"
colNames: ["id","lat","long","Name","Address","","","Postcode"],
colModel:[
    {name:'id',index:'id',key:true,sorttype:'int',hidden:true,sortable:true},
    {name:'latitude',index:'latitude',hidden:true},
    {name:'longitude',index:'longitude',hidden:true},
    {name:'name',index:'name',width:170,sortable:false,sorttype:'text'},
    {name:'address_line_1',index:'address_line_1',width:400,formatter:function (cellvalue, options, rowObject) {
        addPart1 = rowObject[4];
        addPart2 = rowObject[5];
        addPart3 = rowObject[6];
        fullAddress = addPart1 + addPart2 + addPart3;
        return fullAddress;},sortable:false,sorttype:'text'},
    {name:'address_line_2',index:'address_line_2',sortable:false,sorttype:'text',hidden:true},
    {name:'address_line_3',index:'address_line_3',sortable:false,sorttype:'text',hidden:true},
    {name:'postcode',label:'postcode',width:80,sortable:false,sorttype:'text'}
],
jsonReader: {
    cell: "", // the same as cell: function (obj) { return obj; }
    root: "table.rows",
    page: function (obj) { return 1; },
    total: function (obj) { return 1; },
    records: function (obj) { return obj.table.rows.length; }
},
govテーブルの一般的なパブリックデータの例を次に示します(私のテーブルは基本的に同じセットアップです)。 後で質問を整理して、人々が質問/回答を簡単に見られるようにします:)
var queryText = "SELECT * FROM 185189";
jQuery(document).ready(function() {
    jQuery("#rTable").jqGrid({
        url: 'http://www.google.com/fusiontables/api/query?sql=' +
              encodeURI(queryText) + '&jsonCallback=?',
        postData: "",
        datatype: "jsonp",
        colNames: ["col1","col2","col3","col4"],
        colModel:[
            {name:'FACID',index:'FACID',key:true,sorttype:'int',sortable:true},
            {name:'FACNAME',index:'FACNAME'},
            {name:'FAC_ADDRESS1',index:'FAC_ADDRESS1',sortable:false,sorttype:'text'},
            {name:'FAC_ADDRESS2',index:'FAC_ADDRESS2',sortable:false,sorttype:'text'}
        ],
        jsonReader: {
            cell: "",
            root: "table.rows",
            page: function (obj) { return 1; },
            total: function (obj) { return 1; },
            records: function (obj) { return obj.table.rows.length; }
        },
        rowNum:10,
        rowList:[10,20,30],
        pager: '#pager2',
        sortname: 'name',
        sortorder: "asc",
        viewrecords: true,
        loadonce: true,
        height: "100%",
        multiselect: true,
        caption: ""
    }); // END CREATE GRID
    jQuery("#rTable").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false}); // paging options
});

  1  0


ベストアンサー

http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3acustom_formatter#definition_and_parameters [カスタムフォーマッター]を使用して、行の入力データに基づいて列を構成できます。 `rowObject`パラメーターはサーバーから返されたデータの行を表します。 カスタムフォーマッタによって返される文字列は、セルに表示されるテキストまたはHTMLテキストです。

実装に問題がある場合は、使用するフュージョンテーブルとともにURLを投稿する必要があります。

更新済み:構成された列の問題をさまざまな方法で解決できます。 最初のものは古いバージョンのjqGridで動作し、 `formatter`関数を次のように書き換えるだけです。

formatter: function (cellvalue, options, rowObject) {
    var rowObject = arguments[2];
    if ($.isArray(rowObject)) {
        return rowObject[4] + rowObject[5] + rowObject[6];
    } else {
        return rowObject.address_line_1 +
            rowObject.address_line_2 +
            rowObject.address_line_3;
    }
}

この方法の小さな欠点は、実際には使用しない不必要な隠し列 address_line_2`と address_line_3`があることです。

よりエレガントな解決策は、新しい「beforeProcessing」コールバック関数(イベント)を使用することです(機能への私の元の提案を参照してくださいhttp://www.trirand.com/blog/?page_id=393/bugs/small-improvements-in-ajax -which-load-grid-contain /#p24716 [here])。 この関数は、サーバーからデータをロードする場合にのみ呼び出されます_。 jqGrid_によってデータが処理される前に、サーバーから返されたデータを_modify_できます。 この場合、デフォルトの `jsonReader`を使用してイベントを作成できます:

colNames: ["lat", "long", "Name", "Address", "Postcode"],
colModel:[
    {name: 'latitude', hidden: true},
    {name: 'longitude', hidden: true},
    {name: 'name', width: 170},
    {name: 'address_line', width: 400},
    {name: 'postcode', width: 80}
],
cmTemplate: { sortable: false },
beforeProcessing: function (data) {
    var rows = data.table.rows, length = rows.length, i = 0, row;
    data.page = 1;
    data.total = 1;
    data.records = length;
    data.rows = [];
    for (; i < length; i += 1) {
        row = rows[i];
        data.rows.push({
            id: row[0],
            cell: [row[1], row[2], row[3], row[4] + row[5] + row[6], row[7]]
        });
    }
    delete data.table;
}

元のJSONデータはなく、上記のコードもテストしていませんが、コードは、サーバーから返された元のデータに基づいて新しいデータを構築する方法を示しています。

0


タイトルとURLをコピーしました