我将如何刷新新的数据Backgrid表？ [英] How would I refresh a Backgrid table with new data?

问题描述

我有我的网页上Backgrid观点与数据的集合。上述Backgrid观点是所谓的过滤器的另一个观点，即允许用户更改日期范围的数据，使他们能够两个日期之间看到的结果。

I have a Backgrid view on my page with a collection of data. Above the Backgrid view is another view called "filters" that allows the user to change the date range for the data so they can see results between two dates.

我不知道最彻底的方法是刷新Backgrid视图的内容是什么。这里是我的code，因为它代表：

I'm not sure what the cleanest way is to refresh the contents of the Backgrid view. Here is my code as it stands:

// Fetch data
var fetchingOrders = CRM.request("orders:entities");

// Create layout
var ordersLayout = new List.OrdersLayout();

$.when(fetchingOrders).done(function (orders) {

    var ClickableRow = Backgrid.Row.extend({
        events: {
            "click" : "rowClicked"
        },
        rowClicked: function () {
            CRM.trigger("order:show", this.model.get("RecordID"));
        }
    });
    var customersListView = new Backgrid.Grid({
        row: ClickableRow,
        columns: CRM.settings.columns.orders,
        collection: orders,
        className: "simple-table backgrid"
    });

    var filters = new List.Filters({});
    filters.on("orders:filter", function (startdate, enddate) {

    });


    ordersLayout.on("show", function () {
        ordersLayout.filters.show(filters);
        ordersLayout.backgrid.show(customersListView);
    });

    CRM.mainRegion.show(ordersLayout);
});

的 CRM.request（订单：实体）行使用此功能：

getOrders: function (startdate, enddate) {
    var orders = new Entities.Orders();

    var defer = $.Deferred();
    orders.fetch({
        data: {
            action: "search",
            dateRangeColumn: "RecordDate",
            startDate: startdate || "2013-11-06",
            endDate: enddate || "2013-11-06",
            // startDate: startdate || Utilities.currentDate,
            // endDate: enddate || Utilities.currentDate
        },
        success: function (data) {
            defer.resolve(data);
        },
        error: function (collection, response, options) {
            console.log(response);
            console.log("Error loading Orders…");
        }
    });
    return defer.promise();
},

您可能已经注意到了 filters.on（命令：过滤器功能（开始日期，结束日期）{块I触发此用户随时更改开始或者在过滤器结束日期的观点，但我不确定该怎么在这里做的，因为我基本上是需要重新运行所有上述$ C $的C作为设置。

You may have noticed the filters.on("orders:filter", function (startdate, enddate) { block. I trigger this any time the user changes the start or end date on in the filters view, but I'm unsure of what to do from here because I'll essentially need to re-run all of the above code as setup.

建议？谢谢！

推荐答案

我建议你分开设置和获取数据的部分。是这样的：

I'd suggest you separate the setup and data fetching parts. Something like:

var ordersLayout = new List.OrdersLayout();

var ClickableRow = Backgrid.Row.extend({
    events: {
        "click" : "rowClicked"
    },
    rowClicked: function () {
        CRM.trigger("order:show", this.model.get("RecordID"));
    }
});
var customersListView = new Backgrid.Grid({
    row: ClickableRow,
    columns: CRM.settings.columns.orders,
    // don't set the collection here (see below)
    // collection: orders,
    className: "simple-table backgrid"
});

var updateData = function(startDate, endDate){

    var fetchingOrders = CRM.request("orders:entities");
    $.when(fetchingOrders).done(function (orders) {
      // update collection reference
      customersListView.collection = orders;
      // rerender the view
      customersListView.render();
    });
};

var filters = new List.Filters({});
filters.on("orders:filter", function (startdate, enddate) {
     // call the function updating the data each time the filter criteria change
     updateData(startdate, enddate);
});

// initially call the data update method once with the default params to display
// the initial data set
updateData("2013-04-28", "2013-09-29");


ordersLayout.on("show", function () {
    ordersLayout.filters.show(filters);
    ordersLayout.backgrid.show(customersListView);
});

我希望这至少可以让你在正确的方向前进！

I hope this at least gets you going in the right direction!

这篇关于我将如何刷新新的数据Backgrid表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！