zoukankan      html  css  js  c++  java
  • JqGrid 显示表格

    JqGrid 是前台的表格显示库,使用起来相当方便。
    这里分享下本人使用过程中遇到的问题及解决方案
    **

    一.rowNum属性

    **
    1.如果不设置,默认显示数是20,也就是说超过20以后的数据。不再显示出来。初次使用JqGrid的经常忽视此属性,导致后期显示出现问题

    2.-1
    rowNum=-1时忽略显示行最大值的检查。一劳永逸。怎么样数据都可以显示出来。但是本人在使用过程中发现设置rowNum=-1时,表格无法显示最后一行的数据
    显示数据从本地获取(datatype: “local”),怎么调试发现都无法显示最后一行。估计是JqGrid的一个bug。使用时一定要小心。

    3.基于1,2 rowNum值最好就是设置为真实数据的最大值。是个动态值。

    4.rowNum设置为真实数据的最大值。可能有人认为无法进行动态行添加了。其实不会这样,rowNum检查,只会发生在表格初期加载的时候。

    **

    二. sortable 属性

    **
    排序功能:
    排序是必须要数据加载完全才可以进行排序,所以sortable属性一定要放在colModel属性后面,否则数据显示不完全,参靠下面设置

    $("#security").jqGrid(
    {
        datatype :"local",
        data :data,
        mtype :"POST",
        colNames :colNames,
        colModel :colModel,
        height :226,
        sortable :true,
        cellEdit :false,
        rowNum : data.length
    });

    三.动态为每个cell设置css
    为cell动态设置css。可以在表格加载完全后设置gridComplete属性中设置

    gridComplete : function() {
        //取得所有行ID
        var rowIds = $("#data").getDataIDs();
        for ( var index = 0; index < rowIds.length; index++) {
            var $tr = $("#" + rowIds[index]);
            //行背景标志位
            var rowFlg = $("#data").getRowData(index).rowFlg;
            var background = "";
            if (rowFlg == "1") {
                background = "add";
            } else if (rowFlg == "2") {
                background = "delete";
            } else {
                background = "update";
            }
            $tr.addClass(background);
            //设置每个cell背景
            $tr.find("td:eq(3)").addClass(
                    $("#data").getCell(rowIds[index],
                            "Flg3"));
            $tr.find("td:eq(4)").addClass(
                    $("#data").getCell(rowIds[index],
                            "Flg4"));
            $tr.find("td:eq(5)").addClass(
                    $("#data").getCell(rowIds[index],
                            "Flg5"));
            }
    }
    

    以上是目前开发遇到的问题,和解决方案。后续继续补充

  • 相关阅读:
    48. Rotate Image
    83. Remove Duplicates from Sorted List
    46. Permutations
    HTML5笔记
    18. 4Sum
    24. Swap Nodes in Pairs
    42. Trapping Rain Water
    Python modf() 函数
    Python min() 函数
    Python max() 函数
  • 原文地址:https://www.cnblogs.com/stoneFang/p/6715309.html
Copyright © 2011-2022 走看看