基於顏色或另一個列值或單元格類的Jqgrid Filtertoolbar

Question

我有一張表，其中包含一些來自數據庫的數據。 復雜性在於，我使用Javascript進行計算，並根據計算結果（紅色背景，綠色背景或粗體字體等）為某些單元格着色。 結果是一個彩色表，其中還包含一些用於創建公式的隱藏列。

因此，我想應用一個過濾器工具欄行，它將使用三種可能性來過濾行：按單元格顏色過濾，否則根據另一列上的值過濾列，或者按類過濾。 在我的示例中，僅將過濾器應用於保證金列（例如，我進行了簡化，因為我的表比較復雜，但是概念是這樣的表）：

| Item | Buy Price | Sell Price | Margin $            | Margin %           | (my columns)
|      |           |            | Red/Green (select)  | Red/Green (select) | (filter toolbar)

是否可以使用單元格的顏色制作“局部”濾鏡？ 還是可以基於另一列上的值來過濾每列上的所有行我的表是使用JSON數據類型構建的，但是應該將過濾器轉換為在本地操作，這也是可能的嗎？

Answer 1

我正在發布用於顯示數據的代碼…所有數據均來自使用PHP的數據庫，並且我基於一些簡單的比較就應用了本地着色。我希望基於值進行本地搜索。

 <script type="text/javascript">
$(document).ready(function(){

var grid = $("#tbl_result");

grid.jqGrid({
    url:'grids/evaluate_prices.php',
    datatype: "json",
    colNames:['hidden_id_item', 'Item', 'Best Price', 'Supplier1', 'Supplier2', 'Supplier3'],
    colModel :[
        { name:'hidden_id_item', index:'hidden_id_item', hidden:true, key:true },
        { name:'item', index:'item', width:215, search:false},
        { name:'best_price', index:'best_price', width:73, align:"center", sorttype:'number', formatter:'number', formatoptions: { decimalPlaces: 4 }, search:false},
        { name:'supplier1', index:'supplier1', width:75, align:"center", sorttype:'number', stype: 'select', searchoptions: {value:':;1:Best'} },
        { name:'supplier2', index:'supplier1', width:75, align:"center", sorttype:'number', stype: 'select', searchoptions: {value:':;1:Best'} },
        { name:'supplier3', index:'supplier1', width:75, align:"center", sorttype:'number', stype: 'select', searchoptions: {value:':;1:Best'} }
    ],
    gridComplete:function() {
        var ids = grid.jqGrid('getDataIDs');


            //coloring based on value of column best (DB calculated)
            for (i = 0; i < ids.length; i++) {

                if ( parseFloat(grid.jqGrid("getCell", ids[i], 'best_price').replace(/,/, '.')) == parseFloat(grid.jqGrid("getCell", ids[i], 'supplier1').replace(/,/, '.')) ) {
                    $(this).jqGrid('setCell', ids[i], 'supplier1','',{color: 'black', background: '#94FF94'});
                }

                if ( parseFloat(grid.jqGrid("getCell", ids[i], 'best_price').replace(/,/, '.')) == parseFloat(grid.jqGrid("getCell", ids[i], 'supplier2').replace(/,/, '.')) ) {
                    $(this).jqGrid('setCell', ids[i], 'supplier2','',{color: 'black', background: '#94FF94'});
                }                           

                if ( parseFloat(grid.jqGrid("getCell", ids[i], 'best_price').replace(/,/, '.')) == parseFloat(grid.jqGrid("getCell", ids[i], 'supplier3').replace(/,/, '.')) ) {
                    $(this).jqGrid('setCell', ids[i], 'supplier3','',{color: 'black', background: '#94FF94'});
                }                           

            }
    },
    rowList: [],        // disable page size dropdown
    pgbuttons: false,     // disable page control like next, back button
    pgtext: null,         // disable pager text like 'Page 0 of 10'
    viewrecords: false,    // disable current view record text like 'View 1-10 of 100'          
    rowNum: 2000,
    autowidth: true,
    shrinkToFit: true,
    rownumbers: true,
    toppager: true,
    footerrow:true,
    loadonce:true,
    pager: '#tbl_pager',
    sortname: 'item',
    gridview: true,
    sortorder: "asc",
    caption: "Result"
}); 

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

//buttons
grid.jqGrid('navGrid','#tbl_pager',
    { add: false, edit: false, del: false, search: true, refresh: true, cloneToTop: true }, // navGrid options
    {}, // edit option
    { reloadAfterSubmit:true}, // add options
    {}, // del options
    {multipleSearch:true}  // !!! search options !!!
);

// remove some double elements from one place which we not need double
var topPagerDiv = $('#' + grid[0].id + '_toppager')[0];         // "#list_toppager"
$("#" + grid[0].id + "_toppager_center", topPagerDiv).remove(); // "#list_toppager_center"
$(".ui-paging-info", topPagerDiv).remove();


});
</script>