无法在Fuelux Datagrid中重新加载数据

Question

我试图重新加载由ajax调用填充的数据，但我无法使其工作，即使在使用重载方法后它也会显示旧数据。问题是，如果我更改一些变量以填充不同的数据并尝试调用以下代码而不刷新页面，则不会重新加载更新的数据= /这是我的代码：

function populateDataGrid() {
   $.ajaxSetup({async: false}); 
   var gridinfo="";
   $.post("lib/function.php",{activity: activity, shift: shift, date: date}, 
      function (output){
         gridinfo = JSON.parse(output);
   });
   $.ajaxSetup({async: true});

    // INITIALIZING THE DATAGRID
        var dataSource = new StaticDataSource({
          columns: [
            {
              property: 'id',
              label: '#',
              sortable: true
            },
            {
              property: 'date',
              label: 'date',
              sortable: true
            },
            ....
          ],

          formatter: function (items) {
                var c=1;
              $.each(items, function (index, item) {
                item.select = '<input type="button" id="select'+c+'" class="select btn" value="select" onclick="">';
                c=c+1;
              }); 
         },
            data: gridinfo,
            delay:300
        });

        $('#grid').datagrid({
          dataSource: dataSource
        });

        $('#grid').datagrid('reload');

        $('#modal-fast-appointment-results').modal({show:true});
}

Answer 1

我找到了一个解决方案......我必须创建一个新的DataSource（让我们调用它＆＃34; AjaxDataSource＆＃34;）并在数据构造函数中添加ajax请求功能：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['underscore'], factory);
    } else {
        root.AjaxDataSource = factory();
    }
}(this, function () {

    var AjaxDataSource = function (options) {
        this._formatter = options.formatter;
        this._columns = options.columns;
        this._delay = options.delay || 0;
        this._data = options.data;
    };

    AjaxDataSource.prototype = {

        columns: function () {
            return this._columns;
        },

        data: function (options, callback) {
            var self = this;

            setTimeout(function () {
                var data;
                $.ajax({
                    url: 'getdata.php',
                    type: 'POST',
                    data: 'param1:param1,param2,param2,...,paramN:paramN', // this is optional in case you have to send some params to getdata.php
                    dataType: 'json',
                    async: false,
                    success: function(result) {
                        data = result;
                    },
                    error: function(data){
                        //in case we want to debug and catch any possible error
                        // console.log(data);
                    }
                });

                                    // SEARCHING
                if (options.search) {
                    data = _.filter(data, function (item) {
                        var match = false;

                        _.each(item, function (prop) {
                            if (_.isString(prop) || _.isFinite(prop)) {
                                if (prop.toString().toLowerCase().indexOf(options.search.toLowerCase()) !== -1) match = true;
                            }
                        });

                        return match;
                    });
                }


                var count = data.length;

                // SORTING
                if (options.sortProperty) {
                    data = _.sortBy(data, options.sortProperty);
                    if (options.sortDirection === 'desc') data.reverse();
                }

                // PAGING
                var startIndex = options.pageIndex * options.pageSize;
                var endIndex = startIndex + options.pageSize;
                var end = (endIndex > count) ? count : endIndex;
                var pages = Math.ceil(count / options.pageSize);
                var page = options.pageIndex + 1;
                var start = startIndex + 1;

                data = data.slice(startIndex, endIndex);

                if (self._formatter) self._formatter(data);

                callback({ data: data, start: start, end: end, count: count, pages: pages, page: page });

            }, this._delay)
        }
    };

    return AjaxDataSource;
}));

在定义新的DataSource之后，我们只需要创建它并像往常一样调用datagrid：

function populateDataGrid(){

// INITIALIZING THE DATAGRID
        var dataSource = new AjaxDataSource({
          columns: [
            {
              property: 'id',
              label: '#',
              sortable: true
            },
            {
              property: 'date',
              label: 'date',
              sortable: true
            },
            ....
          ],

          formatter: function (items) { // in case we want to add customized items, for example a button
                var c=1;
              $.each(items, function (index, item) {
                item.select = '<input type="button" id="select'+c+'" class="select btn" value="select" onclick="">';
                c=c+1;
              }); 
         },
            delay:300
        });

        $('#grid').datagrid({
          dataSource: dataSource
        });

        $('#grid').datagrid('reload');

        $('#modal-results').modal({show:true});
}

现在我们的数据网格包含通过ajax请求填充的数据，能够在不刷新页面的情况下重新加载数据。

希望它有所帮助！