1

我构建了一个充满单元格的智能数据网格,这些单元格将识别(模糊)它们是否被更改,以及值是上升还是下降。

这是它的样子。当用户悬停已更改的框并告诉他们页面首次加载时的值是什么时,会出现灰色工具提示。


在此处输入图像描述


我想将其转换为 Wijmo Grid,但保留相同的上/下脚本以显示值何时以及如何更改。但是,当我将表格初始化为 Wijmo 网格时,我的脚本突然停止在所有浏览器中工作。

问题:为什么会发生这种情况,是否有简单的解决方法?您不能使用传统的 jQuery 和 Javascript 访问 Wijmo 单元吗?

部分 HTML 代码(此处没有 Widjmo 的完整代码和工作示例):

<table id="data-grid">
    <thead>
        <tr>
            <th>March</th>
            <th>April</th>
            <th>May</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" value="12000" /></td>
            <td><input type="text" value="1000" /></td>
            <td><input type="text" value="100000" /></td>
        </tr>

这是我当前的 jQuery 代码(此处没有 Widjmo 的完整代码和工作示例):

$(function() {
    // Initializes data grid as a Widjmo Grid (currently commented out)
    //$("#data-grid").wijgrid();

    // Array to store the initial values in grid
    var initialValues = [];

    // Assigns an index ID to each cell in the grid
    $('input').each(function(index) {
        initialValues[index] = $(this).val();
        $(this).data('id', index);
    });

    // Checks cell(s) for changes on blur (lose focus)
    $("input").blur(function() {
        var $t = parseInt($(this).val(), 10);
        var $s = parseInt(initialValues[$(this).data('id')], 10);

        // Value has changed
        if($t != $s) {
            var sign = "";
            if($t-$s > 0) {
                sign="+";
            }
            $(this).parent().children(".tooltip").remove();
            $(this).parent().append("<div class='tooltip'>Initial " + $s + "<br/>Change " + sign + ($t-$s) + "</div>");
        }

        // Value is no different from intial value
        if($t == $s) {
            $(this).removeClass("up down");
            $(this).parent().children(".tooltip").remove();
            $(this).parent().children(".up-indicator, .down-indicator").remove();
        }

        // Value is greater than initial
        else if($t > $s) {
            $(this).removeClass("up down");
            $(this).parent().children(".up-indicator, .down-indicator").remove();
            $(this).addClass("up");
            $(this).parent().append("<div class='up-indicator'></div>");
        }

        // Value is less than initial
        else if($t < $s) {
            $(this).removeClass("up down");
            $(this).parent().children(".up-indicator, .down-indicator").remove();
            $(this).addClass("down");
            $(this).parent().append("<div class='down-indicator'></div>");
        }

        // Conpute the net change
        netChange(initialValues);
    });

    // Displays tooltip of changed items
    $("input").hover(function() {
        $(this).parent().children(".tooltip").toggle();
    });

    // Computes the net change in the data grid
    function netChange(initialValues) {
        var runningTotal = 0;
        $('input').each(function() {
           runningTotal += parseInt($(this).val(), 10);
        });

        var intialTotal = 0;
        for (var i = 0; i < initialValues.length; i++) {
            intialTotal += parseInt(initialValues[i], 10);
        }

        var changes = $(".up, .down").length;

        $("#items").text(changes + " Items");
        $("#net").text("Net: " + (runningTotal - intialTotal));
    }
});
4

1 回答 1

1

Wijmo 插件代码$.browser.msie在他们的代码中使用,该代码在 jQuery 1.3 中已弃用,并在 jQuery 1.9 中完全删除。请参阅 jQuery 文档:http ://api.jquery.com/jQuery.browser/以下是粗体评论为什么它被删除。

我们建议不要使用此属性;请尝试改用特征检测(参见 jQuery.support)。jQuery.browser 可能会在 jQuery 的未来版本中移动到插件中。


jQuery 1.8在我选择早期版本的小提琴后,您的工具提示代码工作一次。

固定小提琴:http: //jsfiddle.net/Fgdec/13/


在您的小提琴中,您选择了没有 的 jQuery 1.9 $.browser.msie,因此它在 chrome 控制台中抛出了以下错误。

Uncaught TypeError: Cannot read property 'msie' of undefined jquery.wijmo-open.all.2.3.8.min.js:31
(anonymous function) jquery.wijmo-open.all.2.3.8.min.js:31
(anonymous function) jquery.wijmo-open.all.2.3.8.min.js:61
Uncaught TypeError: Cannot read property 'msie' of undefined jquery.wijmo-complete.all.2.3.8.min.js:34
(anonymous function) jquery.wijmo-complete.all.2.3.8.min.js:34
(anonymous function) jquery.wijmo-complete.all.2.3.8.min.js:34
于 2013-03-12T20:06:21.247 回答