Flexigrid 不适用于 jQuery 1.4.3？答案

【问题标题】：Flexigrid doesn't work with jQuery 1.4.3?Flexigrid 不适用于 jQuery 1.4.3？
【发布时间】：2011-02-25 03:41:36
【问题描述】：

我正在尝试为 jquery 使用 flexigrid 插件，问题是我也想使用插件 fancybox，并且这个插件使用 jQuery 1.4.3，但是 flexigrid 似乎不适用于该版本的 jquery。

当我回滚到 flexigrid 附带的旧 jquery 版本时，网格确实可以工作，但 fancybox 不能。

这是我正在使用的代码：

        $("#grid1").flexigrid
        (
        {
        url: 'php/get.php',
        dataType: 'json',
        colModel : [
            {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
            {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
            {display: 'Email', name : 'email', width : 120, sortable : true, align: 'left'},
            {display: 'tID', name : 'tid', width : 130, sortable : true, align: 'left'},
            {display: 'Active', name : 'numcode', width : 80, sortable : true, align: 'right'}
            ],
        buttons : [
            {name: 'Add', bclass: 'add', onpress : doAction},
            {separator: true},
            {name: 'Delete', bclass: 'delete', onpress : doAction},
            {separator: true},
            {name: 'Activate', bclass: 'activate', onpress : doAction},
            {separator: true},
            {name: 'Deactivate', bclass: 'deactivate', onpress : doAction},
            {separator: true}
            ],
        searchitems : [
            {display: 'Name', name : 'name', isdefault: true}
            ],
        sortname: "id",
        sortorder: "asc",
        usepager: true,
        title: 'XXX',
        useRp: true,
        rp: 15,
        showTableToggleBtn: true,
        width: 700,
        height: 200
        }
        );
</script>

php 响应如下所示：

{
page: 1,
total: 3,
rows: [
{id:'28',cell:['28','test','test','test','1']},
{id:'27',cell:['27','test','test','test','1']},
{id:'26',cell:['26','etrer','ter','trt','0']}]
}

我正在使用firebug，它没有显示任何js错误。

有没有办法在 jquery 1.4.3 中使用 flexigid？

【问题讨论】：

它给出了哪些错误，或者您是否发现了这一点？
如果你不能使用 jQuery，我会推荐 ExtJs 来解决你的问题

标签： javascript jquery jquery-plugins fancybox flexigrid

【解决方案1】：

尝试使用双引号而不是单引号来呈现您的 JSON。

【讨论】：

【解决方案2】：

这两个插件似乎都适用于 v1.3.2

【讨论】：

【解决方案3】：

我想我的两个插件都可以使用 jQuery 1.6.1。显然，它依赖于flexigrid 和fancybox jQuery 插件以及我称为flexigrid.json 的示例JSON 文件。如果您下载这些插件并确保 src 和 href 链接到 JavaScript 和 CSS 的正确位置，并创建一个名为 flexigrid.json 的文件，其内容如下：

{
  "page": 1,
  "total": 3,
  "rows": [
  {"id":28,"cell":[28,"test","test","test",1]},
  {"id":27,"cell":[27,"test","test","test",1]},
  {"id":26,"cell":[26,"etrer","ter","trt",0]}]
}

注意：您示例中的 JSON 无效（正如 @Josh 已经指出的那样）。您可以通过an online parser 运行以查看错误。

这是包含两个插件的示例页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script src="flexigrid/js/flexigrid.pack.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="flexigrid/css/flexigrid.pack.css"/>
    <script src="fancybox/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css"/>
    <script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
    <script type="text/javascript">
        $(function(){
            function doAction() {}

            $("#grid1").flexigrid({
                url: 'flexigrid.json',
                dataType: 'json',
                colModel : [
                    {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
                    {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
                    {display: 'Email', name : 'email', width : 120, sortable : true, align: 'left'},
                    {display: 'tID', name : 'tid', width : 130, sortable : true, align: 'left'},
                    {display: 'Active', name : 'numcode', width : 80, sortable : true, align: 'right'}
                    ],
                buttons : [
                    {name: 'Add', bclass: 'add', onpress : doAction},
                    {separator: true},
                    {name: 'Delete', bclass: 'delete', onpress : doAction},
                    {separator: true},
                    {name: 'Activate', bclass: 'activate', onpress : doAction},
                    {separator: true},
                    {name: 'Deactivate', bclass: 'deactivate', onpress : doAction},
                    {separator: true}
                    ],
                searchitems : [
                    {display: 'Name', name : 'name', isdefault: true}
                    ],
                sortname: "id",
                sortorder: "asc",
                usepager: true,
                title: 'XXX',
                useRp: true,
                rp: 15,
                showTableToggleBtn: true,
                width: 700,
                height: 200
            });

            $("a#example1").fancybox({
                'titleShow'     : false
            });

            $("a#example2").fancybox({
                'titleShow'     : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic',
                'easingIn'      : 'easeOutBack',
                'easingOut'     : 'easeInBack'
            });

            $("a#example3").fancybox({
                'titleShow'     : false,
                'transitionIn'  : 'none',
                'transitionOut' : 'none'
            });
        });
    </script>
</head>
<body>
<table id="grid1"><tr><td></td></tr></table>

<p>Different animations - 'fade', 'elastic' and 'none'<br />
    <a id="example1" href="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg">
        <img alt="example1" src="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026_m.jpg" />
    </a>
    <a id="example2" href="http://farm3.static.flickr.com/2489/4234944202_0fe7930011.jpg">
        <img alt="example2" src="http://farm3.static.flickr.com/2489/4234944202_0fe7930011_m.jpg" />
    </a>
    <a id="example3" href="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg">
        <img alt="example3" src="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a_m.jpg" />
    </a>
</p>
</body>
</html>

注意：由于Same origin policy 安全限制，在 Chrome 13 中进行测试时，这将无法在本地运行。您可以在控制台中看到错误 Access-Control-Allow-Origin 不允许使用 Origin null。您需要从适当的 Web 服务器向示例页面和 JSON 提供服务。

希望这会有所帮助。

【讨论】：

【解决方案4】：

我正在处理同样的问题。我发现以下链接有助于入门。

核心问题 - 来自 groups.google.com
“从 jQuery 1.4 开始，如果 JSON 文件包含语法错误，请求通常会静默失败。因此，请避免频繁手动编辑 JSON 数据。JSON 是一种数据交换格式，其语法规则比JavaScript 的对象字面量表示法。例如，JSON 中表示的所有字符串，无论是属性还是值，都必须用双引号括起来。有关 JSON 格式的详细信息，请参阅http://json.org/。基本上你现在必须小心你的 json，并确保它的格式正确。我猜它与此有关。检查 json.org 站点并检查您的 JSON 以确保其正确。”

http://simonwillison.net/2006/oct/11/json/

http://jsonformatter.curiousconcept.com/#jsonformatter

【讨论】：