智能表具有搜索所有列(st-search)或通过一个所需列(st-search="'firstName')的内置功能。是否可以在多个列中进行搜索(不是全部)?示例:如果我有这样的表:名称,昵称,地址与此类数据:
- 约翰,JJ,一些地址
- 史蒂夫,约翰,也地址
- 简,简,约翰村
并搜索“约翰”,只有前两列应该是结果。可能吗?
智能表具有搜索所有列(st-search)或通过一个所需列(st-search="'firstName')的内置功能。是否可以在多个列中进行搜索(不是全部)?示例:如果我有这样的表:名称,昵称,地址与此类数据:
并搜索“约翰”,只有前两列应该是结果。可能吗?
我有一个类似的问题,我使用这篇文章中的提示解决了。
智能表文档 说:
stSetFilter
替换通过 Smart Table 搜索时使用的过滤器。当默认行为stSearch
不满足您的要求时,例如在一个条目是另一个条目的子字符串的选择中,使用自定义过滤器来实现您的目标。
和:
请注意,
st-safe-src
选择需要正确显示集合中的所有不同元素。如果省略此项,则选择将仅包含表中可见元素的值,也受分页影响。
您可以在 HTML 中的 table 元素中声明自己的过滤器:
<table ... st-set-filter="myCustomFilter" class="table table-striped">
...并且您可以通过谓词函数自定义过滤器(在您的应用程序中)。它可以这样工作:
// filter method, creating `myCustomFilter` a globally
// available filter in our module
.filter('myCustomFilter', ['$filter', function($filter) {
// function that's invoked each time Angular runs $digest()
return function(input, predicate) {
searchValue = predicate['$'];
//console.log(searchValue);
var customPredicate = function(value, index, array) {
console.log(value);
// if filter has no value, return true for each element of the input array
if (typeof searchValue === 'undefined') {
return true;
}
var p0 = value['name'].toLowerCase().indexOf(searchValue.toLowerCase());
var p1 = value['nickname'].toLowerCase().indexOf(searchValue.toLowerCase());
if (p0 > -1 || p1 > -1) {
// return true to include the row in filtered resultset
return true;
} else {
// return false to exclude the row from filtered resultset
return false;
}
}
//console.log(customPredicate);
return $filter('filter')(input, customPredicate, false);
}
}])
我做了这个小plnkr来查看过滤器的运行情况
不,一种解决方法是创建您自己的指令,该指令需要表控制器并调用其 api 两次(添加搜索时)
directive('stSearch', ['$timeout', function ($timeout) {
return {
require: '^stTable',
scope: {
predicate: '=?stSearch'
},
link: function (scope, element, attr, ctrl) {
var tableCtrl = ctrl;
// view -> table state
element.bind('input', function (evt) {
evt = evt.originalEvent || evt;
tableCtrl.search(evt.target.value, 'column1');
tableCtrl.search(evt.target.value, 'column2');
});
}
};
}]);
stSetFilter 的问题在于新过滤器将针对您将在表中使用的所有搜索(st-search)。
另一个想法:如果您的数据 rowCollection 不是太大,请在页面的 init() 中的 javascript 中执行以下操作:
self.rowCollection.forEach(函数(元素){
element.NameForFilter = element.name+ ' ' + element.nickName;
});
然后在th的输入中:st-search=NameForFilter
您可以通过创建新的启用搜索的表并组合您可能在一列中显示的字段来解决此问题。示例:如果您在 One 列中有 IdNo1 和 IdNo2 作为视图字段,则可以将它们组合起来以在表格数组中添加新元素。
看法 :
表注入:
table st-table="displayedCollection" st-safe-src="rowSearchCollection"
搜索注入:
input type="search" ng-model="idSearch" st-search="idSearch"
控制器:
$scope.rowSearchCollection = [];
vm.searchEnabledTable = function(tableDetails) {
//$scope.rowSearchCollection = angular.copy(tableDetails);
var deferred = $q.defer();
if(_.isArray(tableDetails)) {
_.each(tableDetails, function(element, index, list) {
$scope.rowSearchCollection[index] = angular.copy(element);
$scope.rowSearchCollection[index].idSearch = element.IdNo1+','+element.IdNo2;
});
deferred.resolve("DATA_PROCESSED");
} else {
deferred.reject("NOT_ARRAY");
}
return deferred.promise;
}
试试 st-search="{{firstName + 昵称}}"。我尝试使用 smart table v2.1.6 并且似乎工作正常。