表格

基础样式

基础表格样式。

部门	组别	编号	组员人数
技术部	UI设计组	宁宁	6
技术部	UI设计组	宁宁	6
技术部	UI设计组	宁宁	6

<table class="table-normal">
    <thead>
      <tr>
        <th>部门</th>
        <th>组别</th>
        <th>编号</th>
        <th>组员人数</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>技术部</td>
        <td>UI设计组</td>
        <td>宁宁</td>
        <td>6</td>
      </tr>
      <tr>
        <td>技术部</td>
        <td>UI设计组</td>
        <td>宁宁</td>
        <td>6</td>
      </tr>
      <tr>
        <td>技术部</td>
        <td>UI设计组</td>
        <td>宁宁</td>
        <td>6</td>
      </tr>
    </tbody>
</table>

极简线条风格表格

可选择表头背景颜色

样式

部门	组别	编号	组员人数
技术部	UI设计组	宁宁	6
技术部	UI设计组	宁宁	6
技术部	UI设计组	宁宁	6

<table class="table-simple-red">
  <thead>
    <tr>
      <th >部门</th>
      <th >组别</th>
      <th >编号</th>
      <th >组员人数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>技术部</td>
      <td>UI设计组</td>
      <td>宁宁</td>
      <td>6</td>
    </tr>
    <tr>
      <td>技术部</td>
      <td>UI设计组</td>
      <td>宁宁</td>
      <td>6</td>
    </tr>
    <tr>
      <td>技术部</td>
      <td>UI设计组</td>
      <td>宁宁</td>
      <td>6</td>
    </tr>
  </tbody>
</table>

表头颜色选择

红色

部门	组别	编号	组员人数

蓝色

部门	组别	编号	组员人数

蓝黑色

部门	组别	编号	组员人数

橙色

部门	组别	编号	组员人数

红色
  <table class="table-simple-red">
    <thead>
      <tr>
        <th >部门</th>
        <th >组别</th>
        <th >编号</th>
        <th >组员人数</th>
      </tr>
    </thead>
  </table>
蓝色
  <table class="table-simple-blue">
    <thead>
      <tr>
        <th >部门</th>
        <th >组别</th>
        <th >编号</th>
        <th >组员人数</th>
      </tr>
    </thead>
  </table>
蓝黑色
 <table class="table-simple-blueblack">
   <thead>
     <tr>
       <th >部门</th>
       <th >组别</th>
       <th >编号</th>
       <th >组员人数</th>
     </tr>
   </thead>
 </table>
橙色
  <table class="table-simple-orange">
    <thead>
      <tr>
        <th >部门</th>
        <th >组别</th>
        <th >编号</th>
        <th >组员人数</th>
      </tr>
    </thead>
  </table>

可操作性表格

引入checkbox和button组件

时间	部门	姓名	年龄	分数
2017-09-09	设计组	宁宁	30	5632
2017-09-09	设计组	健健	26	4254
2017-09-09	设计组	洋洋	22	3164

1
2
3

.top{
    vertical-align: top;
}

<table class="table-normal">
  <thead>
      <tr>
          <th>
              <span class="top" id="J_CheckboxAll" data-size="small"></span>时间
          </th>
          <th>部门</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>分数</th>
          <th>操作</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>
              <span class="top J_CheckboxGroup" data-name="user" data-value="1" data-size="small"></span>2017-09-09
          </td>
          <td>设计组</td>
          <td>宁宁</td>
          <td>30</td>
          <td>5632</td>
          <td>
              <button class="woui-btn woui-btn-blue woui-btn-mini">查看</button>&nbsp;&nbsp;<button class="woui-btn woui-btn-red woui-btn-mini">删除</button>
          </td>
      </tr>
      <tr>
          <td>
              <span class="top J_CheckboxGroup" data-name="user" data-value="2" data-size="small"></span>2017-09-09
          </td>
          <td>设计组</td>
          <td>健健</td>
          <td>26</td>
          <td>4254</td>
          <td>
              <button class="woui-btn woui-btn-blue woui-btn-mini">查看</button>&nbsp;&nbsp;<button class="woui-btn woui-btn-red woui-btn-mini">删除</button>
          </td>
      </tr>
      <tr>
          <td>
              <span class="top J_CheckboxGroup" data-name="user" data-value="3" data-size="small"></span>2017-09-09
          </td>
          <td>设计组</td>
          <td>洋洋</td>
          <td>22</td>
          <td>3164</td>
          <td>
              <button class="woui-btn woui-btn-blue woui-btn-mini">查看</button>&nbsp;&nbsp;<button class="woui-btn woui-btn-red woui-btn-mini">删除</button>
          </td>
      </tr>
  </tbody>
</table>

var checkboxAll = new woUI.Checkbox('#J_CheckboxAll')
var checkboxGroup = new woUI.CheckboxGroup('.J_CheckboxGroup')
checkboxAll.on(function(status) {
    checkboxGroup.changeByChecked('user', status.checked, true)
})
checkboxGroup.on('user', function(data){
    var allData = [1, 2, 3]
    checkboxAll.change(data.value.join(',') === allData.join(','), true)
})

表格