使用ajax请求过滤datagrid

时间:2014-03-10 21:44:32

标签: jquery datagrid fuelux

我刚刚使用了datagrid FuelUX和一些select过滤但是,我得到了以下问题:

当我执行然后单击事件btnShow我初始化属性DataSourceGrid并且我发送ajax请求的过滤器,第一次工作正常,但是当我从select更改所选项目并且我按btnShow按钮时datagrid重新加载数据但是使用与前一个过滤器相同的信息,无论我从select控件更改所选项目的次数,在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
    }
};

UPDATE :我一直在检查loader.js文件,我认为问题可能出在$ .fn.datagrid中。选项param具有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]();
    });
};

1 个答案:

答案 0 :(得分:0)

此刷新适用于内联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');    
    })