css - 样式化 w2ui 网格的最佳方式

Question

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

Answer 1

这是一个老问题，但仍然有些相关，因为这个库仍然被很多人使用。

我对此的解决方案是创建一个名为“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 2

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

但您也可以在许多元素（例如网格、列或记录）上使用“样式”公共属性。

请参阅此示例： jsfiddle 链接

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

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

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