jqGrid динамически изменить фильтр

Question

У меня есть сетка на моей странице.

  $("#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 с выбором. Очень хорошо.

Далее: у нас есть кнопка на странице. Мы должны изменить выбранные значения фильтра при нажатии кнопки.

Мы стараемся сделать так:

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

Но после нажатия на кнопку у нас есть старые значения в select. Что мы должны написать, чтобы динамически изменить выбор фильтра? Возможно ли это с помощью таблиц JSON?

Большое спасибо.

Answer 1

Метод filterToolbar не имеет специального интерфейса для обновления (перестройки) выбранных значений на основе текущих (модифицированных) значений в searchoptions. Так что, если вы не хотите перестраивать select вручную внутри $(".testButton1").click дескриптора события после изменения value из searchoptions в соответствующем столбце. Идентификатор элементов select или других входных элементов панели инструментов поиска генерируется на основе свойства name соответствующего столбца. Идентификатор имеет префикс "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>');
});

Я использовал значение «Любое», чтобы позволить пользователю выбирать данные, не отфильтрованные по столбцу.