Angularj UI 网格搜索
angularj ui grid searching
>我正在寻找有关如何实现用于搜索的简单输入文本的教程或示例在网格中。我的尝试(但 ng-keyup 需要 angularjs> 1.1.3 并且我有1.0.7)
<input type="text" ng-keyup="mySearch()" ng-model="searchText">
$scope.getPagedDataAsync = function (pageSize, page, searchText) {
setTimeout(function () {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
$http.get('largeLoad.json?q='+encodeURIComponent(ft)).success(function (largeLoad) {
$scope.setPagingData(largeLoad,page,pageSize);
});
} else {
$http.get('largeLoad.json').success(function (largeLoad) {
$scope.setPagingData(largeLoad,page,pageSize);
});
}
}, 100);
};
$scope.mySearch = function(){
console.log($scope.searchText);
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage,$scope.searchText);
}
再见
注意,这是一个针对 json 文件的虚假请求,只是为了举例。
更新:我正在使用ng-grid-1.3.2
基本上要解决这个问题,我认为您可以使用类似于我在下面所做的解决方案,我只是观察模型的属性是否有变化并触发一个函数来对数据集进行过滤。
文本输入的 HTML
<input type="text" placeholder="Type to filter" ng-model="gardenModel.externalFilterText"/>
过滤数据集的 JavaScript(还包括我在服务上监视的部分,以便首先更新数据,或者如果刷新数据以重新应用过滤器)。
//This function is called every time the data is updated from the service or the filter text changes
$scope.filterGardens = function(filterText) {
//Basically everything in this function is custom filtering specific
//to the data set I was looking at if you want something closer to the
//real implementation you'll probably have to dig through the source (I believe they separated the search filter code into it's own file in the original project)
//Creating a temporary array so changes don't cause a bunch of firing of watchers
var tempToShow = [];
//doing case insensitive search so lower case the filter text
filterText = filterText.toLowerCase();
//If the filter text is blank just use the whole data set
if(!filterText || filterText == "")
{
$scope.gardenModel.shownGardens = $scope.gardenModel.gardens;
return;
}
//step through each entry in the main list and add any gardens that match
for (var i = 0; i < $scope.gardenModel.gardens.length; i++) {
var curEntry = $scope.gardenModel.gardens[i];
var curGarden = curEntry.curGarden;
if(curGarden["Garden Name"] && curGarden["Garden Name"].answer.toString().toLowerCase().indexOf(filterText)!=-1)
tempToShow.push(curEntry);
else if(curGarden["Address"] && curGarden["Address"].answer.toString().toLowerCase().indexOf(filterText)!=-1)
tempToShow.push(curEntry);
else if(curGarden["Ownership"] && curGarden["Ownership"].answer.toString().toLowerCase().indexOf(filterText)!=-1)
tempToShow.push(curEntry);
else if(curGarden.gardenId && curGarden.gardenId == filterText)
tempToShow.push(curEntry);
};
$scope.gardenModel.shownGardens = tempToShow;
}
//Watch for any changes to the filter text (this is bound to the input in the HTML)
$scope.$watch('gardenModel.externalFilterText', function(value) {
$scope.filterGardens(value);
});
//Watch for any changes on the service (this way if addition/edit are made and
//refresh happens in the service things stay up to date in this view, and the filter stays)
$scope.$watch( function () { return gardenService.gardens; }, function ( gardens ) {
$scope.gardenModel.gardens = gardens;
$scope.filterGardens($scope.gardenModel.externalFilterText);
});
编辑 稍微清理了代码格式并添加了一些注释。
相关文章:
- 用程序搜索JQuery数据表中的文本
- 剑道网格jQuery动画()问题
- 使用Dnamics CRM 2011中的JavaScript读取子网格的所有记录,而不考虑活动页面
- 在html Select中添加搜索
- 清除网格中的存储和加载搜索结果
- 数据表个人搜索在放置在网格顶部时不起作用
- CRM 2011 - 筛选的子网格搜索功能
- 搜索在网格视图上不起作用
- Angularj UI 网格搜索
- 如何像JqGrid中那样创建ExtJS网格工具栏搜索
- 在网页网格表上进行实时搜索,分页仅在实际页面上工作
- 光滑网格树视图搜索
- 应用搜索剑道UI网格与角
- 剑道网格改变值使用外部文本框搜索
- 网格实时搜索extjs
- 使用javascript在HTML5画布上制作单词搜索网格
- 自动填写文本在网格视图搜索框在微软Dynamics CRM 2011
- 搜索后重新填充数据表网格的示例
- 如果搜索框在页面上始终可见,则输入jq网格搜索
- 使用数据源筛选实现 KendoUI 网格搜索