【问题标题】:jqGrid Filter Toolbar initial default valuejqGrid过滤工具栏初始默认值
【发布时间】:2011-01-27 06:42:15
【问题描述】:

我正在使用带有过滤器工具栏的 jqGrid,我需要为其中一个字段设置初始默认过滤器值,以便默认情况下只显示状态为“打开”的行,但用户可以根据需要显示已关闭的行.

目前我有这样的解决方法

setTimeout(function() {$('#gs_Status').val('Open');$("#eventsGrid")[0].triggerToolbar()},500);

但它会导致第二个请求,并且确实非常糟糕。

有人知道怎么做吗?

编辑:更多研究告诉我这可能是不可能的:(

【问题讨论】:

    标签: jquery jqgrid


    【解决方案1】:

    有几个步骤可以做到这一点:

    1. 在列模型搜索选项中传递一个默认值
    2. 阻止默认的表单数据加载过程
    3. 在表格准备好时触发过滤器工具栏数据加载

    更详细一点:

    将网格数据类型设置为本地(这可以防止初始数据加载)并设置搜索选项的默认值:

      $("#mytable").jqGrid({
        datatype: "local",
        colNames:['Keyword','Selected'], 
        colModel:[
         {name:'keyword',
          sortable:true,
          searchoptions: { defaultValue:'golf' }
        },
        {name:'selected',
          sortable:false,
          searchoptions: { }
        },
        ....
        ....
    

    然后添加过滤工具栏,设置数据类型和url,触发加载:

      $('#mytable').jqGrid('filterToolbar', {autosearch: true});
      $('#mytable').setGridParam({datatype: 'json', url:'/get_data.php'});
      $('#mytable')[0].triggerToolbar();
    

    【讨论】:

    • 马克,感谢您的出色回答。这也解决了我的问题。
    • 这是我想做的,但除非我像他在原始问题中所做的那样将 triggerToolbar 调用包装在 setTimeout 中,否则它不起作用:(
    • @heisenberg 非常感谢您的评论,为此我还需要 setTimeout。这个解决方案工作得很好——当过滤的数据被渲染时,第一次加载时的短暂闪烁有点烦人。
    【解决方案2】:

    我阅读的所有提示都对我不起作用。所以我尝试了很多,并在jqGrid源代码中做了一些研究。如果您使用beforeRequest 事件,集成“默认值”或“保存的搜索值”功能会容易得多。

    我必须解决一些问题:

    1. 虽然是beforeRequest事件,但在调用triggerToolbar之前,你设置的搜索参数不会被使用。
    2. triggerToolbar 不仅使用新的搜索参数设置新请求,还会触发重新加载表数据 - 但之前的请求仍在运行,因此您执行两次相同的请求(都使用新的搜索参数)。
    3. 设置默认值,但允许用户清除/覆盖它们。
    4. 避免无限循环并保留旧的搜索功能。

    代码如下:

    beforeRequest: function ()
    {
        // Activate filter toolbar and define "beforeSearch" callback
        // to avoid a second search request on page load, triggered 
        // by "triggerToolbar()" when not set.
        //
        // Important: 
        // "beforeSearch" has to return true to avoid the second
        // request on page load, but it has to return false for all
        // following searches (otherwise it wouldn't be possible to
        // submit new searches by pressing Enter in search input fields).
        $("#myTable").jqGrid('filterToolbar', {
            beforeSearch: function(){
                if ($(this).data('firstSearchAbortedFlag') != '1')
                {
                    $(this).data('firstSearchAbortedFlag', '1');
                    return true;
                }
    
                // Return false or add your customizations here...
                return false;
            }
        });
    
        if ($(this).data('defaultValuesSetFlag') != '1')
        {
            // Set flag to set default only the first time when
            // the page is loaded.
            $(this).data('defaultValuesSetFlag', '1');
    
            // Set default values...
            // (id = 'gs_' + fieldname)
            $('#gs_field_a').val('value a');
            $('#gs_field_b').val('value b');
    
            // Call "triggerToolbar" to use the previously set
            // parameters for the current search.
            // 
            // Important: 
            // Set "beforeSearch" callback for "filterToolbar" to avoid
            // a second search request, triggered by "triggerToolbar".
            $("#myTable")[0].triggerToolbar();
        }
    }
    

    希望对你有帮助!

    【讨论】:

      【解决方案3】:

      您是否查看过 jqGrid 文档 wiki 中的 Toolbar SearchingAdd-On Grid Methods?看起来您可以使用filterToolbar 设置过滤器,并使用triggerToolbar 设置过滤器。我自己没有尝试过,但是一旦为网格加载了数据,您可能可以在 loadComplete 中执行此操作。

      这有帮助吗?

      【讨论】:

        【解决方案4】:

        我以与上面的答案不同的方式修复它,我滥用 beforeRequest 函数将初始 de 默认值添加到发布数据。

        与jqGrid的创建者有联系,默认值选项仅用于高级搜索。

        我编写了一个函数,您可以在 onBeforeRequest 函数上设置该函数,该函数将获取搜索选项中的所有默认值并将其附加到发布数据中。所以初始请求中会添加默认值。

        为确保您仍然可以使用 onbeforeRequest 事件,我将更改代码末尾的 onBeforeRequest (this.p.beforeRequest = function() {})。您可以将其更改为您想要的任何内容并调用它。下次您发出请求时,将使用该函数并且该函数将被关闭(因为覆盖)。

        function() {
        
            var defaultSearchOptions = [];
            var colModel = this.p.colModel;
        
            // loop trough each column and check if they have an default value in search options
            // and add them to the array
            $.each(colModel, function (index, column) {
        
                if (column.hasOwnProperty('searchoptions')) {
        
                    var searchOptions = column.searchoptions;
        
                    if (searchOptions.hasOwnProperty('defaultValue')) {
        
                        defaultSearchOptions[defaultSearchOptions.length++] =
                        {
                            ""field"": column.index,
                            ""op"": ""bw"",
                            ""data"": searchOptions.defaultValue
                        };
                    }
                }
            });
        
        
            // if there are any default search options retrieve the post data
            if (defaultSearchOptions.length > 0) {
        
                var postData = this.p.postData;
        
                var filters = {};
        
                // check if post data already has filters
                if (postData.hasOwnProperty('filters')) {
                    filters = JSON.parse(postData.filters);
                }
        
                var rules = [];
        
                // check if filtes already has rules
                if (filters.hasOwnProperty('rules')) {
                    rules = filters.rules;
                }
        
                // loop trough each default search option and add the search option if the filter rule doesnt exists
                $.each(defaultSearchOptions, function (defaultSearchOptionindex, defaultSearchOption) {
        
                    var ruleExists = false;
        
                    $.each(rules, function (index, rule) {
        
                        if (defaultSearchOption.field == rule.field) {
                            ruleExists = true;
                            return;
                        }
                    });
        
                    if (ruleExists == false) {
                        rules.push(defaultSearchOption);
                    }
                });
        
                filters.groupOp = 'AND';
                filters.rules = rules;
        
                // set search = true
                postData._search = true;
                postData.filters = JSON.stringify(filters);
            }
        
            this.p.beforeRequest = function() { // your before request function here };
            this.p.beforeRequest.call(this);
        }
        

        希望对你有帮助

        【讨论】:

          【解决方案5】:

          看完Ziege's answer之后,我想到了那里发生的事情。我想出了一个更简单的方法来在第一个请求到达服务器之前初始化默认值。

          这是一个完整的工作示例。这个想法是有一个列过滤器,其中包含状态下拉列表,“活动”和“关闭”,我希望默认为“活动”。代码有 cmets 来解释发生了什么:

          $('#deals').jqGrid({
              colNames: ['...','Status','...'],
              colModel: [
                  { ... },
                  // Use the defaultValue attribute to set your defaults in the searchOptions object
                  { name: 'Status', stype: 'select', searchoptions: { defaultValue: 'Active', value: {"":"All","Active":"Active","Closed":"Closed",}, sopt: [ 'eq'] }, width: 60 },
                  { ... }
              ],
              // Here's where we intercept each server request to cancel it if it's the first one. 
              // Returning false from this method causes the request to the server to be aborted.
              beforeRequest: function () {
                  // Define a local reference to the grid
                  var $requestGrid = $(this);
                  // Check a data value for whether we've completed the setup. 
                  // This should only resolve to true once, on the first run.
                  if ($requestGrid.data('areFiltersDefaulted') !== true) {
                      // Flip the status so this part never runs again
                      $requestGrid.data('areFiltersDefaulted', true);
                      // After a short timeout (after this function returns false!), now
                      // you can trigger the search
                      setTimeout(function () { $requestGrid[0].triggerToolbar(); }, 50);
                      // Abort the first request
                      return false;
                  }
                  // Subsequent runs are always allowed
                  return true;
              },
              url: 'Url/to/your/action',
              datatype: 'json',
              mtype: 'POST',
              pager: '#deals-pager',
              rowNum: 15,
              sortname: 'Status',
              sortorder: 'desc',
              viewrecords: true,
              height: '100%'
          }).jqGrid('filterToolbar', { stringResult: true });
          

          这也适用于不支持 local 数据类型的 Lib.Web.Mvc 库 (.NET)。

          如果您有多个网格,或者想将 beforeRequest 逻辑移动到库中进行共享,只需将其定义为独立函数并在网格设置中按名称引用它:

          function jqGridFilterSetupRequestHandler = function () {
              var $requestGrid = $(this);
              if ($requestGrid.data('areFiltersDefaulted') !== true) {
                  $requestGrid.data('areFiltersDefaulted', true);
                  setTimeout(function () { $requestGrid[0].triggerToolbar(); }, 50);
                  return false;
              }
              return true;
          }
          
          $('#deals').jqGrid({
              colNames: ['...','Status','...'],
              colModel: [
                  { ... },
                  // Use the defaultValue attribute to set your defaults in the searchOptions object
                  { name: 'Status', stype: 'select', searchoptions: { defaultValue: 'Active', value: {"":"All","Active":"Active","Closed":"Closed",}, sopt: [ 'eq'] }, width: 60 },
                  { ... }
              ],
              beforeRequest: jqGridFilterSetupRequestHandler,
              url: 'Url/to/your/action',
              datatype: 'json',
              mtype: 'POST',
              pager: '#deals-pager',
              rowNum: 15,
              sortname: 'Status',
              sortorder: 'desc',
              viewrecords: true,
              height: '100%'
          }).jqGrid('filterToolbar', { stringResult: true });
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2012-03-05
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2017-01-18
            • 1970-01-01
            相关资源
            最近更新 更多