网格显示为弹出窗口

时间:2016-02-13 09:14:49

标签: javascript jquery html json dojo

以下是网格:

 if (responseJSON) {
     showObjects(['anTable']);
     showObjects(['dist']);
     $('gridtab').innerHTML = '';
     var wordStructure = [{
         field: 'alpha',
         name: 'Alpa Dictionary',
         width: '200px'
     }, {
         field: 'numbers',
         name: 'Number Format',
         width: '200px'
     }, {
         field: 'words',
         name: 'Normal words',
         width: '200px'
     }];
     var wordStore = [];
 }

以下是Html表,它将显示为上面带有网格的弹出窗口:

<table cellpadding='15' cellspacing='15' id="dist" style="display: none; width:auto">
  <tr>
    <td>
      <div id="gridtab" style="width: 400%; font-size: 11pt; font-family: arial; border: 1px solid #fff; padding: 5px;"></div>
    </td>
  </tr>
  <tr>
    <td>
      <center>
        <button dojoType="dijit.form.Button" preventCache='true' useCache='false' cacheContent='false' onclick="getSelectedNormalWords();">Ok</button>
        <button dojoType="dijit.form.Button" preventCache='true' useCache='false' cacheContent='false'>Cancel</button>
      </center>
    </td>
  </tr>
</table>

showOjects(['dist'])只是用表格显示网格,但我想将其显示为弹出窗口。

function showObjects(objArray) {
    for ( var i = 0; i < objArray.length; i++) {
        $(objArray[i]).style.display = 'block';
    }
}

2 个答案:

答案 0 :(得分:0)

假设您实际上不需要打开新窗口,可以使用Dijit Dialog。基本思想是创建一个对话框并将对话框的内容设置为您的内容。假设您正在使用相当现代的Dojo版本,这可能看起来像(此代码未经测试):

function showTable(tableId) {
    // You wouldn't normally do a `require` in a handler function like 
    // this, but it should work in this case
    require([ 'dijit/Dialog' ], function (Dialog) {
        // Pull the table out of the DOM
        var table = document.getElementById('dist');
        table.parentNode.removeChild(table);

        // Set the table's display style to block so it will be visible
        // when it's re-inserted into the DOM
        table.style.display = 'block';

        // Create and show a new Dialog with the table as it's content
        var dlg = new Dialog({ content: table });
        dlg.show();
    });
}

答案 1 :(得分:0)

您可以查看以下链接,在第二个示例中,他们将表放在对话框中,然后单击它们显示对话框,其中包含内部表格。

https://dojotoolkit.org/reference-guide/1.8/dijit/Dialog.html