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

【问题标题】：Empty tooltip is getting displayed on JQGrid Cells and sorting not working properly空工具提示显示在 JQGrid 单元格上并且排序无法正常工作
【发布时间】：2012-03-15 05:54:14
【问题描述】：

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

更新 #1

此代码的另一个问题是排序。它无法正常工作。 Part Number 列未排序，Length、Diameter 和 GlobalShipments 等列基于 Text 类型而不是 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>

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

【问题讨论】：

我查看了 jqGrid 4.0 的一些示例，如果网格单元格为空，它不会显示工具提示。请参阅jqGrid Demos 中的“加载数据”部分。你的代码中一定有你正在做的事情。如果您发布代码，也许有人可以帮助您。
我用 jqGrid 4.1.1 和 4.3.1 做了一些测试，但无法重现问题。您应该发布可用于重现问题的代码和测试数据。
如果传入的数据为null，那么它会显示空提示？
@Oleg，我已经发布了代码。它有工具提示问题和排序问题:(
我发现了 3 件事 1. 空单元格不应该有任何东西，即使是单个空格 2. 排序类型区分大小写，即 sortType 不正确。它应该是排序类型。 3. index 和 name 属性应该具有相同的值。值后甚至是单个空格也很重要。

标签： jquery sorting jqgrid tooltip

【解决方案1】：

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

为您的代码添加一些小的附加 cmets。您使用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 对象。

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

【讨论】：