合并几列JSON数据并在jqGrid中显示为单列

Question

我想将我通过 JSONP 从 Fusion Tables 检索到的一些数据（3 个地址列到 1 个列）合并到 jqGrid 中。

有谁知道这是否可能/如何去做？不幸的是，Fusion Tables SQL API 目前不支持通过 SELECT 命令进行 CONCAT。

Oleg provided code 如果一列有长数据，则基本上可以跨 2 列，但我实际上想从几列中获取数据并将其呈现为 jqGrid 中的 one 列

提前致谢

编辑，添加了一段sn-p代码：

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 表的通用公共数据示例（我的表的设置基本相同）。我稍后会整理问题，以便人们可以轻松查看问题/答案:)

<script type="text/javascript"> 
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
});
</script>

Answer 1

您可以使用custom formatter 根据行的任何输入数据构造列包含。 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 回调函数（事件）（请参阅我对功能here 的原始建议）。 只有在从服务器加载数据时才会调用该函数。它允许您修改从服务器返回的数据在数据将被 jqGrid 处理。在这种情况下，您可以使用默认的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 数据，也没有测试上面的代码，但代码显示了如何根据服务器返回的原始数据构造新数据。