JqxTable

by Alexey Sharifullin

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="table"></div>

JavaScript

var data = new Array();

for (var i = 0; i < 100; i++) {
    var row = {};


    row["name"] = "Name " + i;
    row["code1c"] = "CODE" + i;
    row["price"] = 0;
    row["firstClientPrice"] = 0;
    row["discount"] = 0;
    row["lastPrice"] = 0;
    row["_id"] = "id" + i;

    data[i] = row;
}

var url = '/echo/json/';
var source2 = {
    type: "POST",
    datatype: "json",
    updateRow: function (rowId, rowData, commit) {
        // synchronize with the server - send update command
        // call commit with parameter true if the synchronization with the server is successful 
        // and with parameter false if the synchronization failder.
        commit(true);
    },
    data: {
        json: JSON.stringify(data)
    },
    datafields: [{
        name: 'name',
        type: 'string'
    }, {
        name: 'code1c',
        type: 'string'
    }, {
        name: 'price',
        type: 'number'
    }, {
        name: 'firstClientPrice',
        type: 'number'
    }, {
        name: 'discount',
        type: 'number'
    }, {
        name: 'lastPrice',
        type: 'number'
    }],
    id: "_id",
    url: url
};


var settings = {
    loadServerData: function (serverdata, source, callback) {
        $.ajax({
            type: source.type,
            contentType: "application/json; charset=utf-8",
            dataType: source.datatype,
            url: source.url,
            data: source.data,
            success: function (data, status, xhr) {
                callback({
                    records: data
                });
            },
            error: function (xhr, textStatus, errorThrown) {
                alert(xhr.responseText);
            }
        });
    }
}
var da = new $.jqx.dataAdapter(source2, settings);

var getEditorDataAdapter = function (datafield) {
    var source = {
        dataType: "json",
        data: data,
        dataFields: [{
            name: 'name',
            type: 'string'
        }, {
            name: 'code1c',
       ...