WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
表格 - 页面元素

本篇为你介绍表格的HTML使用,你将通过内置的自定义属性对其进行风格的多样化设定。请注意:这仅仅局限于呈现基础表格,如果你急切需要的是数据表格(datatable),那么你应该详细阅读:table模块
昵称 加入时间 签名
张三 2016-11-29 人生就像是一场修行
李四 2016-11-28 于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…
王五 2016-11-27 Life is either a daring adventure or nothing.
<table class="wui-table">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>昵称</th>
        <th>加入时间</th>
        <th>签名</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>2016-11-29</td>
        <td>人生就像是一场修行</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>2016-11-28</td>
        <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>2016-11-27</td>
        <td> Life is either a daring adventure or nothing.</td>
    </tr>
    </tbody>
</table>
静态表格支持以下基础属性,可定义不同风格/尺寸的表格样式:
属性名 属性值 备注
even 用于开启 隔行 背景,可与其它属性一起使用
skin="属性值" line (行边框风格)
row (列边框风格)
nob (无边框风格)
若使用默认风格不设置该属性即可
size="属性值" sm (小尺寸)
lg (大尺寸)
若使用默认尺寸不设置该属性即可
将你所需要的基础属性写在table标签上即可,如(一个带有隔行背景,且行边框风格的大尺寸表格):
<table even skin="line" size="lg">
…
</table>
除了默认的表格风格外,我们还提供了其它几种风格,你可以按照实际需求自由设定
昵称 加入时间 签名
张三 2016-11-29 人生就像是一场修行
李四 2016-11-28 于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…
王五 2016-11-27 Life is either a daring adventure or nothing.
昵称 加入时间 签名
张三 2016-11-29 人生就像是一场修行
李四 2016-11-28 于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…
王五 2016-11-27 Life is either a daring adventure or nothing.
昵称 加入时间 签名
张三 2016-11-29 人生就像是一场修行
李四 2016-11-28 于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…
王五 2016-11-27 Life is either a daring adventure or nothing.
<table class="wui-table" skin="line">
  行边框表格(内部结构参见右侧目录“常规用法”)
</table>

<table class="wui-table" skin="row">
  列边框表格(内部结构参见右侧目录“常规用法”)
</table>

<table class="wui-table" even skin="nob">
  无边框表格(内部结构参见右侧目录“常规用法”)
</table>
除了默认的表格尺寸外,我们还提供了其它几种尺寸,你可以按照实际需求自由设定
昵称 加入时间 签名
张三 2016-11-29 人生就像是一场修行
李四 2016-11-28 于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…
王五 2016-11-27 Life is either a daring adventure or nothing.
昵称 加入时间 签名
张三 2016-11-29 人生就像是一场修行
李四 2016-11-28 于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…
王五 2016-11-27 Life is either a daring adventure or nothing.
<table class="wui-table" size="sm">
  行边框表格(内部结构参见右侧目录“常规用法”)
</table>

<table class="wui-table" size="lg">
  列边框表格(内部结构参见右侧目录“常规用法”)
</table>
再次温馨提醒:如果你需要对表格进行排序、数据交互等一系列功能性操作,你需要进一步阅读 wui 的重要组成:table模块
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile