0

我有一个简单DataTable()的金色布局容器：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>

<script type="text/javascript" src="../../static/js/jq.min.js"></script>
<script type="text/javascript" src="../../static/js/gl.min.js"></script>
<script type="text/javascript" src="../../static/js/dt.js"></script>

<link type="text/css" rel="stylesheet" href="../../static/css/gl-base.css" />
<link type="text/css" rel="stylesheet" href="../../static/css/gl-dark-theme.css" />
<link rel="stylesheet" type="text/css" href="../../static/css/dt.css"/>
<link rel="stylesheet" type="text/css" href="../../static/css/dt-custom.css"/>

</head>
<body>
    <script>
     function getTable() {
         return "<table id=\"testTable\" class=\"testTable\" cellspacing=\"0\">\n" +
        "        <thead>\n" +
        "            <tr>\n" +
        "                <th>Name</th>\n" +
        "                <th>Position</th>\n" +
        "                <th>Office</th>\n" +
        "                <th>Age</th>\n" +
        "                <th>Start date</th>\n" +
        "                <th>Salary</th>\n" +
        "            </tr>\n" +
        "        </thead>\n" +
        "        <tbody>\n" +
        "            <tr>\n" +
        "                <td>Tiger Nixon</td>\n" +
        "                <td>System Architect</td>\n" +
        "                <td>Edinburgh</td>\n" +
        "                <td>61</td>\n" +
        "                <td>2011/04/25</td>\n" +
        "                <td>$320,800</td>\n" +
        "            </tr>\n" +
        "            <tr>\n" +
        "                <td>Garrett Winters</td>\n" +
        "                <td>Accountant</td>\n" +
        "                <td>Tokyo</td>\n" +
        "                <td>63</td>\n" +
        "                <td>2011/07/25</td>\n" +
        "                <td>$170,750</td>\n" +
        "            </tr>\n" +
        "            <tr>\n" +
        "                <td>Ashton Cox</td>\n" +
        "                <td>Junior Technical Author</td>\n" +
        "                <td>San Francisco</td>\n" +
        "                <td>66</td>\n" +
        "                <td>2009/01/12</td>\n" +
        "                <td>$86,000</td>\n" +
        "            </tr>\n" +
        "        </tbody>\n" +
        "    </table>"
}

var config = {
   content: [{
        type: 'row',
        content: [
           {
            type:'component',
            componentName: 'testComponent'
           }]
        }]
   };

var myLayout = new GoldenLayout( config );

myLayout.registerComponent( 'testComponent', function(container, state){
        container.getElement().append(getTable());
});

myLayout.init();</script>



<script type="text/javascript">

$(document).ready(function() {
    $('#testTable').DataTable();
} );

</script>

</body>
</html>

在浏览器中打开表格时，表格会正确显示DataTable()样式，但是当我弹出寡妇时，表格会丢失所有样式并恢复为基本 HTML。

通过阅读 GL 文档，我认为我需要订阅新的 GL 弹出容器上的 open 事件并在table.DataTable()那里调用，但是因为我刚刚学习 JavaScript 和 jQuery 等。我不确定我会在哪里做这个？

4

1 回答 1

1

这是因为当 Golden Layout 弹出一个新窗口时，它不会将您当前的组件复制到新窗口，而是创建一个具有相同状态的全新组件。这意味着重新构建组件时，DataTables 的附件将丢失。有关更多信息，请参阅以下列表（它没有多大帮助，但确实给出了解释）： 使用弹出窗口

要按照您的意愿完成这项工作，您需要做两件事：

首先：在您的配置设置中启用popoutWholeStack

var config = {
"settings": {
    "popoutWholeStack": true,
},
content: [{
    type: 'row',
    content: [
       {
        type:'component',
        componentName: 'testComponent'
       }]
    }]
};

第二：添加stateChanged处理程序并重新附加到 DataTables。把它放在你的 init() 调用之前。

myLayout.on('stateChanged', () => {
    $('#testTable').DataTable();
});

myLayout.init();
于 2018-03-19T18:18:21.833 回答