Объединить несколько столбцов данных JSON и отобразить как один столбец в jqGrid - PullRequest
Новая
       26

Объединить несколько столбцов данных JSON и отобразить как один столбец в jqGrid

1 голос
/ 27 октября 2011

Я хочу объединить некоторые данные (от 3 адресных столбцов до 1 столбца), которые я получаю через JSONP из таблиц Fusion, в jqGrid.

Кто-нибудь знает, возможно ли это / как это сделать? К сожалению, API-интерфейс Fusion Tables в настоящее время не поддерживает CONCAT с помощью команд SELECT.

Олег предоставил код для двух основных столбцов, если у одного были длинные данные, но я на самом деле хочу взять данные из нескольких столбцов и представить их как один столбец в jqGrid

Заранее спасибо

редактировать, добавлен фрагмент кода: 

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>

1 Ответ

0 голосов
/ 27 октября 2011

Вы можете использовать пользовательский форматер для построения столбцов, содержащихся на основе любых входных данных для строки. Параметр rowObject представляет строку данных, возвращаемых с сервера. Строка, возвращаемая пользовательским форматером, представляет собой текст или текст HTML, который будет отображаться в ячейке.

Если у вас возникнут проблемы с реализацией, вы должны опубликовать URL с таблицей fusion, которую вы используете.

ОБНОВЛЕНО : Вы можете решить проблему составных столбцов различными способами. Первый работает со старой версией 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 (см. Мое первоначальное предложение по функции здесь ). Функция будет вызываться только в случае загрузки данных с сервера . Это позволяет вам изменить данные, возвращенные с сервера до , данные будут обработаны 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 и я не тестировал приведенный выше код, но код показывает, как вы можете создать новые данные на основе исходных данных, возвращаемых с сервера.

...