0
我正在使用HTML表格上的footable。儘管我可以使用搜索收件箱來過濾腳架,但我想創建一個可以過濾的下拉框。如何使用jquery-footable創建過濾器下拉菜單?
在下拉列表中,我試圖創建三個('Enable','Disabled','Low stock'),它們分別爲'Enable','Disabled','Low stock'狀態「欄。
閱讀through this documentation後,我已經實現了以下功能(see codepen here)
FooTable.MyFiltering = FooTable.Filtering.extend({
construct: function(instance){
this._super(instance);
this.modeles = ['Enable','Disabled','Low stock'];
this.def = 'Any Status';
this.$status = null;
},
$create: function(){
this._super();
var self = this,
$form_grp = $('<div/>', {'class': 'form-group'})
.append($('<label/>', {'class': 'sr-only', text: 'Status'}))
.prependTo(self.$form);
self.$status = $('<select/>', { 'class': 'form-control' })
.on('change', {self: self}, self._onStatusDropdownChanged)
.append($('<option/>', {text: self.def}))
.appendTo($form_grp);
$.each(self.statuses, function(i, status){
self.$status.append($('<option/>').text(status));
});
},
_onStatusDropdownChanged: function(e){
var self = e.data.self,
selected = $(this).val();
if (selected !== self.def){
self.addFilter('status', selected, ['status']);
} else {
self.removeFilter('status');
}
self.filter();
},
draw: function(){
this._super();
var status = this.find('status');
if (status instanceof FooTable.Filter){
this.$status.val(status.query.val());
} else {
this.$status.val(this.def);
}
}
});
$('.table').footable({
components: {
filtering: FooTable.MyFiltering
}
});
將上述JavaScript的過濾器不顯示均勻。