裏面我在道場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?
我想做一個後端。在未來,我需要一個負載從MySQL服務器保存,但現在還不是問題 我的問題是我怎麼能構建一個程序。我在這個後端有不同的部分來管理各種數據庫對象。這個對象有一個列表和帶有製表符的編輯元素表單。 我的想法是加載任何部分的文件,例如:contacts.php。在這個文件中,當我選擇這些元素之一時,我想將這些聯繫人列表的代碼和編輯一個元素的窗體放在一起。 這不是有效的方法嗎?你如何做到這一點?你知道一個網站來說明如何構建一個道場網站? – David 2013-03-23 16:51:51
這是一個比原始程序範圍更廣泛的問題。我擔心我所做的一切都是通過做和改進我的技術來完成的,所以我對推薦教程網站沒有多大用處,但dojo文檔(http://dojotoolkit.org/documentation/)非常好,網站是充滿教程和例子。我建議你從那裏開始並向外工作。 – Radiotrib 2013-03-23 21:59:20
David - 查看list.php - 從objectStore的定義開始。您可以使用本地生成的數據填充存儲區,但使用itemFileWriteStore時,可以指定一個URL而不是原始數據。對於測試,該網址可能只是一個包含由商店檢索的預定義json的文本文件。商店將通過調用url來獲取數據。在開發過程中,你可以通過調用一個能夠動態生成json的php文件來取代對json文件的調用......我希望這是有道理的,有時候我的解釋有點困惑。 – Radiotrib 2013-03-24 13:36:12