Question

我有一张表，其中包含来自数据库的一些数据。复杂性是我用Javascript进行一些计算我根据计算结果（红色背景，绿色背景或粗体字等）着色一些单元格。结果是一张彩色表格，还有一些用于制作公式的隐藏列。

所以，我想应用一个过滤器工具栏行，它将使用三种可能性过滤行：按单元格颜色过滤，否则根据另一列上的值过滤列，或者按类过滤。在我的示例中，过滤器仅应用于Margin Columns 例如（我正在简化，因为我的表格更复杂，但概念是这样的表格）：

| 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>

Jqgrid Filtertoolbar基于颜色或其他列值或单元类

1 个答案: