jqGrid筛选器工具栏初始默认值

时间:2010-03-13 23:10:12

标签: jquery jqgrid

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

目前我有一个像这样的解决方法

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

但它会导致第二次请求而且非常糟糕。

有人知道怎么做吗?

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

5 个答案:

答案 0 :(得分:38)

执行此操作有几个步骤:

  1. 在列模型搜索选项中传递默认值
  2. 阻止默认表单数据加载过程
  3. 在表准备就绪时触发过滤器工具栏数据加载
  4. 更详细一点:

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

      $("#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();
    

答案 1 :(得分:3)

我读到的所有提示都不适合我。所以我尝试了很多并在jqGrid源代码中做了一些研究。如果您使用beforeRequest事件,则可以更轻松地集成“默认值”或“已保存的搜索值”功能。

我必须解决一些问题:

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

    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();
        }
    }
    

    我希望这可以帮到你!

答案 2 :(得分:1)

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

这有帮助吗?

答案 3 :(得分:1)

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

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

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

为确保您仍然可以使用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);
}

希望这有帮助

答案 4 :(得分:0)

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

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

$('#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 });

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

如果您有多个网格,或者想将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 });