javascript - Jqgrid 的 Excel 类型过滤器弹出窗口

Question

我需要一个过滤器(就像在 Excel 电子表格中一样)嵌入到“jquery”对话框弹出窗口中。在这种情况下，我需要显示列中的所有唯一值，并在该值之前显示复选框以供用户选择。当用户按下过滤按钮时，我需要仅过滤用户通过复选框请求的值。

任何人都可以告诉我我必须遵循的任何方法吗？预先感谢您的帮助和宝贵的时间。

Answer 1

我能够使用 Excel 类型的过滤功能开发基本网格。任何遇到此类需求的人都可以使用此答案作为基础。

我使用this 'Oleg' 的回答，将过滤器弹出屏幕嵌入到基本的 'jqgrid' 中。

在jqgrid页面中声明这个数组，其中包含需要显示过滤屏幕弹出窗口的属性(列)。

var applyFilterColumnNames = ['Id','Type','custId','UserId'];

并且列模型应如下 -

 colModel :[ 
          {name:'Id', index:'Id',hidden: true,sortable: true},
          {name:'custId', index:'custId', width:140,align:"left",sortable: true,search : false},
          {name:'Type', index:'Type', width:120,align:"left",sortable: true,search : false},
          {name:'UserId', index:'UserId', width:150,align:"left",sortable: true,search : false},
         ],

使用该引用答案来嵌入过滤按钮功能。

    gr.closest("div.ui-jqgrid-view").find("div.ui-jqgrid-hdiv table.ui-jqgrid-htable tr.ui-jqgrid-labels > th.ui-th-column > div.ui-jqgrid-sortable")

.each(function () {
    var idPrefix = "jqgh_" + gr[0].id + "_";

    var idIndex = (this.id).substr(idPrefix.length,this.id.length) ;

    if(includeInArray(applyFilterColumnNames,idIndex)){

        jq('<button id=btn_'+idIndex+'>').css({float: "right", height: "17px"}).appendTo(this).button({

                icons: {

                    primary: "ui-icon-gear"

                },

                text: false

            }).click(function (e) {

                var idPrefix = "jqgh_" + gr[0].id + "_";

                // thId will be like "jqgh_list_name"
                var thId = jq(e.target).closest('div.ui-jqgrid-sortable')[0].id ;



                if (thId.substr(0, idPrefix.length) === idPrefix) {

                    var colName = thId.substr(idPrefix.length);
                    //alert('Clicked the button in the column "' + colName + '"');
                    constructFilter(colName);

                    return false;

                }



            });
        //}
    }
});

下面是我用来根据过滤器过滤jqgrid的脚本

    //Variables that use in filtering operation
    var originalData = null;
    var filteredData;
    var selectedFilters = new Object();
    var chkBoxElement;
    var firstSortColumn;


    function constructFilter(columnName){

        // for the first initiation of the filter populate current grid data to an array
        if(originalData == null || originalData == 'null'){
            try{
                // this array will hold the initail data set of the grid
                originalData  = gr.jqGrid('getGridParam','data');
                // set the first sorting grid column
                firstSortColumn = columnName;
                // check if column is associated with a formatter. if so format the originalData values accordingly.
                formatGridData(columnName);
            }catch(e){}
        }


        var colData = new Array();

        var filterDataSet;

        // if current column is equal to initial sorted column set all posible values to the check boxes in the 
        // filter screen to select. ( since this is the master sorting column and other columns will filter according to that)
        if(columnName == firstSortColumn){
            filterDataSet = originalData;
        }else{
            // set current grid data set to show as checkboxes in the filter page
            filterDataSet = gr.jqGrid('getCol',columnName,false);
        }

            for(key in filterDataSet){
                // check box element object that will hold the checkbox label and its state ( true / false)
                chkBoxElement = new Object();
                chkBoxElement.id = getValueFromArray(filterDataSet[key],columnName);

                if(typeof(chkBoxElement.id)== 'undefined'){
                    break;
                }
                // if this id is saved in previous filtering event checked option will set to true.
                 if(typeof(selectedFilters[columnName]) != 'undefined'){

                    if (includeInArray(selectedFilters[columnName],chkBoxElement.id)){
                        chkBoxElement.selected = true;
                     }else{
                         chkBoxElement.selected = false;
                     }
                } 

                colData.push(chkBoxElement);

            }

        // removing duplicates  
        var uniqueValues = removeDuplicates(colData);

        // sort the array without duplicate with the custom comparator
        uniqueValues.sort(sortComparator);

        // open the filter screen. return type will captured in the 'seletedElements' variable as pipe separated string
        seletedElements = window.showModalDialog(filterUrl,uniqueValues,"dialogWidth:400px;dialogHeight:250px;center:yes;resizable:no;status:no;help:no;");


        if(seletedElements != null && seletedElements != 'null'){
            // get selected values to the array
            selectedFilters[columnName] = seletedElements.split("|");
        }else{
            //user just close the popup (using close button) will return without doing anything
            return;
        }


        if(columnName == firstSortColumn){
            // refine filter with the non filtered data set
            refillGrid(seletedElements,columnName,originalData);
        }else{
            // send current data set to refine
            var currentDataSet  = gr.jqGrid('getGridParam','data');
            refillGrid(seletedElements,columnName,currentDataSet);
        }

    }


    function formatGridData(columnName){

        var isFormatter = gr.jqGrid("getColProp",columnName);

        if(typeof isFormatter.formatter !== 'undefined') {
                if(jq.isFunction( isFormatter.formatter ) ) {

                    for(key in originalData){

                        var plainValue = originalData[key][columnName];
                        var formattedVal = isFormatter.formatter.call(null,plainValue,null,null,null);
                        originalData[key][columnName] = formattedVal;
                    }
                } 
        }
    }


    function resetFilters(){
        for(key in applyFilterColumnNames){

             jq("#btn_"+applyFilterColumnNames[key]).button("option", { 
                    //icons: { primary: this.checked ? 'ui-icon-check' : 'ui-icon-closethick' }
                    icons: { primary: 'ui-icon-gear'}

                });
        }

        gr.jqGrid("setCaption",gridCaption);
        refreshGrid(originalData);
        originalData = null;
        firstSortColumn = null;
        selectedFilters = new Object();
    }


    function refillGrid(seletedElements,columnName,filterDataSet){
        var filteredData= new Array();
        var elementsArray;
        try{
            elementsArray = seletedElements.split("|"); 
        }catch(e){
            // this exception happens when user simply open the filter screen 
            // do nothing and close it.
            trace('Error in filter splitting -'+e);
            return;
        }

        // When user de-select all check boxes from the popup screen
        if(elementsArray == ""){
            refreshGrid(originalData);
            return;
        }
        // refine the grid data according to the filters
        var mydata = filterDataSet;

            for(i=0;i<elementsArray.length;i++){
                 var filterElement = elementsArray[i]; 

                    for(j = 0;j<mydata.length;j++){
                        if(filterElement==getValueFromArray(mydata[j],columnName)){
                            filteredData.push(mydata[j]);
                        }
                    }
            }

            // change the button icon to indicate that the column is filtered
            changeButtonIcon(columnName);
            // update the column header to indicate sort by column
            changeGridCaption(columnName);
            // fill the grid according to the passed array
            refreshGrid(filteredData);

    }

    function changeGridCaption(columnName){
        // get columns name array
        var columnNames = gr.jqGrid('getGridParam','colNames');
        // get column model array
        var colModel = gr.jqGrid('getGridParam','colModel');
        var colModelIndex=null;

        if (firstSortColumn == columnName){
            for(key in colModel){
                try{
                    if (colModel[key].name == firstSortColumn){
                        colModelIndex = key;
                        break;
                    }   
                }catch(e){}
            }

        if(colModelIndex != null){
            var columnName = columnNames[colModelIndex];
            gr.jqGrid("setCaption",gridCaption + " - Filtered based on : "+columnName);
        }   


        }
    }

    function changeButtonIcon(columnName){
         //change the button Icon
    jq("#btn_"+columnName).button("option", { 
            //icons: { primary: this.checked ? 'ui-icon-check' : 'ui-icon-closethick' }
        icons: { primary: 'ui-icon-link'}

        });
    }


    function getValueFromArray(obj,columnName){
        if(obj !=null && typeof(obj)!='undefined'){
            // if obj param is string just return it
            if(typeof obj =='string'){
                return obj;
            }else{
                return obj[columnName];

            }
        }
    }

    function sortComparator(a,b){
        try{
            var aId = a.id.toLowerCase();
            var bId = b.id.toLowerCase();
            if (aId < bId) {return 1}
            if (aId > bId) {return -1}
        }catch(e){
            return 0;   
        }
    }

    function includeInArray(arr,obj) {
        //alert(arr);
    return (arr.indexOf(obj) != -1);
    }


    function refreshGrid(results) {
    gr.jqGrid('clearGridData')
     .jqGrid('setGridParam', { data: results })
     .trigger('reloadGrid');
    }

    function removeDuplicates(valueArray){
        var arr = {};
        for ( i=0; i < valueArray.length; i++ ){
            if(valueArray[i].id != null){
                arr[valueArray[i].id] = valueArray[i];
            }

        }

        valueArray = new Array();
        for ( key in arr ){
            valueArray.push(arr[key]);
        }



return valueArray;
}

如果这里有问题，请告诉我。这个解决方案工作正常。但我真的很欣赏关于性能和代码最佳实践的评论。