javascript - 如何在显示隐藏控件后移动 dojo 数据网格

1 - 一个简单的表单，包含一个选择(我们称之为 select1)和其下方的 dojo datagrid。

2 - 当您更改 select1 的值时，它会切换另一个选择的可见性，我们将其称为 select2，位于 select1 和数据网格1

3 - 当select2出现时，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>

最佳答案

您需要的是在更改内容高度后调整BorderContainer的大小。所以你需要调用borderContainer.resize();

<!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";
      }
      borderContainer.resize();
    }
  </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-id="borderContainer" 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>

关于javascript - 如何在显示隐藏控件后移动 dojo 数据网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36781335/

javascript - 如何在显示隐藏控件后移动 dojo 数据网格

上一篇：javascript - ajax 请求调用以错误结束

下一篇：javascript - 基本的 else if 和 return javascript