当前位置： 文江博客话题详情

Flexigrid 不适用于 jQuery 1.4.3？

发布于 2024-10-19 07:00:54 字数 1902 浏览 1 评论 0原文

我正在尝试使用 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 错误。

有没有办法将 flexigid 与 jquery 1.4.3 一起使用？

原文

I am trying to use flexigrid plugin for jquery, the problem is that I also want to use the plugin fancybox, and this plugin uses jQuery 1.4.3, but flexigrid doesn't seem to work with that version of jquery.

When I roll back to the old jquery version that comes with flexigrid the grid does work but fancybox doesn't.

This is the code i am using:

        $("#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>

And the php response looks like this:

{
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']}]
}

I am using firebug and it doesn't show any js error.

Is there a way to use flexigid with jquery 1.4.3?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

ˇ宁静的妩媚 2024-10-26 07:00:54

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

Try rendering your JSON using double quotes, not single quotes.

回复 原文
生来就爱笑 2024-10-26 07:00:54

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

Both plugins seems to work with v1.3.2

回复 原文
行雁书 2024-10-26 07:00:54

我想我的两个插件都可以使用 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 已经指出的那样）。您可以通过在线解析器运行来查看错误。

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

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

注意：由于 同源策略安全限制。您可以在控制台中看到错误 Access-Control-Allow-Origin 不允许 Origin null。您将需要从适当的 Web 服务器提供示例页面和 JSON。

希望这有帮助。

I think I have both plugins working with jQuery 1.6.1. Obviously it depends on both flexigrid and fancybox jQuery plugins and an example JSON file that I have called flexigrid.json. If you download those plugins and make sure the src and href links to the correct locations for the JavaScript and CSS and create a file called flexigrid.json with the following content:

{
  "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]}]
}

Note: The JSON in your example is not valid (as @Josh pointed out already). You can run in through an online parser to see the errors.

Here is the example page with both plugins:

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

Note: This will not work locally when testing in Chrome 13 due to the Same origin policy security restriction. You can see the error in the console Origin null is not allowed by Access-Control-Allow-Origin. You will need to serve to the example page and JSON from a proper web server.

Hope this helps.

回复 原文
俯瞰星空 2024-10-26 07:00:54

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

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

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

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

I am working on the same issue. I found the below links helpful to get started.

Core issue - from groups.google.com
"As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently. Avoid frequent hand-editing of JSON data for this reason. JSON is a data-interchange format with syntax rules that are stricter than those of JavaScript's object literal notation. For example, all strings represented in JSON, whether they are properties or values, must be enclosed in double- quotes. For details on the JSON format, see http://json.org/.
Basically you have to be careful with your json now, and ensure its formatted correctly. I would guess its related to this. Check the json.org site and check your JSON to make sure its correct."

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

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

回复 原文
~没有更多了~

关于作者

征棹

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文