未捕获每个数据元素必须实现一个唯一的“ID”。 property --- ../slick.model.js

时间:2014-08-21 09:46:33

标签: ajax json slickgrid

当我使用ajax调用将json数据绑定到slickgrid时,它可以正常工作,但是当我使用dataview进行绑定时,它会显示“Title”错误 这是我的代码可以任何人帮助我

编辑:当我删除setItem(slickdata)时,会显示网格,但未填充数据,这是我的json数据格式

[{ "empid": 1, "fname": "John", "lname": "Doe", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
{ "empid": 2, "fname": "Stuart", "lname": "Motzart", "email": "jdoe@gmail.com", "sdate": "4/3/2012" }]



    var jqxhr = $.getJSON('http://localhost:50305/Service1.svc/json/Projects', function (data) {
                    for (var i = 0; i < data.length; i++) {
                    slickdata[i] = {
                    empid: data[i].empid,
                    fname: data[i].fname,
                    lname: data[i].lname
                    };
                    }
                    dataView.beginUpdate();
                    dataView.setItems(slickdata);
                    dataView.endUpdate();
                    grid = new Slick.Grid("#teamGrid", dataView, columns, options);

                    dataView.onRowCountChanged.subscribe(function (e, args) {
                    grid.updateRowCount();
                    grid.render();
                    });

                    dataView.onRowsChanged.subscribe(function (e, args) {
                    grid.invalidateRows(args.rows);
                    grid.render();
                    });


                    })
                    .done(function () {
                    console.log("second success");
                    })
                    .fail(function () {
                    alert("fail");
                    console.log("error");
                    })
                    .always(function () {
                    console.log("complete");
                    });

2 个答案:

答案 0 :(得分:1)

我需要使用setItems(slickdata,&#34; UniqueId&#34;)

答案 1 :(得分:0)

Cannot debug the implement Unique Id Property! 




    var dataView;
    var grid;
    var data;
    var options = {
    forceFitColumns: true,
    enableColumnReorder: false,
    autoExpandColumns: true
    };

    var columns = [{
    id: "userId",
    name: "User Id",
    field: "userId",
    resizable: false,
    sortable: false,
    minWidth: 100,
    maxWidth: 200
    }, {
    id: "id",
    name: "Id",
    field: "id",
    resizable: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 200
    }, {
    id: "title",
    name: "Title",
    field: "title",
    resizable: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 200
    }, {
    id: "completed",
    name: "Completed",
    field: "completed",
    resizable: false,
    sortable: false,
    minWidth: 200,
    maxWidth: 200
    }];

    $.ajax({
    url: 'http://jsonplaceholder.typicode.com/todos/',
    async: false,
    success: function (response) {
        data = JSON.stringify(response);
        console.log("received data " + JSON.stringify(response));
    },
    error: function () {
        console.log("error while getting data");
    }
    });

    dataView = new Slick.Data.DataView();

    dataView.beginUpdate();
    dataView.setItems(data, "id");
    dataView.endUpdate();


    grid = new Slick.Grid('#slickGrid', dataView, columns, options);

    // Make the grid respond to DataView change events.

    dataView.onRowCountChanged.subscribe(function (e, args) {
    alert("1");
    grid.updateRowCount();
    grid.render();
    });


    dataView.onRowsChanged.subscribe(function (e, args) {
    alert("2");
    grid.invalidateRows(args.rows);
    grid.render();
    });

JSFIDDLE HERE