如何将 w2ui 网格列宽初始化为内容？

如何解决如何将 w2ui 网格列宽初始化为内容？

$( document ).ready(function() {
    console.log( "ready!" );
    var records = [];
    var record1 = {
        recid: 1,strategy: "high/low",backtest: "v1",num_Trades: 273,num_winners: 70,num_losers: 203
    };
    records.push(record1);
    var record2 = Object.assign({},record1);
    record2['recid']=2;
    record2['backtest']="v2";
    records.push(record2);    
    addStrategiesTable(records);
});

function addStrategiesTable(records) {
     $('#grid2').w2grid({
        name: 'grid2',header: 'Strategies',sortData: [
            { field: 'strategy',direction: 'desc' },{ field: 'backtest',{ field: 'num_Trades',{ field: 'num_winners',],columns: [
            {
                field: 'strategy',caption: 'Strategy',size: '100px',sortable: true
            },{
                field: 'backtest',caption: 'Backtest',{
                field: 'num_Trades',caption: 'Num Trades',{
                field: 'num_winners',caption: 'Num Winners',{
                field: 'num_losers',caption: 'Num Losers',sortable: true
            }
        ],records: records
    });
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
<div id="grid2" style="height: 300px;"></div>

我有一个 w2ui 网格在初始化时没有表现。它有 20 列。当我刷新浏览器时，这是我看到的：

它只显示了 2 列和 1 行，加上表格标题只显示了一半，即使表格设置为几乎 100%。我可以看到表格的边框延伸到那个距离，但看不到内容。它确实显示的两列被挤压在一起。

如果我点击其中一个列标题，那么一切都会正确显示！

这是html：

   <div id="grid2" style="position:absolute; left:8px; right:8px; height: 400px;"></div>

网格列在javascript中设置如下：

columns: [
    {
        field: 'strategy',sortable: true
    },plus 19 more

有什么建议可以解决这个问题吗？

我试图创建一个显示问题的代码片段（上面），但它只显示了一个没有 w2ui 功能的准系统表。

解决方法

我按照通知做了

column.caption 属性已弃用，请使用 column.text 所以用文字替换标题

参考片段

$(document).ready(function () {
        console.log("ready!");
        var records = [];
        var record1 = {
            recid: 1,strategy: "high/low",backtest: "v1",num_trades: 273,num_winners: 70,num_losers: 203
        };
        records.push(record1);
        var record2 = Object.assign({},record1);
        record2['recid'] = 2;
        record2['backtest'] = "v2";
        records.push(record2);
        addStrategiesTable(records);
    });

    function addStrategiesTable(records) {
        $('#grid2').w2grid({
            name: 'grid2',header: 'Strategies',sortData: [
                { field: 'strategy',direction: 'desc' },{ field: 'backtest',{ field: 'num_trades',{ field: 'num_winners',],columns: [
                {
                    field: 'strategy',text: 'Strategy',size: '100px',sortable: true
                },{
                    field: 'backtest',text: 'Backtest',{
                    field: 'num_trades',text: 'Num Trades',{
                    field: 'num_winners',text: 'Num Winners',{
                    field: 'num_losers',text: 'Num Losers',sortable: true
                }
            ],records: records
        });
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
    <script src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
</head>

<body>
    <div id="grid2" style="height: 300px;"></div>
</body>
</html>

这是您的确切代码添加只有一个错误只需将您的链接添加到html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">

将其放入您的 html 文件中。

$( document ).ready(function() {
    console.log( "ready!" );
    var records = [];
    var record1 = {
        recid: 1,num_losers: 203
    };
    records.push(record1);
    var record2 = Object.assign({},record1);
    record2['recid']=2;
    record2['backtest']="v2";
    records.push(record2);    
    addStrategiesTable(records);
});

function addStrategiesTable(records) {
     $('#grid2').w2grid({
        name: 'grid2',sortData: [
            { field: 'strategy',columns: [
            {
                field: 'strategy',caption: 'Strategy',sortable: true
            },{
                field: 'backtest',caption: 'Backtest',{
                field: 'num_trades',caption: 'Num Trades',{
                field: 'num_winners',caption: 'Num Winners',{
                field: 'num_losers',caption: 'Num Losers',sortable: true
            }
        ],records: records
    });
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<script src="http://w2ui.com/src/w2ui-1.5.min.js"></script>
<div id="grid2" style="height: 300px;"></div>