Question

我在我的应用程序中使用了JGGrid（版本4.1.1）。我的网格的问题是，工具提示也显示为空单元格。如果数据在网格单元格中不可用，如何避免或隐藏工具提示？我在一些帖子中读到，此问题已从3.6版本的JQGrid开始解决。但它仍然会到来。有人可以帮我解决这个问题。

更新＃1

此代码的另一个问题是排序。它工作不正常。部件号列未进行排序，而像Length，Diameter和GlobalShipments这样的列将根据Text类型而不是Float类型进行排序。我已将sorttype指定为这些列的float。但他们仍然会根据文本值进行排序。

这是我的代码（这有工具提示问题和排序问题）：

jqGrid演示

    <link rel="stylesheet" type="text/css" media="screen" href="themes/blitzer/jquery-ui-1.8.16.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />  
    <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script> 
    <script src="js/grid.locale-en.js" type="text/javascript"></script>        
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>  

    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true; 

        var mydata = [];
        var jsonColModel = {};

        $(function () {
            mydata = [
                { //hiding the data as it is conf.. }];

            var strColumnModelold = '[{ "label": "Part Number", "name": "partNumber", "index": "partNumber ", "width": 80 }, { "label": "Part Revision", "name": "partRevision", "index": "partRevision", "width": 50, "align": "center" }, { "label": "Part Status", "name": "partStatus", "index": "partStatus", "width": 80, "hidden": true }, { "label": "Policy", "name": "policy", "index": "policy", "width": 100, "hidden": true }, { "label": "Status", "name": "status", "index": "status", "width": 80 }, { "label": "IDM", "name": "idm", "index": "idm", "width": 45, "align": "center" }, { "label": "IDM2", "name": "idm2", "index": "idm2", "width": 45, "hidden": true, "align": "center" }, { "label": "Part Type", "name": "partType", "index": "partType", "width": 75, "align": "center" }, { "label": "Diameter [min] (mm)", "name": "diameterMinMm", "index": "diameterMinMm", "width": 50, "hidden": true, "align": "center", "sortType": "float" }, { "label": "Diameter [max] (mm)", "name": "diameterMaxMm", "index": "diameterMaxMm", "width": 50, "hidden": true, "align": "center", "sortType": "float" }, { "label": "Diameter [nominal] (mm)", "name": "diameterNomMm", "index": "diameterNomMm", "width": 50, "align": "center", "sortType": "float" }, { "label": "Length [min] (mm)", "name": "lengthMinMm", "index": "lengthMinMm", "width": 50, "hidden": true, "align": "center", "sortType": "float" }, { "label": "Length [max] (mm)", "name": "lengthMaxMm", "index": "lengthMaxMm", "width": 50, "hidden": true, "align": "center", "sortType": "float" }, { "label": "Length [nominal] (mm)", "name": "lengthNomMm", "index": "lengthNomMm", "width": 50, "align": "center", "sortType": "float" }, { "label": "Global Shipments", "name": "globalShipments", "index": "globalShipments", "width": 50, "align": "center", "sortType": "float" }, { "label": "IFP", "name": "ifp", "index": "ifp", "width": 35, "align": "center" }, { "label": "Inch or Metric", "name": "metricSystem", "index": "metricSystem", "width": 45, "align": "center"}]';

            jsonColModel = $.parseJSON(strColumnModelold);
            createGrid();
        });

        function createGrid() {

            $("#list2").jqGrid({
                datatype: 'local',
                data: mydata,
                colModel: jsonColModel,
                rowNum: 10,
                rowList: [10, 25, 50],
                pager: '#pager2',
                page: 1,
                gridview: true,
                rownumbers: false,
                viewrecords: true,
                altRows: true,
                loadtext: "Loading parts data...",
                ajaxGridOptions: { cache: false },
                caption: 'Part Data',
                width: 713,
                shrinkToFit: false,
                scrollOffset: 0,
                height: '100%'
            });
        }
    </script>
</head>
<body>
    <div>
        <table id="list2"></table>
        <div id="pager2" ></div>    
    </div>
</body>

抱歉在这里发布了大量代码。

Answer 1

存在问题是因为您当前的数据不为空。您的数据包含"status": " "而不是"status": ""。如果你在jqGrid中使用之前修剪数据，问题就会解决。

您的代码的一些小额外评论。您使用datatype: 'local'，因此可以删除ajaxGridOptions: { cache: false }选项。您也可以删除默认的page: 1。

你在错误的地方使用$.jgrid.no_legacy_api = true。正确的方法是

<script type="text/javascript" src="js/grid.locale-en.js"></script>
<script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

如果$.jgrid.no_legacy_api将在 jquery.jqGrid.min.js之前设置，而 grid.locale-en.js之后的将创建$.jgrid个对象

此外，我建议您在mydata内定义jsonColModel，createGrid和$(function () {...});。它将减少与您在页面上包含的所有其他JavaScripts中的其他全局对象的可能名称冲突。

空工具提示将显示在JQGrid单元格上，并且排序无法正常工作

1 个答案: