1

我正在尝试为 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？

4

4 回答 4

1

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

于 2011-03-09T21:25:14.220 回答
0

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

核心问题 - 来自 groups.google.com
“从 jQuery 1.4 开始，如果 JSON 文件包含语法错误，请求通常会静默失败。因此，请避免频繁手动编辑 JSON 数据。JSON 是一种数据交换格式语法规则比 JavaScript 的对象字面量表示法更严格。例如，JSON 中表示的所有字符串，无论是属性还是值，都必须用双引号括起来。有关 JSON 格式的详细信息，请参见http:// " _

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

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

于 2011-11-17T07:27:22.567 回答
0

我想我的两个插件都可以使用 jQuery 1.6.1。显然，它依赖于flexigrid和fancybox jQuery 插件以及我调用的示例 JSON 文件flexigrid.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 已经指出的那样）。您可以通过在线解析器运行以查看错误。

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

<!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>

注意：由于同源策略安全限制，在 Chrome 13 中进行测试时，这将无法在本地工作。您可以在控制台中看到错误Origin null is not allowed by Access-Control-Allow-Origin。您需要从适当的 Web 服务器向示例页面和 JSON 提供服务。

希望这可以帮助。

于 2011-05-31T22:30:20.027 回答
0

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

于 2011-02-25T03:50:32.587 回答