问题描述
$( 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>