【问题标题】:jqgrid highlight maximum/minimum cell value from 1 pagejqgrid 突出显示 1 页的最大/最小单元格值
【发布时间】:2020-09-25 11:33:03
【问题描述】:

jqgrid 可以突出显示 1 页的最大/最小单元格值吗?

例如

Name  | Age

Alex  | 25

John  | 30 ----> Highlight this row

Peter | 29


page 1 > >>

感谢您的帮助,

最好的问候,

埃卡

【问题讨论】:

  • 在这里搜索堆栈是个好主意:也许this can help you
  • 嗨托尼,我怎样才能从列中获得最大值?

标签: jquery jqgrid


【解决方案1】:

您可以使用格式化程序并获取单元格中的最大值/最小值以及该单元格的索引。然后,一旦网格加载完成,您可以使用索引向包含最大/最小数量的行添加一个类。这是解决方案的一个示例:

    <script type="text/javascript">

jQuery(document).ready(function(){
    
var mydata = [
        {id:"1",name:"Alex",age:25},
        {id:"2",name:"John",age:30},
        {id:"3",name:"Peter ",age:29}
        ];
    
 var currentMaxAmount = 0;
 var maxAmountIndex = -1;
 var currentIndex = 0;
    jQuery("#list4").jqGrid({
    datatype: "local",
    height: 250,
    colModel:[
        {name:'name',index:'name', width:100},
        {name:'age',index:'age', width:80, align:"right",sorttype:"float",    formatter: function (cellvalue, options, rowObject) {
                
                if(parseInt(cellvalue) > currentMaxAmount)
                {
                    currentMaxAmount = parseInt(cellvalue);
                    maxAmountIndex = currentIndex;
                }
                currentIndex++;
                return cellvalue;
    
            }
        }   
    ],
    multiselect: true,
    data: mydata,
    loadComplete: function (gridData) {
        if(maxAmountIndex > -1)
            $($(".jqgrow")[maxAmountIndex]).addClass("highlighted");
    }
});

});
</script>
<style>
tr.highlighted > td{
background-color: red;
}
</style>

希望这会有所帮助。如果您有任何其他问题,请告诉我。

【讨论】:

  • 执行我,我不明白你的格式化程序逻辑。这个数字是从哪里来的? var currentMaxAmount = 0; var maxAmountIndex = -1; var currentIndex = 0;你能帮我解释一下吗?
  • var currentMaxAmount = 0; var maxAmountIndex = -1; var currentIndex = 0;这里我正在初始化稍后要使用的参数。格式化程序函数在加载每一行时执行。所以从逻辑上讲,就好像您正在遍历表并将当前行的年龄与当前最大数量进行比较。如果当前行中的年龄大于当前最大值,那么我们将当前最大值替换为年龄并保存该行的索引。在 loadComplete 时,我们有包含最大年龄的行的索引,因此我们将其突出显示。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-02-17
  • 2022-08-05
  • 2014-10-05
  • 1970-01-01
  • 2021-10-04
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多