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

Question

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

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（我们称之为“AjaxDataSource”）并在数据构造函数中添加 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 请求填充数据的数据网格，并且能够在不刷新页面的情况下重新加载数据。

希望它对某人有所帮助！