合并几列JSON数据并在jqGrid中显示为单列 [英] Merge several columns of JSON data and display as single column in jqGrid
问题描述
我想将我要通过JSONP从Fusion Tables检索到的某些数据(3个地址列转换为1列)合并到jqGrid中.
I want to merge some of the data (3 address columns to 1 column) I am retrieving via JSONP from Fusion Tables into jqGrid.
有人知道这是否可行吗?不幸的是，Fusion Tables SQL API当前不通过SELECT命令支持CONCAT.
Does anyone know if this is possible/how to go about it? Unfortunately Fusion Tables SQL API does not currently support CONCAT via SELECT commands.
Oleg提供的代码基本上适用于2列，如果其中有较长的数据，但是我实际上想从几列中获取数据，并将其显示为jqGrid
Oleg provided code for basically colspan-ing 2 columns if one had long data, but I actually want to take the data from several columns and present it as just one column in jqGrid
预先感谢
编辑，添加了一段代码:
edit, added a snippet of code:
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表的通用公共数据示例(我的表基本上是相同的设置).稍后我将整理问题，以便人们可以轻松查看问题/答案:)
Here's a generic public data example from a .gov table (my table is basically the same setup). I'll tidy up the question later so people can easily see the question/answer :)
<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>
推荐答案
您可以使用自定义格式程序以根据行的任何输入数据来构造列包含. rowObject参数表示从服务器返回的数据行.自定义格式程序返回的字符串是将显示在单元格中的文本或HTML文本.
You can use custom formatter to construct column contain based on any input data for the row. The rowObject parameter represent the row of data returned from the server. The string returned by the custom formatter is the text or HTML text with will be displayed in the cell.
如果您在实现方面遇到问题，则应将URL与所使用的融合表一起发布.
If you would have implementation problem you should post the URL with the fusion table which you use.
更新:您可以通过不同的方式解决组合列的问题.第一个使用旧版本的jqGrid，只是将formatter函数重写为以下内容:
UPDATED: You can solve the problem of composed columns in different ways. The first one work with old version of jqGrid and is just rewriting of the formatter function to the following:
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.
The small disadvantage of the way is that you will have unneeded hidden columns address_line_2 and address_line_3 which you will not really use.
更优雅的解决方案是使用新的beforeProcessing回调函数(事件)(请参阅我对功能
More elegant solution will be to use new beforeProcessing callback function (event) (see my original suggestion to the feature here). The function will be called only in case of loading the data from the server. It allows you to modify the data returned from the server before the data will be processed by jqGrid. In the case you can event use default 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数据，也没有测试上面的代码，但是代码显示了如何根据服务器返回的原始数据来构造新数据.
I don't has your original JSON data and don't tested the code above, but the code shows how you can construct new data based on the original data returned from the server.
这篇关于合并几列JSON数据并在jqGrid中显示为单列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
