我刚刚使用了带有几个选择的 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]();
});
};