如何将现有的 w2ui 网格复制到 div？

问题描述

我有一个应用程序，其中包含大量（约 50 个）网格，每个网格具有不同的字段/列结构（因此它们无法合并）。用户浏览应用程序，将记录添加到字段，并编辑这些记录。导航使用侧边栏，每个侧边栏元素加载不同的网格。

所有这些网格都是在启动时构建的，使用 github 上的 w2ui starter。网格和表单在配置文件中定义。 main.js 调用这些文件来创建每个网格：

 import ABCconf from './ABC-conf.js'
 $().w2grid(ABCconf.ABC_grid)

在创建路由的同一个文件中，是点击相应侧边栏元素时加载网格的逻辑：

w2ui.app_layout.html('main',w2ui.ABC_grid)

重要说明 - 这会在“主”面板中加载单个网格。我想在摘要页面上加载所有记录长度 >0 的网格，这意味着它们都需要进入一个面板（假设它是“主”）。我假设我会使用一系列适当命名的 div 元素，例如 div id='ABC'。

此时我被困在将网格插入到 div 中。出于调试目的，我尝试过：

  // this works and puts text into div
  document.getElementById("ABC").innerHTML = `different data`; 

  // this puts '[object Object]' into div
  document.getElementById("ABC").innerHTML = w2ui.ABC_grid;

我知道如何使用 w2grid 构造函数来构建网格并填充 div，但不知道如何采用入门框架 + 现有网格并在同一面板中复制其中的许多网格。我已经仔细阅读了文档，但我就是不明白。

解决方法

您可以使用网格的 render 方法来更改呈现网格的容器。

在下面的代码中，我最初在 grid1 中创建网格，并通过单击按钮将容器更改为 grid2。

$(function () {
    $("#btn_grid_render").click(function(){
        w2ui.grid.render('#grid2')
    });

    $('#grid1').w2grid({ 
        name: 'grid',columns: [                
            { field: 'email',text: 'Email',size: '100%' },{ field: 'profit',text: 'Profit',size: '120px',render: 'money' },{ field: 'sdate',text: 'Start Date',render: 'date' }
        ],records: [
            { recid: 1,fname: 'John',lname: 'Doe',email: 'john@gmail.com',profit: 2500,sdate: '1/3/2012' },{ recid: 2,fname: 'Stuart',lname: 'Motzart',email: 'stuart@gmail.com',profit: 1004,sdate: '4/13/2012' },{ recid: 3,fname: 'Jin',lname: 'Franson',email: 'jin@gmail.com',profit: 473,sdate: '3/3/2012' },{ recid: 4,fname: 'Susan',lname: 'Ottie',email: 'susan@gmail.com',profit: 304,sdate: '5/3/2012' },{ recid: 5,fname: 'Kelly',lname: 'Silver',email: 'kelly@gmail.com',profit: 9300,sdate: '8/19/2012' },{ recid: 6,fname: 'Francis',lname: 'Gatos',email: 'francis@gmail.com',sdate: '6/12/2012' },{ recid: 7,fname: 'Mark',lname: 'Welldo',email: 'mark@gmail.com',profit: 3400,sdate: '8/13/2012' },{ recid: 8,fname: 'Thomas',lname: 'Bahh',email: 'thomas@gmail.com',profit: 2030,sdate: '4/31/2012' },{ recid: 10,profit: 13004,]
    });    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>

<button id="btn_grid_render">Render Grid to second div</button>
<div id="grid1" style="width: 100%; height: 200px; background: red"></div>
<div id="grid2" style="width: 100%; height: 200px; background: blue"></div>

小提琴：http://jsfiddle.net/zvbgf873/

javascript w2ui