2013-03-23 73 views
0

裏面我在道場newbe,我只創建一個佈局的index.php有標籤的容器和標籤要求list.php的道場1.8網格選項卡

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

我要去移動從「你如何解決當前的問題」,並嘗試回答「你如何滿足您的要求」了。

要做到這一點,我假設你的網格內容最終將動態和按需交付。如果是這樣,請將所有網格構建代碼放入初始頁面加載中,然後使用xhrGet僅提取數據以填充數據對象(但請參閱後面的段落以節省不必要的代碼)。

數據應該從你的PHP代碼交付作爲一個JSON字符串化的對象(建立數組從PHP提供再使用json_encode(utf8_encode(data_array))

IIRC(它已經有一段時間),你應該只能夠通過URL作爲參數到服務網格,如果返回的數據是正確的格式,它應該加載,並自動顯示它的數據對象

看看 itemFileReadStore - dojotoolkit.org/reference-guide/1.8/dojo/data /ItemFileReadStore.html

你會處以一exsmpl使用網格大約在中途停下來。如果你的意圖是將數據發送回服務器,或者讓它在客戶端更改,你可能需要使用itemFileWriteSore。我個人一直習慣使用它,以防萬一我需要它。開銷很小。

如果你的代碼很可能要重新讀取數據網格在頁面加載後,則需要通過一對夫婦更跳火圈,但它仍然是相當容易的事情。

警告..我在想Zend 1.11,dojo 1.4這裏的術語......但是原理將會是一樣的......它的基本原理是dojo,所以我懷疑他們已經改變了對象數據存儲那麼多:)

+0

我想做一個後端。在未來,我需要一個負載從MySQL服務器保存,但現在還不是問題 我的問題是我怎麼能構建一個程序。我在這個後端有不同的部分來管理各種數據庫對象。這個對象有一個列表和帶有製表符的編輯元素表單。 我的想法是加載任何部分的文件,例如:contacts.php。在這個文件中,當我選擇這些元素之一時,我想將這些聯繫人列表的代碼和編輯一個元素的窗體放在一起。 這不是有效的方法嗎?你如何做到這一點?你知道一個網站來說明如何構建一個道場網站? – David 2013-03-23 16:51:51

+0

這是一個比原始程序範圍更廣泛的問題。我擔心我所做的一切都是通過做和改進我的技術來完成的,所以我對推薦教程網站沒有多大用處,但dojo文檔(http://dojotoolkit.org/documentation/)非常好,網站是充滿教程和例子。我建議你從那裏開始並向外工作。 – Radiotrib 2013-03-23 21:59:20

+0

David - 查看list.php - 從objectStore的定義開始。您可以使用本地生成的數據填充存儲區,但使用itemFileWriteStore時,可以指定一個URL而不是原始數據。對於測試,該網址可能只是一個包含由商店檢索的預定義json的文本文件。商店將通過調用url來獲取數據。在開發過程中,你可以通過調用一個能夠動態生成json的php文件來取代對json文件的調用......我希望這是有道理的,有時候我的解釋有點困惑。 – Radiotrib 2013-03-24 13:36:12