父页面通过iframe记载子页面
子页面 通过 dhx.Layout 加载 dhx.Grid和 dhx.Toolbar
dhx.Toolbar 包括全屏按钮。
全屏按钮 事件 调用父页面 函数，用 dhx.Window 加载子页面的 dhx.Layout
dhx.Grid.events 在 dhx.Window 中 正确 加载
dhx.Toolbar.events 在 dhx.Window 中 丢失 加载
The parent page records the child pages through iframe
Subpages are accessed through dhx.Layout loads dhx.Grid and dhx.Toolbar
Dhx.Toolbar includes a full screen button.
The full screen button event calls the parent page function using dhx.Window loading subpage dhx Layout
Dhx.Grid.events loads correctly in dhx.Window
Dhx.Toolbar.events lost loading in dhx.Window
The parent page code is as follows:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
<script type="text/javascript" src="js/suite_gpl/codebase/suite.js"></script>
<link rel="stylesheet" href="js/suite_gpl/codebase/suite.css">
<link rel="stylesheet" href="js/suite_gpl/samples/common/index.css">
</head>
<body>
<div id="layout" style="height: calc(100% - 61px);"></div>
<script>
const layout = new dhx.Layout("layout", {
type: "line",
rows: [
{
resizable: true,
cols: [
{
id: "sidebar",
header: "Sidebar",
collapsable: true,
width: "200px",
resizable: true
},
{
id: "content",
header: "Content",
resizable: true,
html:'<iframe width="100%" height="99%" src="b.html" ></iframe>'
},
{
id: "rightbar",
header: "Aside",
collapsable: true,
width: "200px"
},
]
}
]
});
function full(ui){
const dhxWindow = new dhx.Window({
closable:false
});
dhxWindow.setFullScreen();
dhxWindow.attach(ui);
dhxWindow.show();
return dhxWindow;
}
</script>
</body>
</html>
The subpage code is as follows:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
<script type="text/javascript" src="js/suite_gpl/codebase/suite.js"></script>
<link rel="stylesheet" href="js/suite_gpl/codebase/suite.css">
<link rel="stylesheet" href="js/suite_gpl/samples/common/index.css">
<script src="js/suite_gpl/samples/grid/common/data.js"></script>
</head>
<body>
<div id="layout" style="height: 100%; width: 100%" ></div>
<script>
const layout = new dhx.Layout("layout", {
type: "none",
rows: [
{
id: "grid",
},
{
id: "footer",
height: "60px"
}
]
});
const grid = new dhx.Grid(null, {
columns: [
{ width: 150, id: "country", header: [{ text: "Country" }] },
{ width: 150, id: "population", header: [{ text: "Population" }] },
{ width: 150, id: "yearlyChange", header: [{ text: "Yearly Change" }] },
{ width: 150, id: "netChange", header: [{ text: "Net Change" }] },
{ width: 150, id: "destiny", header: [{ text: "Density (P/Km虏)" }] },
{ width: 150, id: "area", header: [{ text: "Land Area (Km虏)" }] },
{ width: 150, id: "migrants", header: [{ text: "Migrants (net)" }] },
{ width: 150, id: "fert", header: [{ text: "Fert. Rate" }] },
{ width: 150, id: "age", header: [{ text: "Med. Age" }] },
{ width: 150, id: "urban", header: [{ text: "Urban Pop" }] }
],
data: dataset
});
grid.events.on("cellClick", (row, column, event) => {
console.log("cellClick",row);
top.dhx.message({
text:"value:"+row[column.id],
expire:3000
});
});
layout.getCell("grid").attach(grid );
const toolbar = new dhx.Toolbar(null, {});
toolbar.data.add({id:"reset",value:"Reset"});
toolbar.data.add({id:"clear",value:"clear"});
toolbar.data.add({id:"full",value:"Full screen"});
layout.getCell("footer").attach(toolbar );
toolbar.events.on("click", function(id,e){
console.log("click",id);
if(id=='full'){
let dhxWindow;
if(e.target.innerText=="Full screen"){
toolbar.data.update("full", {value:"restore"});
dhxWindow=top.full(layout);
}else{
toolbar.data.update("full", {value:"Full screen"});
dhxWindow.hide();
}
}else if(id=="reset"){
grid.data.parse(dataset);
}else if(id=="clear"){
grid.data.removeAll();
}
});
</script>
</body>
</html>