标签内的Dojo 1.8网格

时间:2013-03-23 14:40:45

标签: javascript dojo dojox.grid.datagrid dojox.grid

我是Dojo中的新手,我只是创建了一个带有标签容器的布局 index.php ,并且选项卡调用 list.php

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Demo: Progammatic Layout</title>

        <link rel="stylesheet" href="style.css" media="screen">
        <link rel="stylesheet" href="js/dijit/themes/claro/claro.css" media="screen">
                 <link rel="stylesheet" href="js/dojox/grid/resources/claroGrid.css" media="screen">
    </head>
    <body class="claro">
        <div id="appLayout" class="demoLayout"></div>
        <!-- load dojo and provide config via data attribute -->
        <script src="js/dojo/dojo.js"></script>
        <script>
            require(["dijit/layout/BorderContainer", 
                 "dijit/layout/TabContainer", 
                 "dijit/layout/ContentPane", 
                 "dijit/layout/AccordionContainer",
                 "dijit/layout/AccordionPane",
                 "dojox/grid/DataGrid",
                 "dojox/grid/cells",
                 "dojo/ready", 

                 ],
            function(BorderContainer, TabContainer,ContentPane, AccordionContainer, AccordionPane, DataGrid, gridCells, ready){
                ready(function(){
                    // create the BorderContainer and attach it to our appLayout div
                    var appLayout = new BorderContainer({
                        design: "headline"
                    }, "appLayout");


                    // create the TabContainer
                    var contentTabs = new TabContainer({
                        region: "center",
                        id: "contentTabs",
                        tabPosition: "bottom",
                        "class": "centerPanel"
                    });

                    // add the TabContainer as a child of the BorderContainer
                    appLayout.addChild( contentTabs );

                    // create and add the BorderContainer edge regions
                    var header= new ContentPane({
                        region: "top",
                        "class": "edgePanel",
                        content: "Header content (top)",
                        splitter: true
                    });



                    /* Menú */
                    var contentMenu = new ContentPane({
                        region: "left",
                        id: "leftCol", 
                        "class": "edgePanel",
                        content: "",
                        padding:0,
                        splitter: true
                    });

                    var aContainer=new AccordionContainer({style:"height: 300px"}, "markup");
                        aContainer.addChild(new ContentPane({
                            title: "Contact",
                            content: "Hi!"
                        }));
                        aContainer.addChild(new ContentPane({
                            title:"Work",
                            content:"Hi how are you?"
                        }));
                    contentMenu.addChild(aContainer);



                    **var tabs=new ContentPane({
                        href: "list.php",
                        title: "Lista"
                    });**
                    contentTabs.addChild(tabs);



                    appLayout.addChild(header);
                    appLayout.addChild(contentMenu);

                    appLayout.addChild(contentTabs);






                      //aContainer.startup();
                    /*contentAcordion= new AccordionContainer({
                        min-size:20,
                        region:'leading,
                        splitter:true,
                        id:'leftAccordion'
                    });*/

                    // start up and do layout
                    appLayout.startup();










                    var cells = [
                      [
                        new gridCells.RowIndex({ width: "10%" }),
                        { name: "Column 1", field: "col1", width: "30%" },
                        { name: "Column 2", field: "col2", width: "30%" },
                        { name: "Column 3", field: "col3", width: "30%" }
                      ]
                    ];

                    gridLayout = [{
                            type: "dojox.grid._CheckBoxSelector"
                        }, 
                        cells
                    ];

                    var data = [
                        { id: 0, col1: "normal", col2: false, col3: "new", col4: "But are not followed by two hexadecimal"},
                        { id: 1, col1: "important", col2: false, col3: "new", col4: "Because a % sign always indicates"},
                        { id: 2, col1: "important", col2: false, col3: "read", col4: "Signs can be selectively"},
                        { id: 3, col1: "note", col2: false, col3: "read", col4: "However the reserved characters"},
                        { id: 4, col1: "normal", col2: false, col3: "replied", col4: "It is therefore necessary"},
                        { id: 5, col1: "important", col2: false, col3: "replied", col4: "To problems of corruption by"},
                        { id: 6, col1: "note", col2: false, col3: "replied", col4: "Which would simply be awkward in"}
                    ];

                    var grid = new DataGrid({
                    //store: test_store,
                    structure: cells,
                    rowSelector: "20px",
                    "class": "grid"
                    }, "grid");
                    grid.startup();
                });
            });
        </script>
    </body>
</html>

它成功运行,并加载list.php。

在list.php中我有一个用于创建网格的代码,如果我单独执行它可以工作并成功显示网格:

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Demo: Progammatic Layout</title>

        <link rel="stylesheet" href="style.css" media="screen">
        <link rel="stylesheet" href="js/dijit/themes/claro/claro.css" media="screen">
                 <link rel="stylesheet" href="js/dojox/grid/resources/claroGrid.css" media="screen">
    </head>
    <body class="claro">
        <div id="grid" class="demoLayout"></div>

        <!-- load dojo and provide config via data attribute -->
        <script src="js/dojo/dojo.js"></script>
        <script>
            require([
                "dojox/grid/DataGrid",
                "dojox/grid/cells",
                "dojo/store/Memory",
                "dojo/data/ObjectStore",
                "dojo/_base/array",
                "dojo/_base/lang",
                "dojox/grid/_CheckBoxSelector",
                "dojo/domReady!"
            ], function(DataGrid, gridCells, Memory, ObjectStore, baseArray, lang, _CheckBoxSelector){
                var cells = [
                    [
                        new gridCells.RowIndex({ width: "10%" }),
                        { name: "Column 1", field: "col1", width: "30%" },
                        { name: "Column 2", field: "col2", width: "30%" },
                        { name: "Column 3", field: "col3", width: "30%" }
                    ],[
                        { name: "Column 4", field: "col4", colSpan: 4 }
                    ]
                ];

                gridLayout = [{
                    // First, our view using the _CheckBoxSelector custom type
                        type: "dojox.grid._CheckBoxSelector"
                    }, 
                    cells
                ];

                var data = [
                    { id: 0, col1: "normal", col2: false, col3: "new", col4: "But are not followed by two hexadecimal"},
                    { id: 1, col1: "important", col2: false, col3: "new", col4: "Because a % sign always indicates"},
                    { id: 2, col1: "important", col2: false, col3: "read", col4: "Signs can be selectively"},
                    { id: 3, col1: "note", col2: false, col3: "read", col4: "However the reserved characters"},
                    { id: 4, col1: "normal", col2: false, col3: "replied", col4: "It is therefore necessary"},
                    { id: 5, col1: "important", col2: false, col3: "replied", col4: "To problems of corruption by"},
                    { id: 6, col1: "note", col2: false, col3: "replied", col4: "Which would simply be awkward in"}
                ];

                var objectStore = new Memory({data:data});

                var test_store = new ObjectStore({objectStore: objectStore});

                // create the grids.
                var grid = new DataGrid({
                    store: test_store,
                    structure: cells,
                    rowSelector: "20px",
                    "class": "grid"
                }, "grid");
                grid.startup();

            });
        </script>
    </body>
</html>

但是如果我调用index.php网格没有显示,我该怎么办呢?为什么是原因,不是没有javascript执行?

1 个答案:

答案 0 :(得分:1)

我将放弃“你如何解决当前问题”并尝试回答'你如何满足你的要求'。

为此,我假设您的网格内容最终将是动态的并按需提供。如果是这种情况,请将所有网格构建代码放入初始页面加载中,并使用xhrGet仅获取数据以填充数据对象(但请参阅后面的段落以节省不必要的编码)。

数据应作为json字符串化对象从您的php代码传递(构建数组以从php传递然后使用json_encode(utf8_encode(data_array))

IIRC(已经有一段时间了)您应该只能将url作为参数传递给为网格提供服务的数据对象,如果返回数据的格式正确,则应自动加载并显示它。 / p> 看看 itemFileReadStore - dojotoolkit.org/reference-guide/1.8/dojo/data/ItemFileReadStore.html

你可以使用网格对页面中间的一个例子做好准备。如果您打算将数据发送回服务器,或者允许在客户端更改数据,则可能需要使用itemFileWriteSore。我个人经常习惯使用它,以防我需要它。开销很小。

如果您的代码在页面加载后可能需要重新读取网格化数据,那么您需要跳过几个环节,但这仍然相当容易。

警告..我正在考虑Zend 1.11,dojo 1.4术语......但原则将是相同的...它是dojo的基础所以我怀疑他们已经改变了很多对象数据存储: )