Question

在jqxGrid中，如何从JSON数据中添加新的计算列？

我的JSON数据包含字段baseQuantity和unitCost。我想添加一个名为totalCost的新字段，它将是baseQuantity * unitCost。

我尝试使用loadComplete添加数据，但它似乎无法正常工作。

我可以做的另一个选择是遍历objData并使用计算值注入一个新字段。但除此之外，有什么办法可以通过jqxGrid的API来实现吗？

var jsonString = [{ "baseQuantity":"1", "unitCost":"2"}, { "baseQuantity":"3", "unitCost":"4"}];
var objData = $.parseJSON(jsonString);

var srcData = {
        datatype: "json",
        datafields: [ 
            { name : 'baseQuantity', type : 'number' },
            { name : 'unitCost', type : 'number' }
        ],
        localdata : objData
    };

var adapterData =  new $.jqx.dataAdapter(srcData, {
    loadComplete: function (records) {
        var modifiedDataArray = new Array();
        for (var i = 0; i < records.length; i++) {

            var modifiedData = records[i];
            modifiedData.totalPayment = modifiedData.baseQuantity * modifiedData.unitCost;

            modifiedDataArray.push(programme);
        }
        return modifiedDataArray;
    }
});

$('div#jqxGrid').jqxGrid({
    width: '100%',
    source: adapterData,
    theme: getTheme(),
    pageable: true,
    autoheight: true,
    sortable: true,
    altrows: true,
    columns: [
        { datafield: 'baseQuantity', text: 'Base Qty.', width: 120 }
        { datafield: 'unitCost', text: 'Unit Payment' , width: 120 }
    ]
});

Answer 1

使用cellrenderer函数：

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm

{ text: 'totalCost', datafield: 'totalCost', width: 70, cellsalign: 'right', columntype: 'number',
  cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
            var rowData = $("#jqxGrid").jqxGrid('getrowdata', row);
            return rowData.baseQuantity * rowData.unitCost;
        }   
}

Answer 2

请勿使用事件“loadComplete”，而应使用“beforeLoadComplete”。这是一个例子：

var dataAdapter = new $.jqx.dataAdapter(source,
    {
        beforeLoadComplete: function (records) {
            records[0]['firstname'] = "Michael";
            return records;
        }
    }
);

您可以遍历所有记录，并生成计算列。这是他们似乎在这里给出的官方解决方案：http://www.jqwidgets.com/community/topic/computed-column/

在jqxGrid中，如何从JSON数据添加新的计算列？

2 个答案: