jquery 예제 도구 모음 필터 필드에서 jqgrid가 드롭 다운을 지원할 수 있습니까?




jquery attr 변경 (4)

jqGrid의 모든 유형의 정렬에 대한 몇 가지 공통 규칙 이 있습니다.

{
    name: 'Category', index: 'Category', width: 200, formatter:'select', 
    stype: 'select', searchoptions:{ sopt:['eq'], value: categoriesStr }
}

categoriesStr 은 다음과 같이 정의됩니다.

var categoriesStr = ":All;1:sport;2:science";

여기에 추가적으로 표준 "1 : 스포츠; 2 : 과학"값이 삽입됩니다 : "모든 :"문자열을 필터링하지 못하게하는 문자열. 물론 ":"또는 ": 선택 ..."등을 사용할 수 있습니다.

대답 을 준비한 데모 에서 가까운 결과를 볼 수 있습니다.

업데이트 : 귀하의 질문이 흥미롭고 데모를 만들었 습니다 . 그것은 어떻게 검색 툴바 또는 해당 열의 텍스트 포함을 기반으로 고급 검색 대화 상자에서 사용할 수있는 선택 comboboxes를 구축 할 수 있는지 보여줍니다. 한 열의 경우 jQuery UI 자동 완성을 추가로 사용합니다. 자동 완성의 다른 강력한 옵션을 사용하도록 코드를 수정할 수 있습니다. 다음은 코드의 코드입니다.

var mydata = [
        {id:"1", Name:"Miroslav Klose",     Category:"sport",   Subcategory:"football"},
        {id:"2", Name:"Michael Schumacher", Category:"sport",   Subcategory:"formula 1"},
        {id:"3", Name:"Albert Einstein",    Category:"science", Subcategory:"physics"},
        {id:"4", Name:"Blaise Pascal",      Category:"science", Subcategory:"mathematics"}
    ],
    grid = $("#list"),
    getUniqueNames = function(columnName) {
        var texts = grid.jqGrid('getCol',columnName), uniqueTexts = [],
            textsLength = texts.length, text, textsMap = {}, i;
        for (i=0;i<textsLength;i++) {
            text = texts[i];
            if (text !== undefined && textsMap[text] === undefined) {
                // to test whether the texts is unique we place it in the map.
                textsMap[text] = true;
                uniqueTexts.push(text);
            }
        }
        return uniqueTexts;
    },
    buildSearchSelect = function(uniqueNames) {
        var values=":All";
        $.each (uniqueNames, function() {
            values += ";" + this + ":" + this;
        });
        return values;
    },
    setSearchSelect = function(columnName) {
        grid.jqGrid('setColProp', columnName,
                    {
                        stype: 'select',
                        searchoptions: {
                            value:buildSearchSelect(getUniqueNames(columnName)),
                            sopt:['eq']
                        }
                    }
        );
    };

grid.jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name:'Name', index:'Name', width:200 },
        { name:'Category', index:'Category', width:200 },
        { name:'Subcategory', index:'Subcategory', width:200 }
    ],
    sortname: 'Name',
    viewrecords: true,
    rownumbers: true,
    sortorder: "desc",
    ignoreCase: true,
    pager: '#pager',
    height: "auto",
    caption: "How to use filterToolbar better locally"
}).jqGrid('navGrid','#pager',
          {edit:false, add:false, del:false, search:false, refresh:false});

setSearchSelect('Category');
setSearchSelect('Subcategory');

grid.jqGrid('setColProp', 'Name',
            {
                searchoptions: {
                    sopt:['cn'],
                    dataInit: function(elem) {
                        $(elem).autocomplete({
                            source:getUniqueNames('Name'),
                            delay:0,
                            minLength:0
                        });
                    }
                }
            });

grid.jqGrid('filterToolbar',
            {stringResult:true, searchOnEnter:true, defaultSearch:"cn"});

이게 니가 원하는거야?

UPDATED : 드롭 다운의 장점과 자동 완성 기능에 의한 쾌적한 검색 기능을 결합한 select2 플러그인 사용 방법이 한 가지 더 있습니다. 데모 ( 코드 와이 코드)와 코드 예제 는 답변 과이 코드 (데모 참조)를 참조하십시오.

업데이트 된 2 : 대답 은 jqGrid 4.6 / 4.7 또는 무료 jqGrid 4.8 함께 작동하도록 위의 코드의 수정이 포함되어 있습니다.

jqgrid 및 도구 모음 필터를 사용하고 있습니다. 기본적으로 데이터를 입력 할 수있는 텍스트 상자가 제공됩니다. 드롭 다운 선택 콤보 박스를 지원합니까? 어디에서 필터를 선택할 수있는 값 목록을 줄 수 있습니까?


category 는 열 이름입니다.

loadComplete: function () {
    $("#" + TableNames).setColProp('Category', {
        formatter: 'select', edittype: "select",
        editoptions: { value: "0:MALE;1:FEMALE;2:other;" }
    });
},

나는 비슷한 상황이었다. 위의 Oleg의 우수 사례 덕분에 거의 문제를 해결할 수있었습니다. 약간의 개선이 필요했습니다. 내 표는 약 40 개의 행 (페이지 당 10 개)이있는로드 니스 그리드입니다. 위에서 사용 된 getCol 메서드는 현재 페이지의 열 값만 반환했습니다. 그러나 전체 데이터 세트에서 고유 한 값으로 필터를 채우고 싶었습니다. 여기 getUniqueNames 함수를 약간 수정했습니다.

var getUniqueNames = function(columnName) {

// Maybe this line could be moved outside the function           
// If the data is really huge then the entire segregation could
// be done in a single loop storing each unique column
// in a map of columnNames -> unique values
var data = grid.jqGrid('getGridParam', 'data');
var uniqueTexts = [], text, textsMap = {}, i;

for (i = 0; i < data.length; i++) {

                 text = data[i][columnName];

                 if (text !== undefined && textsMap[text] === undefined) {
                     // to test whether the texts is unique we place it in the map.
                     textsMap[text] = true;
                     uniqueTexts.push(text);
                 }
             }

         // Object.keys(textsMap); Does not work with IE8: 
             return uniqueTexts;
}

방금 나 자신을 했어. 해킹 같은 느낌 이었지만 작동합니다!

  1. 새로운 "navButtonAdd"를 만들고 "캡션"에 드롭 다운을위한 html 코드를 추가했습니다.
  2. onclickButton 함수에는 아무 것도 포함되어 있지 않습니다.
  3. 그런 다음 값 변경시 그리드의 재로드를 처리하기 위해 onchange 함수를 만들었습니다.

        $('#myGrid').jqGrid('navButtonAdd', '#myGrid_toppager', {
            caption: "<select id='gridFilter' onchange='ChangeGridView()'><option>Inbox</option><option>Sent Messages</option></select>",
            title: "Apply Filter",
            onClickButton: function () {                 
            }
        });
    
        function ChangeGridView() {
            var gridViewFilter = $("#gridFilter").val();
            $('#myGrid').setGridParam({ datatype: 'json', url: '../../Controller/ActionJSON', postData: { msgFilter: gridViewFilter } });
            $('#myGrid').trigger("reloadGrid"); 
        }; 
    

    희망이 도움이!







jqgrid