设置w2ui网格样式的最佳方法

Question

我一直在使用w2ui网格在表格中显示信息。它工作得很好，但我并不是特别喜欢这个表的样子。所以我想把它做个造型。有没有一种方法可以在不直接编辑w2ui的css的情况下设置表格的样式？

Answer 1

正如TheUknown提到的，我相信像TheUknown提到的那样简单地编写会更方便，我也相信简单地编写你的css规则会更方便。

但你也可以在许多元素上使用'style‘公共属性，比如你的网格、列或记录。

请参阅此示例：jsfiddle link

$('#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

您可以添加类onRender event或onRefresh event。这适用于w2ui小部件:布局、网格、工具栏、侧边栏、选项卡、表单。

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

Answer 3

这是一个老问题，但仍然有一定的相关性，因为这个库仍然有很多人在使用。

我的解决方案是创建一个名为" 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开发人员工具来查找需要覆盖的类名和选择器。