Question

我一直在使用w2ui网格在表格中显示信息。它工作得很好，但我并不特别喜欢桌子的样子。所以我期待它的风格。有没有办法在没有直接编辑w2ui的CSS的情况下设置表的样式？

Answer 1

正如TheUknown所提到的，我认为简单编写更方便正如TheUknown所提到的，我相信简单地编写你的css规则会更方便。

但你也可以使用＆＃39; style＆＃39;许多元素的共同属性，例如网格，列或记录。

$('#myGrid').w2grid({ 
    name   : 'myGrid', 
    columns: [                
        { field: 'fname', caption: 'First Name', size: '30%', style : 'border: 1px solid blue' },
        { field: 'lname', caption: 'Last Name', size: '30%', style : 'font-weight: bold' },
        { field: 'email', caption: 'Email', size: '40%' },
        { field: 'sdate', caption: 'Start Date', size: '120px' },
    ],
    records: [
        { recid: 1, fname: 'John', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012', style : 'border: 1px solid green' },
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
    ],
    style : 'border: 1px solid red'
});

Answer 2

这是一个古老的问题，但仍然有一定意义，因为该库仍被许多人使用。

对此，我的解决方案是创建一个单独的样式表“ w2ui-overrides.css”，然后覆盖提供的w2ui样式表中定义的类。

例如，侧边栏上下文菜单的默认边框样式为

.w2ui-overlay > div {
  border-radius: 4px;
  position: relative;
  border: 3px solid #777777;
}

但是我对此并不在意，因此我将其添加到了替代CSS：

.w2ui-overlay > div {
    border-radius: 2px;
    border: 1px solid #777;
}

依次类推，对于所有我想更改的样式。我使用Chrome开发者工具查找需要覆盖的类名和选择器。

Answer 3

您可以添加课程onRender event或onRefresh event。这适用于w2ui小部件：布局，网格，工具栏，侧边栏，标签，表单。

$('#myGrid').w2grid({ 
  name   : 'myGrid', 
  columns: [                
    { ... },
  ],
  records: [
    { ... }
  ],
  onRender: function(event) {
    event.onComplete = function() {
      $('[name="myGrid"]').addClass('grid-custom');
    }
  },
});

风格w2ui网格的最佳方式

3 个答案: