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

どちらのプラグインもv1.3.2で動作するようです

于 2011-02-25T03:50:32.587 に答える
0

両方のプラグインが jQuery 1.6.1 で動作していると思います。明らかに、flexigridとfancyboxの両方の jQuery プラグインと、私が呼び出した JSON ファイルの例に依存していますflexigrid.json。これらのプラグインをダウンロードし、とが JavaScript と CSS の正しい場所にリンクされていることを確認し、次の内容で呼び出されるファイルを作成するsrc場合:hrefflexigrid.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 に答える