0
1 - 一个简单的表格，包含select（姑且称之为选择1）和它下面的一个道场数据网格。如何移动道场DataGrid中显示隐藏的控制后
2 - 当你改变选择1价值就会切换另一种选择的知名度，让我们把它选择2，位于选择1和DataGrid1中之间
3 - 当选择2出现，datagrid1不会为其腾出空间。我需要这样的发生
请注意：由于与arcgis.com的东西，有时该代码段不会在第一次点击运行。
谢谢
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/ResizeHandle.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/jquery-1.12.0.min.js">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
,
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var dojoConfig = {
parseOnLoad: true
}
require(
[
"dojo/parser",
'dijit/layout/BorderContainer',
"dojo/domReady!"
],
function(parser, BorderContainer) {
parser.parse();
var layout = [{
name: "f1",
field: "f1",
width: '165px',
noresize: 'true'
}, {
name: "f2",
field: "f2",
width: '125px',
noresize: 'true'
}, {
name: "id",
field: "id",
width: '40px',
noresize: 'true'
}, ];
initGrid(layout, "_myGrid", "myGrid", "id");
});
function initGrid(layout, gridId, divId, itemId) {
require(['dojo/data/ItemFileWriteStore', 'dojox/grid/DataGrid'], function(ItemFileWriteStore, DataGrid) {
var grid = new DataGrid({
id: gridId,
store: new ItemFileWriteStore({
data: {
items: []
}
}),
structure: layout,
rowSelector: '0px'
});
grid.placeAt(divId);
grid.startup();
});
}
function changeSelect() {
if (document.getElementById("secondaryTable").style.display == 'none') {
document.getElementById("secondaryTable").style.display = "block";
} else {
document.getElementById("secondaryTable").style.display = "none";
}
}
</script>
</head>
<body class="claro" style="font-family: Verdana; font-size: 11px;">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" style="width:30%;">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<table>
<tr>
<td>
<select onchange="changeSelect()">
<option value="op1" selected="selected">op1</option>
<option value="op2">op2</option>
</select>
</td>
</tr>
</table>
<div>
<table id="secondaryTable" style="display:none;">
<tr>
<td>xxxx</td>
<td>
<select></select>
</td>
</tr>
</table>
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<div id="myGrid" style="height:76%;"></div>
</div>
</div>
</div>
</div>
</body>
</html>
真棒人。谢谢 –