angularjs – 在Kendo UI Grid中设置过滤器的预定义值

发布时间：2020-12-17 08:47:58 所属栏目：安全来源：网络整理

导读：我想在剑道网格上的过滤器中设置用户定义的搜索值.用户打开过滤器后,该值将被放入搜索框中.任何建议将不胜感激. 这是类似的问题到Set default filter for Kendo UI Grid,除了我使用角度js,我想要一个用户定义的字符串过滤器值：这就是我构建网格的方式.我正

我想在剑道网格上的过滤器中设置用户定义的搜索值.用户打开过滤器后,该值将被放入搜索框中.任何建议将不胜感激.

这是类似的问题到Set default filter for Kendo UI Grid,除了我使用角度js,我想要一个用户定义的字符串过滤器值：

这就是我构建网格的方式.我正在使用角度js来创建具有自定义属性的div.最值得注意的属性是sg-grid(剑道网格本身),sg-filterable(设置为true表示此网格应该是可过滤的)和sg-predefine-filter(也设置为true表示此网格的过滤器应该具有打开时输入搜索框的字符串)：

>标记

<div sg-grid sg-data="api/grid/accounts"
 sg-columns="accountId,name,pricingFrequency,shortName,status"
 sg-filterable="true"
 sg-predefine-filter-value="true"                     
</div>

>脚本(在此简化为演示)

angular.module('sgComponents').directive('sgGrid',[         
   return {
      restrict: 'AE',scope: { filterable: @sgFilterable,predefineFilterValue: @sgPredefineFilterValue},template: '<div class="sg-grid">
                    <div class="pager-bar">
                       <div></div> // THE KENDO GRID
                    </div>                                
                 </div>',link: function(scope,element,attrs) {
         buildGrid();
         function buildGrid() {
            var grid = element.find(':nth-child(2)'); // 2nd DIV IN THE TEMPLATE
            var gridOptions = buildGridOptions(scope,attrs,grid);
            grid.kendoGrid(gridOptions); // build the grid
          };
          /**
           Builds the options for the grid
          */
          function buildGridOptions(scope,grid) {
             if (scope.filterable === 'true') {
                opts.filterable = {};
                opts.filterable.operators = {};
                opts.filterable.operators.string = {}
                if (scope.predefineFilterValue === 'true') { // set a pre-defined value if true
                   opts.filterable.operators.string = {
                      eq: 'Is equal to',value:'Test'
                   }
                } else { // just show the filter option
                   opts.filterable.operators.string = {
                      eq: 'Is equal to'
                   }
                }                                                 
             }
          }

       }   
   };                   
]);

>以下是控制台日志的图像：

结果.如您所见,我的值被添加为另一个过滤器选项.我不想要这个,我希望它作为一个值在输入框中！

终于找到了一个让我朝着正确方向前进的 kendo forum question！

解决方案不是在构建网格时添加预设过滤器值,而是在网格使用kendoGrid.dataSource.filter对象完成构建后执行此操作：

angular.module('sgComponents').directive('sgGrid',template: '<div class="sg-grid">
                <div class="pager-bar">
                   <div></div> // THE KENDO GRID
                </div>                                
             </div>',attrs) {
         buildGrid();
         function buildGrid() {
            //code same as in original question
            grid.kendoGrid(gridOptions); // build the grid
         };
         /*
          * Builds the options for the grid
          */
         function buildGridOptions(scope,grid) {             
            //code same as in original question
         }

         /*
          * the grid has finished building so 
          * now get hold of it and pre-set the 
          * filter value.
          * The values (the field to filter,the type of filter and the value) 
          * are hard-coded here but ultimately would 
          * come from a JSON object on the scope,constructed
          * using values from the model
         */
         kendoGrid = gridElem.data('kendoGrid'); // the grid

         //If the attribute to pre-set a filter value is true...             
         if (scope.predefineFilterValue === 'true') {             
            var ds = kendoGrid.dataSource; // the datasource object has a filter object
            ds.filter([
            {
               "logic":"or",// could be 'and'
               "filters":[{
                  "field":"accountId",// the column you want to filter
                  "operator":"eq",// the type of filter
                  "value":105 // the value,hard-coded for testing
               }]
            }
         }
      }
   }                           
]);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!