Javascript 使用日期选择器（FuelUX）过滤中继器
我正试图用日期选择器过滤燃料用户体验中继器。我该怎么做？似乎中继器的重新加载事件甚至没有触发，我不知道如何设置options.filter以将包含的日期包括在Datepicker字段中 html： JS：Javascript 使用日期选择器（FuelUX）过滤中继器,javascript,jquery,datepicker,fuelux,Javascript,Jquery,Datepicker,Fuelux,我正试图用日期选择器过滤燃料用户体验中继器。我该怎么做？似乎中继器的重新加载事件甚至没有触发，我不知道如何设置options.filter以将包含的日期包括在Datepicker字段中 html： JS： $('#myDatepicker').datepicker({ allowPastDates: true, momentConfig: { culture: 'es', forma
$('#myDatepicker').datepicker({
allowPastDates: true,
momentConfig: {
culture: 'es',
format: 'DD-MM-YYYY'
},
restricted: [
{from: '01-01-2013', to: '01-01-2014'}
]
});
$(function () {
// define the columns in your datasource
var columns = [
{
label: 'Name & Description',
property: 'name',
sortable: true
},
{
label: 'Key',
property: 'key',
sortable: true
},
{
label: 'Status',
property: 'status',
sortable: true
}
];
var items = [{"id": 1, "name": "item 1", "key": "desc 1", "status": "active", "category": "category2"},
{"id": 2, "name": "item 2", "key": "desc 2", "status": "active", "category": "category2"},
{"id": 3, "name": "item 3", "key": "desc 3", "status": "inac", "category": "category2"},
{"id": 4, "name": "item 4", "key": "desc 4", "status": "inac", "category": "category5"},
{"id": 5, "name": "item 5", "key": "desc 5", "status": "inac", "category": "category5"}
];
function customColumnRenderer(helpers, callback) {
// determine what column is being rendered
var column = helpers.columnAttr;
// get all the data for the entire row
var rowData = helpers.rowData;
var customMarkup = '';
// only override the output for specific columns.
// will default to output the text value of the row item
switch (column) {
case 'name':
// let's combine name and description into a single column
customMarkup = '<div style="font-size:12px;">' + rowData.name + '</div><div class="small text-muted">' + rowData.description + '</div>';
break;
default:
// otherwise, just use the existing text value
customMarkup = helpers.item.text();
break;
}
helpers.item.html(customMarkup);
callback();
}
function customRowRenderer(helpers, callback) {
// let's get the id and add it to the "tr" DOM element
var item = helpers.item;
item.attr('id', 'row' + helpers.rowData.id);
callback();
}
// this example uses a static datasource and
// underscore is used to filter, sort, search, etc.
function customDataSource(options, callback) {
console.log("Imprimiendo FILTER:", options.filter);
console.log("Imprimiendo SEARCH:", options.search);
var pageIndex = options.pageIndex;
var pageSize = options.pageSize;
var data = items;
// sort by
data = _.sortBy(data, function (item) {
return item[options.sortProperty];
});
// sort direction
if (options.sortDirection === 'desc') {
data = data.reverse();
}
// filter
if (options.filter && options.filter.value !== 'all') {
data = _.filter(data, function (item) {
return item.status === options.filter.value;
});
}
// search
if (options.search && options.search.length > 0) {
var searchedData = [];
var searchTerm = options.search.toLowerCase();
_.each(data, function (item) {
var values = _.values(item);
var found = _.find(values, function (val) {
if (val.toString().toLowerCase().indexOf(searchTerm) > -1) {
searchedData.push(item);
return true;
}
});
});
data = searchedData;
}
var totalItems = data.length;
var totalPages = Math.ceil(totalItems / pageSize);
var startIndex = (pageIndex * pageSize) + 1;
var endIndex = (startIndex + pageSize) - 1;
if (endIndex > data.length) {
endIndex = data.length;
}
data = data.slice(startIndex - 1, endIndex);
var dataSource = {
page: pageIndex,
pages: totalPages,
count: totalItems,
start: startIndex,
end: endIndex,
columns: columns,
items: data
};
callback(dataSource);
}
// initialize the repeater
var repeater = $('#myRepeater');
repeater.repeater({
list_selectable: false, // (single | multi)
list_noItemsHTML: 'nothing to see here... move along',
// override the column output via a custom renderer.
// this will allow you to output custom markup for each column.
list_columnRendered: customColumnRenderer,
// override the row output via a custom renderer.
// this example will use this to add an "id" attribute to each row.
list_rowRendered: customRowRenderer,
// setup your custom datasource to handle data retrieval;
// responsible for any paging, sorting, filtering, searching logic
dataSource: customDataSource
});
});
$('#myDatepicker').on('dateClicked.fu.datepicker', function (evt, date) {
console.log("dateClicked.fu.datepicker");
});
我想你想要的是这样的东西：
$('#myDatepicker').on('dateClicked.fu.datepicker', function (evt, date) {
$('#myRepeater').repeater('render', {
dataSourceOptions: {
filter: {
text: datetoDateString(),
value: date
}
}
);
});
Render可用于更改中继器的选项，该中继器包括dataSourceOptions对象，该对象将允许您从外部事件操纵数据源。我使用您建议的代码，它不发送数据选项。筛选器。另外，请使用以下代码：
$('#date').on('change', function () {
var date = $(this).val();
var options = {
fecha:date
};
// pass your custom options to the repeater and re-render
// in this case, we're passing the selected date
$('#myRepeater').repeater('render', {
dataSourceOptions: options,
preserveDataSourceOptions: true
});
});
<!DOCTYPE html>
<html class="fuelux">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Snippets</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- dependencies -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//www.fuelcdn.com/fuelux/3.1.0/css/fuelux.min.css" rel="stylesheet"/>
<link href="//www.fuelcdn.com/fuelux-mctheme/1.1.0/css/fuelux-mctheme.min.css" rel="stylesheet"/>
</head>
<body class="fuelux">
<div class="repeater" id="myRepeater" data-staticheight="true" style="position:absolute; top:25px; right:25px; bottom:25px; left:25px;">
<div class="repeater-header">
<div class="repeater-header-left">
<span class="repeater-title">Repeater</span>
<div class="repeater-search">
<div class="search input-group">
<input type="search" class="form-control" placeholder="Search"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>
</div>
</div>
<div class="repeater-header-right">
<input id="date" type="date">
<div class="btn-group selectlist repeater-filters" data-resize="auto">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selected-label"> </span>
<span class="caret"></span>
<span class="sr-only">Toggle Filters</span>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li data-value="all" data-selected="true"><a href="#">all</a></li>
<li data-value="draft"><a href="#">draft</a></li>
<li data-value="archived"><a href="#">archived</a></li>
<li data-value="active"><a href="#">active</a></li>
</ul>
<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
</div>
<div class="btn-group repeater-views" data-toggle="buttons">
<label class="btn btn-default active">
<input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span>
</label>
<label class="btn btn-default">
<input name="repeaterViews" type="radio" value="thumbnail"><span class="glyphicon glyphicon-th"></span>
</label>
</div>
</div>
</div>
<div class="repeater-viewport">
<div class="repeater-canvas"></div>
<div class="loader repeater-loader"></div>
</div>
<div class="repeater-footer">
<div class="repeater-footer-left">
<div class="repeater-itemization">
<span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
<div class="btn-group selectlist dropup" data-resize="auto">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selected-label"> </span>
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="5"><a href="#">5</a></li>
<li data-value="10" data-selected="true"><a href="#">10</a></li>
<li data-value="20"><a href="#">20</a></li>
</ul>
<input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
</div>
<span>Per Page</span>
</div>
</div>
<div class="repeater-footer-right">
<div class="repeater-pagination">
<button type="button" class="btn btn-default btn-sm repeater-prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous Page</span>
</button>
<label class="page-label" id="myPageLabel">Page</label>
<div class="repeater-primaryPaging active">
<div class="input-group input-append dropdown combobox dropup">
<input type="text" class="form-control" aria-labelledby="myPageLabel">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right"></ul>
</div>
</div>
</div>
<input type="text" class="form-control repeater-secondaryPaging" aria-labelledby="myPageLabel">
<span>of <span class="repeater-pages"></span></span>
<button type="button" class="btn btn-default btn-sm repeater-next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next Page</span>
</button>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.2.0/js/fuelux.min.js"></script>
<!--<script src="//www.fuelcdn.com/fuelux-utilities/1.0.0/js/fuelux-utilities.min.js"></script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script>
$(function () {
// define the columns in your datasource
var columns = [
{
label: 'Name & Description',
property: 'name',
sortable: true
},
{
label: 'Key',
property: 'key',
sortable: true
},
{
label: 'Status',
property: 'status',
sortable: true
}
];
var items = [{"id": 1, "name": "item 1", "key": "desc 1", "status": "active", "category": "category2"},
{"id": 2, "name": "item 2", "key": "desc 2", "status": "active", "category": "category2"},
{"id": 3, "name": "item 3", "key": "desc 3", "status": "inac", "category": "category2"},
{"id": 4, "name": "item 4", "key": "desc 4", "status": "inac", "category": "category5"},
{"id": 5, "name": "item 5", "key": "desc 5", "status": "inac", "category": "category5"}
];
function customColumnRenderer(helpers, callback) {
// determine what column is being rendered
var column = helpers.columnAttr;
// get all the data for the entire row
var rowData = helpers.rowData;
var customMarkup = '';
// only override the output for specific columns.
// will default to output the text value of the row item
switch (column) {
case 'name':
// let's combine name and description into a single column
customMarkup = '<div style="font-size:12px;">' + rowData.name + '</div><div class="small text-muted">' + rowData.description + '</div>';
break;
default:
// otherwise, just use the existing text value
customMarkup = helpers.item.text();
break;
}
helpers.item.html(customMarkup);
callback();
}
function customRowRenderer(helpers, callback) {
// let's get the id and add it to the "tr" DOM element
var item = helpers.item;
item.attr('id', 'row' + helpers.rowData.id);
callback();
}
// this example uses a static datasource and
// underscore is used to filter, sort, search, etc.
function customDataSource(options, callback) {
console.log(options);
var pageIndex = options.pageIndex;
var pageSize = options.pageSize;
var data = items;
// sort by
data = _.sortBy(data, function (item) {
return item[options.sortProperty];
});
// sort direction
if (options.sortDirection === 'desc') {
data = data.reverse();
}
// filter
if (options.filter && options.filter.value !== 'all') {
data = _.filter(data, function (item) {
return item.status === options.filter.value;
});
}
// search
if (options.search && options.search.length > 0) {
var searchedData = [];
var searchTerm = options.search.toLowerCase();
_.each(data, function (item) {
var values = _.values(item);
var found = _.find(values, function (val) {
if (val.toString().toLowerCase().indexOf(searchTerm) > -1) {
searchedData.push(item);
return true;
}
});
});
data = searchedData;
}
var totalItems = data.length;
var totalPages = Math.ceil(totalItems / pageSize);
var startIndex = (pageIndex * pageSize) + 1;
var endIndex = (startIndex + pageSize) - 1;
if (endIndex > data.length) {
endIndex = data.length;
}
data = data.slice(startIndex - 1, endIndex);
var dataSource = {
page: pageIndex,
pages: totalPages,
count: totalItems,
start: startIndex,
end: endIndex,
columns: columns,
items: data
};
callback(dataSource);
}
// initialize the repeater
var repeater = $('#myRepeater');
repeater.repeater({
list_selectable: false, // (single | multi)
list_noItemsHTML: 'nothing to see here... move along',
// override the column output via a custom renderer.
// this will allow you to output custom markup for each column.
list_columnRendered: customColumnRenderer,
// override the row output via a custom renderer.
// this example will use this to add an "id" attribute to each row.
list_rowRendered: customRowRenderer,
// setup your custom datasource to handle data retrieval;
// responsible for any paging, sorting, filtering, searching logic
dataSource: customDataSource
});
});
// handle date change
$('#date').on('change', function () {
//console.log("CAPTO EL CAMBIO");
var date = $(this).val();
console.log("Fecha Captada:", date);
var options = {
fecha:date
};
// pass your custom options to the repeater and re-render
// in this case, we're passing the selected date
$('#myRepeater').repeater('render', {
dataSourceOptions: options,
preserveDataSourceOptions: true
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html class="fuelux">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Snippets</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- dependencies -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//www.fuelcdn.com/fuelux/3.1.0/css/fuelux.min.css" rel="stylesheet"/>
<link href="//www.fuelcdn.com/fuelux-mctheme/1.1.0/css/fuelux-mctheme.min.css" rel="stylesheet"/>
</head>
<body class="fuelux">
<div class="repeater" id="myRepeater" data-staticheight="true" style="position:absolute; top:25px; right:25px; bottom:25px; left:25px;">
<div class="repeater-header">
<div class="repeater-header-left">
<span class="repeater-title">Repeater</span>
<div class="repeater-search">
<div class="search input-group">
<input type="search" class="form-control" placeholder="Search"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>
</div>
</div>
<div class="repeater-header-right">
<input id="date" type="date">
<div class="btn-group selectlist repeater-filters" data-resize="auto">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selected-label"> </span>
<span class="caret"></span>
<span class="sr-only">Toggle Filters</span>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li data-value="all" data-selected="true"><a href="#">all</a></li>
<li data-value="draft"><a href="#">draft</a></li>
<li data-value="archived"><a href="#">archived</a></li>
<li data-value="active"><a href="#">active</a></li>
</ul>
<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
</div>
<div class="btn-group repeater-views" data-toggle="buttons">
<label class="btn btn-default active">
<input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span>
</label>
<label class="btn btn-default">
<input name="repeaterViews" type="radio" value="thumbnail"><span class="glyphicon glyphicon-th"></span>
</label>
</div>
</div>
</div>
<div class="repeater-viewport">
<div class="repeater-canvas"></div>
<div class="loader repeater-loader"></div>
</div>
<div class="repeater-footer">
<div class="repeater-footer-left">
<div class="repeater-itemization">
<span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
<div class="btn-group selectlist dropup" data-resize="auto">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selected-label"> </span>
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="5"><a href="#">5</a></li>
<li data-value="10" data-selected="true"><a href="#">10</a></li>
<li data-value="20"><a href="#">20</a></li>
</ul>
<input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
</div>
<span>Per Page</span>
</div>
</div>
<div class="repeater-footer-right">
<div class="repeater-pagination">
<button type="button" class="btn btn-default btn-sm repeater-prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous Page</span>
</button>
<label class="page-label" id="myPageLabel">Page</label>
<div class="repeater-primaryPaging active">
<div class="input-group input-append dropdown combobox dropup">
<input type="text" class="form-control" aria-labelledby="myPageLabel">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right"></ul>
</div>
</div>
</div>
<input type="text" class="form-control repeater-secondaryPaging" aria-labelledby="myPageLabel">
<span>of <span class="repeater-pages"></span></span>
<button type="button" class="btn btn-default btn-sm repeater-next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next Page</span>
</button>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.2.0/js/fuelux.min.js"></script>
<!--<script src="//www.fuelcdn.com/fuelux-utilities/1.0.0/js/fuelux-utilities.min.js"></script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script>
$(function () {
// define the columns in your datasource
var columns = [
{
label: 'Name & Description',
property: 'name',
sortable: true
},
{
label: 'Key',
property: 'key',
sortable: true
},
{
label: 'Status',
property: 'status',
sortable: true
}
];
var items = [{"id": 1, "name": "item 1", "key": "desc 1", "status": "active", "category": "category2"},
{"id": 2, "name": "item 2", "key": "desc 2", "status": "active", "category": "category2"},
{"id": 3, "name": "item 3", "key": "desc 3", "status": "inac", "category": "category2"},
{"id": 4, "name": "item 4", "key": "desc 4", "status": "inac", "category": "category5"},
{"id": 5, "name": "item 5", "key": "desc 5", "status": "inac", "category": "category5"}
];
function customColumnRenderer(helpers, callback) {
// determine what column is being rendered
var column = helpers.columnAttr;
// get all the data for the entire row
var rowData = helpers.rowData;
var customMarkup = '';
// only override the output for specific columns.
// will default to output the text value of the row item
switch (column) {
case 'name':
// let's combine name and description into a single column
customMarkup = '<div style="font-size:12px;">' + rowData.name + '</div><div class="small text-muted">' + rowData.description + '</div>';
break;
default:
// otherwise, just use the existing text value
customMarkup = helpers.item.text();
break;
}
helpers.item.html(customMarkup);
callback();
}
function customRowRenderer(helpers, callback) {
// let's get the id and add it to the "tr" DOM element
var item = helpers.item;
item.attr('id', 'row' + helpers.rowData.id);
callback();
}
// this example uses a static datasource and
// underscore is used to filter, sort, search, etc.
function customDataSource(options, callback) {
console.log(options);
var pageIndex = options.pageIndex;
var pageSize = options.pageSize;
var data = items;
// sort by
data = _.sortBy(data, function (item) {
return item[options.sortProperty];
});
// sort direction
if (options.sortDirection === 'desc') {
data = data.reverse();
}
// filter
if (options.filter && options.filter.value !== 'all') {
data = _.filter(data, function (item) {
return item.status === options.filter.value;
});
}
// search
if (options.search && options.search.length > 0) {
var searchedData = [];
var searchTerm = options.search.toLowerCase();
_.each(data, function (item) {
var values = _.values(item);
var found = _.find(values, function (val) {
if (val.toString().toLowerCase().indexOf(searchTerm) > -1) {
searchedData.push(item);
return true;
}
});
});
data = searchedData;
}
var totalItems = data.length;
var totalPages = Math.ceil(totalItems / pageSize);
var startIndex = (pageIndex * pageSize) + 1;
var endIndex = (startIndex + pageSize) - 1;
if (endIndex > data.length) {
endIndex = data.length;
}
data = data.slice(startIndex - 1, endIndex);
var dataSource = {
page: pageIndex,
pages: totalPages,
count: totalItems,
start: startIndex,
end: endIndex,
columns: columns,
items: data
};
callback(dataSource);
}
// initialize the repeater
var repeater = $('#myRepeater');
repeater.repeater({
list_selectable: false, // (single | multi)
list_noItemsHTML: 'nothing to see here... move along',
// override the column output via a custom renderer.
// this will allow you to output custom markup for each column.
list_columnRendered: customColumnRenderer,
// override the row output via a custom renderer.
// this example will use this to add an "id" attribute to each row.
list_rowRendered: customRowRenderer,
// setup your custom datasource to handle data retrieval;
// responsible for any paging, sorting, filtering, searching logic
dataSource: customDataSource
});
});
// handle date change
$('#date').on('change', function () {
//console.log("CAPTO EL CAMBIO");
var date = $(this).val();
console.log("Fecha Captada:", date);
var options = {
fecha:date
};
// pass your custom options to the repeater and re-render
// in this case, we're passing the selected date
$('#myRepeater').repeater('render', {
dataSourceOptions: options,
preserveDataSourceOptions: true
});
});
</script>
</body>
</html>