jqGrid动态更改filterToolbar选择

时间:2012-03-17 11:15:54

标签: jquery jqgrid

我的网页上有一个网格。

  $("#listU05").jqGrid({
    url:'u05json.json',
    datatype: 'json',
    mtype: 'POST',
    colNames:[
        '<spring:message code="u05.Column.Thema"/>',
        '<spring:message code="u05.Column.SubThema"/>',
        '<spring:message code="u05.Column.status1"/>',
        '<spring:message code="u05.Column.wie"/>',
        '<spring:message code="u05.Column.KW"/>',
        '<spring:message code="u05.Column.Jahr"/>',
        '<spring:message code="u05.Column.kampagne"/>',
        '<spring:message code="u05.Column.ergebnis"/>',
        '<spring:message code="u05.Column.B1"/>',
        '<spring:message code="u05.Column.B2"/>',
        '<spring:message code="u05.Column.personal"/>',
        '<spring:message code="u05.Column.qualifikation"/>',
        '<spring:message code="u05.Column.iv"/>',
        '<spring:message code="u05.Column.objekt"/>',
        '<spring:message code="u05.Column.NR"/>',
        '<spring:message code="u05.Column.ObjektArt"/>',
        '<spring:message code="u05.Column.vorname"/>',
        '<spring:message code="u05.Column.name"/>',
        '<spring:message code="u05.Column.Z1"/>',
        '<spring:message code="u05.Column.Z2"/>',
        '<spring:message code="u05.Column.Z3"/>',
        '<spring:message code="u05.Column.Z4"/>',
        '<spring:message code="u05.Column.team"/>'    
    ],
    colModel :[ 
        {name:'Thema', index:'u_05_01.Thema', width:55},
        {name:'SubThema', index:'u_05_01.SubThema', width:55},
        {name:'status1', index:'u_05_01.status1', width:55},
        {name:'wie', index:'u_05_01.wie', width:55},
        {name:'KW', index:'u_05_01.KW', width:55},
        {name:'Jahr', index:'u_05_01.Jahr', width:55},
        {name:'kampagne', index:'u_05_01.kampagne', width:55},
        {name:'ergebnis', index:'u_05_01.ergebnis', width:55},
        {name:'B1', index:'u_05_01.B1', width:55},
        {name:'B2', index:'u_05_01.B2', width:55},
        {name:'personal', index:'u_03.personal', width:55},
        {name:'qualifikation', index:'u_03.qualifikation', width:55},
        {name:'iv', index:'u_03.iv', width:55},
        {name:'objekt', index:'u_05_01.objekt', width:55},
        {name:'NR', index:'u_05_01.NR', width:55},
        {name:'ObjektArt', index:'u_05_01.ObjektArt', width:55},
        {name:'vorname', index:'u_06.vorname', width:55},
        {name:'name', index:'u_06.name', width:55},
        {name:'Z1', index:'u_05_01.Z1', width:55},
        {name:'Z2', index:'u_05_01.Z2', width:55},
        {name:'Z3', index:'u_05_01.Z3', width:55},
        {name:'Z4', index:'u_05_01.Z4', width:55},
        {name:'team', index:'u_05_01.team', width:55}
    ],
    pager: '#pager',
    rowNum:100,
    rowList:[10,50,100],
    sortname: 'u_05_01.Thema',
    sortorder: 'asc',
    viewrecords: true,
    gridview: true,
    height: 400,   
    caption: '<spring:message code="u05.TITLE"/>',
    loadComplete: function(data) {
        setSearchSelect($(this), 'Thema', data, 0);
        setSearchSelect($(this), 'SubThema', data, 1);
        setSearchSelect($(this), 'status1', data, 2);
        setSearchSelect($(this), 'wie', data, 3);
        setSearchSelect($(this), 'KW', data, 4);
        setSearchSelect($(this), 'Jahr', data, 5);
        setSearchSelect($(this), 'kampagne', data, 6);
        setSearchSelect($(this), 'ergebnis', data, 7);
        setSearchSelect($(this), 'B1', data, 8);
        setSearchSelect($(this), 'B2', data, 9);
        setSearchSelect($(this), 'personal', data, 10);
        setSearchSelect($(this), 'qualifikation', data, 11);
        setSearchSelect($(this), 'iv', data, 12);
        setSearchSelect($(this), 'objekt', data, 13);
        setSearchSelect($(this), 'NR', data, 14);
        setSearchSelect($(this), 'ObjektArt', data, 15);
        setSearchSelect($(this), 'vorname', data, 16);
        setSearchSelect($(this), 'name', data, 17);
        setSearchSelect($(this), 'Z1', data, 18);
        setSearchSelect($(this), 'Z2', data, 19);
        setSearchSelect($(this), 'Z3', data, 20);
        setSearchSelect($(this), 'Z4', data, 21);
        setSearchSelect($(this), 'team', data, 22);
        $(this).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
        sortSelects();
    }    
  });  
    jQuery("#listU05").jqGrid('navGrid','#pager',{del:false,add:false,edit:false,search:false});    

加载网格后,我有一个很好的网格,filterToolbar有选择。 很好。

下一页:页面上有一个按钮。我们必须在按钮的onclick中修改过滤器选择值。

我们试着这样做:

$(".testButton1").click(
    function() {
        $("#listU05").setColProp('Thema',
                    {
                        stype: 'select',
                        searchoptions: {
                            value:'a:a',
                            sopt:['eq']
                        }
                    }
        );
            $("#listU05").filterToolbar({stringResult: true,searchOnEnter : false});
    })

但点击按钮后,我们在选择中有旧值。 我们应该写什么来dinamically改变过滤器的选择? 是否可以使用JSON表?

非常感谢。

1 个答案:

答案 0 :(得分:0)

方法filterToolbar没有特殊的界面来根据searchoptions中的当前(已修改)值更新(重建)选择。因此,如果您在相应列中更改$(".testButton1").click value之后,不想在searchoptions事件句柄内手动重建选择。搜索工具栏的select或其他输入元素的id是基于相应列的name属性生成的。 id的前缀为"gs_"。例如,如果您更改searchoptions.value列的'Thema',则必须更新标识为'gs_Thema'的选项的选项。

例如

$(".testButton1").click(function () {
    $("#listU05").jqGrid('setColProp', 'Thema', {
        stype: 'select',
        searchoptions: {
            value:':Any;val:Text',
            sopt:['eq']
        }
    });
    $("#gs_Thema").html('<option value="">Any</option><option value="val">Text</option>');
});

我使用“Any”值来允许用户选择未经过过滤的数据。