使用ajax请求过滤数据网格答案

【问题标题】：Filtering datagrid with ajax request使用ajax请求过滤数据网格
【发布时间】：2014-04-14 06:06:12
【问题描述】：

我刚刚使用 datagrid FuelUX 和几个选择进行过滤，但是我遇到了以下问题：

当我执行然后单击事件 btnShow 时，我初始化了属性 DataSourceGrid 并为 ajax 请求发送了一个过滤器，第一次工作正常，但是当我从选择中更改所选项目并按下 btnShow 按钮时，数据网格重新加载数据但是使用与前一个过滤器相同的信息，无论我从选择控件更改所选项目多少次，在 datagrid 中我都得到了相同的信息。

问候

$("#btnShow").on("click", function () {

        var dataSourceGrid = new DataSourceGrid({
            filter: { ID: JSON.stringify(parseInt($("#cboSelect").val())) }, //Here i'm trying to filter to datagrid
            url: "StudentList.aspx/GetStudent", columns: [{
                property: 'IDStudent',
                label: 'ID',
                sortable: true,
                cssClass: "text-center"
            }, {
                property: 'Name',
                label: 'Name',
                sortable: true
            }],
            formatter: {}
        });

        var grid = $('#grdItems');

        grid.datagrid({
            dataSource: dataSourceGrid
        });

        grid.datagrid('reload');
});

var DataSourceGrid = function (options) {
    this._url = options.url;
    this._columns = options.columns;

    if (options.formatter != undefined) {
        this._formatter = options.formatter;
    }

    if (options.filter != undefined) {
        this._filter = options.filter;
    }
};

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

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

        var ajaxParam;

        _optionsGrid = options;
        _callbackGrid = callback;
        _formatterGrid = self._formatter;

        ajaxParam = {
            type: "GET",
            url: self._url,
            data: self._filter, //this parameter never change after the first time
            method: CallbackGrid // this is my callback function to format datagrid(search, pagination, etc)
        }

        ajaxRequest(ajaxParam); //Here is my ajax request
    }
};

更新：我一直在检查 loader.js 文件，我认为问题可能出在 $.fn.datagrid 中。选项参数具有 datasource 属性，其中 filter 属性，第一次未定义数据并执行 data = new Datagrid(this, options) 并加载我发送的过滤器，但下一次，数据更改为未定义并且它永远不会再次执行 data = new Datagrid(this, options) 并且永远不会更改过滤器值。我不知道如何解决这个问题，因为这段代码对我来说是高级 javascript：p。

希望对您有所帮助，问候。

$.fn.datagrid = function (option) {
    return this.each(function () {
        var $this = $(this);
        var data = $this.data('datagrid');
        var options = typeof option === 'object' && option;

        if (!data) {
                $this.data('datagrid', (data = new Datagrid(this, options))); //only the first time load the filter value
            }
        if (typeof option === 'string') data[option]();
    });
};

【问题讨论】：

标签： jquery datagrid fuelux

【解决方案1】：

此刷新适用于内联 jobSiteHoursData

$.ajax(jobSiteHoursURL, {
        dataType: 'json',
        async: false,
        type: 'GET'
    }).done(function(jsonData) {
        jobSiteHours = jsonData;
        $('#myJobSiteHours').datagrid('reload');    
    })

但这不适用于 New StaticDataSource

$.ajax(jobSiteHoursURL, {
        dataType: 'json',
        async: true,
        type: 'GET'
    }).done(function(jsonData) {
        jobSiteHours = jsonData;
        jobSiteHoursData = new StaticDataSource({
            columns: [{property: 'workDate', label: 'Work Date', sortable: true},
                      {property: 'startTime', label: 'Start Time', sortable: true},
                      {property: 'endTime', label: 'End Time', sortable: true},
                      {property: 'hours', label: 'Hours', sortable: true}],
            data:jsonData,
        });
        $('#myJobSiteHours').datagrid('reload');    
    })

【讨论】：