Javascript Dojo 1.8网格内部选项卡
我是Dojo的新手，我只是创建了一个布局index.php，带有选项卡容器和一个选项卡调用list.php：Javascript Dojo 1.8网格内部选项卡,javascript,dojo,dojox.grid.datagrid,dojox.grid,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" h
<!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>
演示：程序布局
需要（[“dijit/layout/BorderContainer”，
“dijit/layout/TabContainer”，
“dijit/layout/ContentPane”，
“dijit/layout/AccordionContainer”，
“dijit/layout/AccordionPane”，
“dojox/grid/DataGrid”，
“dojox/grid/cells”，
“dojo/ready”，
],
函数（BorderContainer、TabContainer、ContentPane、AccordionContainer、AccordionPane、DataGrid、gridCells、ready）{
就绪（函数（）{
//创建BorderContainer并将其附加到appLayout div
var appLayout=newbordercontainer({
设计：“标题”
}，即“应用程序”）；
//创建选项卡容器
var contentTabs=new TabContainer({
地区：“中心”，
id:“内容选项卡”，
标签位置：“底部”，
“类别”：“中心面板”
});
//将TabContainer添加为BorderContainer的子级
addChild（contentTabs）；
//创建并添加边界容器边缘区域
var header=newcontentpane({
地区：“顶级”，
“类”：“edgePanel”，
内容：“标题内容（顶部）”，
拆分器：对
});
/*门努*/
var contentMenu=新建ContentPane({
区域：“左”，
id:“leftCol”，
“类”：“edgePanel”，
内容：“，
填充：0，
拆分器：对
});
var aContainer=newacordioncontainer（{style:“height:300px”}，“markup”）；
aContainer.addChild（新内容窗格({
标题：“联系人”，
内容：“嗨！”
}));
aContainer.addChild（新内容窗格({
标题：“工作”，
内容：“嗨，你好吗？”
}));
contentMenu.addChild（一个容器）；
**var tabs=新内容窗格({
href:“list.php”，
标题：“Lista”
});**
contentTabs.addChild（tabs）；
appLayout.addChild（标题）；
addChild（contentMenu）；
addChild（contentTabs）；
//aContainer.startup（）；
/*contentAcordion=新的AccordionContainer({
最小尺寸：20，
地区:"领先,，
斯普利特：没错，
id:“左手风琴”
});*/
//启动并进行布局
appLayout.startup（）；
变量单元格=[
[
新的gridCells.RowIndex（{width:“10%”}），
{名称：“第1列”，字段：“col1”，宽度：“30%”，
{名称：“第2列”，字段：“col2”，宽度：“30%”，
{名称：“第3列”，字段：“col3”，宽度：“30%”
]
];
网格布局=[{
类型：“dojox.grid.\u CheckBoxSelector”
},
细胞
];
风险值数据=[
{id:0，col1:“正常”，col2:false，col3:“新”，col4:“但后面不跟两个十六进制”}，
{id:1，col1:“重要”，col2:false，col3:“新”，col4:“因为%符号总是表示”}，
{id:2，col1:“重要”，col2:false，col3:“阅读”，col4:“符号可以选择性”}，
{id:3，col1:“note”，col2:false，col3:“read”，col4:“However the reserved characters”}，
{id:4，col1:“正常”，col2:false，col3:“回复”，col4:“因此是必要的”}，
{id:5，col1:“重要”，col2:false，col3:“答复”，col4:“对腐败问题的答复”}，
{id:6，col1:“note”，col2:false，col3:“responsed”，col4:“在”}
];
var grid=新的数据网格({
//存储：测试存储，
结构：细胞，
行选择器：“20px”，
“类”：“网格”
}“网格”）；
grid.startup（）；
});
});
<!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>
演示：程序布局
要求([
“dojox/grid/DataGrid”，
“dojox/grid/cells”，
“dojo/store/Memory”，
“dojo/data/ObjectStore”，
“dojo/_基/阵列”，
“dojo/_base/lang”，
“dojox/grid/_CheckBoxSelector”，
“dojo/domReady！”
]，函数（DataGrid、gridCells、内存、ObjectStore、baseArray、lang、_CheckBoxSelector）{
变量单元格=[