使用Ng-table,为特定列添加自定义数字范围过滤器
using Ng-table, adding custom number range filter to a particular column
我一直在网上寻找解决方案,但我没能找到一个适合我具体需求的解决方案。
所以我有一个表(使用ng-table模块构建),有几个列,如下所示。
headerA headerB headerC_start headerC_end
-filter- -filter- -filter- -filter-
AAA AAAA 10 10
BBB BBBB 12 12
CCC CCCC 13 13
DDD DDDD 14 14
EEE EEEE 15 15
FFF FFFF 22 22
header下面的每个过滤器都是' contains '函数过滤器。我所说的"包含"是指,如果我在标题C过滤器中放入"1",它将显示10,12,13,14和15(因为这些数字包含"1")与标题A和b的相应数据。
对于头A和B,"包含"是好的,但我希望头C具有"范围"函数而不是"包含"。因此,我的目的是在headerC_start处输入最小值,在headerC_end处输入最大值,我希望表格过滤掉最小值和最大值之间的所有数字,并包含头部A和b的所有相应信息。因此,如果我在headerC_start处输入10,在headerC_end处输入14,它将只显示10,12,13和14以及头部A和头部b的所有相应信息。
我尝试了几种不同的方法来解决这个问题,包括编写我自己的自定义过滤函数,但我无法将自定义过滤函数应用于header_C,因为所有头A, B和C都绑定到ng-table模块。
下面是我的代码片段。
(html
<table ng-table="someTable" show-filter="true" class="table table-bordered table-striped table-condensed">
<tr ng-repeat="item in data">
<td data-title="'headerA'" sortable="'headerA'" filter="{ 'headerA': 'text' }" >
{{item.attributeA}}
</td>
<td data-title="'headerB'" sortable="'headerB'" filter="{ 'headerB': 'text' }" >
{{item.attributeB}}
</td>
<td data-title="'headerC_start'" sortable = "'headerC_start'" filter = "{'headerC_start':'text'}">
{{item.attributeC}}
</td>
<td data-title ="'headerC_end'" sortable = "'headerC_end'" filter="{'headerC_end':'text'}">
{{item.attributeC}}
</td>
——JS
angular.module('someApp', ['ngTable', 'ui.bootstrap', 'mainApp'])
.config(function someAppConfig($routeProvider) {
$routeProvider
.when('/some', {
templateUrl: 'view/some.html',
controller: 'some_table_controller'
});
})
.controller('some_table_controller', function ($scope, $http, $filter, NgTableParams) {
$http.get("http://127.0.0.1:5000/some/range/xxxx", {cache: true})
.then(function (response) {
$scope.something = response.data;
$scope.somethingTable = new NgTableParams({
page: 1,
count: 10
},
{
getData: function (params) {
if (params.sorting()) {
$scope.data = $filter('orderBy')($scope.something, params.orderBy());
} else {
$scope.data = $scope.something;
}
if (params.filter()) {
$scope.data = $filter('filter')($scope.data, params.filter());
} else {
$scope.data = $scope.data;
}
$scope.data = $scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count());
return $scope.data;
}
});
});
});
几个小时以来,我在这个例子中尝试了最正确的一个,(自定义过滤器函数)
http://codepen.io/christianacca/pen/yNWeOP但是我找不到一种方法来实现示例代码到我的脚本。
我真的很感激任何输入!!!!
谢谢
我刚刚解决了一个类似的问题。我使用自定义滤镜
HTML (using Thymeleaf)
<td th:attr="data-title=|'My Header'|" filter="{'headerA' : 'numberRange'}">
过滤器:<script type="text/ng-template" id="ng-table/filters/numberRange.html">
<form class="form-inline">
<span>Between</span>
<input type='number' ng-model="params.filter()[name + 'Min']" name="filter-numberRange" class="form-control" min="1" />
<span>and</span>
<input type='number' ng-model="params.filter()[name + 'Max']" name="filter-numberRange" class="form-control" min="1" />
</form>
</script>
你的javascript
var minRange = params.filter().headerAMin;
var maxRange = params.filter().headerAMax;
希望有所帮助
相关文章:
- 表达式引擎扩展开发-向呈现的条目添加自定义javascript
- Meteor-添加用户自定义字段的方法不起作用
- jQuery工具验证器自定义效果-添加&消除影响
- 添加自定义标记以自动完成
- 微笑时间轴小部件添加自定义字段
- 在验证器中添加自定义规则以检查<ul>具有元素
- 在log4javascript中添加自定义日志级别
- WooCommerce的“添加到购物车”按钮旁边的自定义按钮基于产品类型
- 向动态生成的DOM添加Angular自定义指令
- 向ASP控件添加自定义事件
- 将自定义按钮添加到现有网站
- 在“添加自定义按钮”旁边添加自定义按钮;添加到CART”;WooCommerce的按钮
- 在标记mapbox.js上添加自定义图标
- WooCommerce-根据自定义字段添加费用
- jqgridnavgrid在搜索按钮和自定义按钮之后添加按钮
- 如何自定义添加此照片共享工具
- 自定义“添加此按钮”
- 自定义添加此按钮图标图形
- jgrid自定义添加新表单
- 在jqGrid中自定义“添加/编辑”对话框