智慧云企业开放平台前端文档

表格1:左右固定，高度限制，宽度全部固定

日期	姓名	省份	市区	地址	邮编
2016-05-03	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-02	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-04	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-01	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-08	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-06	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-07	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333

固定多列

日期	姓名	省份	市区	地址	邮编
2016-05-03	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-02	王小虎测试测试测试测试宽度	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-04	王小虎dvgdfsdfdsfdfdfdfdsf	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-01	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-08	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-06	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-07	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333

表格2:动态表格，有二级,可展开收起（icon替换为iconfont,可自行选择修改为圆形加减号或方形，或保持箭头，可打开fonts/iconfont/demo_fontclass.html查看）

表格3:强制不换行，当位置不够显示时，超出500（最大宽度，设置参数为fixedMaxWidth:500）的列宽度设为500，超出隐藏

日期	姓名	省份	市区	地址	邮编
2016-05-03	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄345345434534646464354353454353453453efsdfdsfsdf	200333
2016-05-02	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄345345434534646464354353454353453453efsdfdsfsdf	200333
2016-05-04	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄345345434534646464354353454353453453efsdfdsfsdf	200333
2016-05-01	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄345345434534646464354353454353453453efsdfdsfsdf	200333
2016-05-08	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-06	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-07	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333

表格4:只有右边固定

日期	姓名	省份	市区	地址	邮编
2016-05-03	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-02	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-04	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-01	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-08	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-06	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-07	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333

表格5:条纹

日期	姓名	省份	市区	地址	邮编
2016-05-03	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-02	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-04	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-01	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-08	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-06	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-07	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333

表格6:宽度部分（例子是地址，邮箱）自适应，自适应宽度最小默认为100

日期	姓名	省份	市区	地址	邮编
2016-05-03	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-02	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-04	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-01	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-08	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-06	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-07	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333

表格7:两级表头，表头不限级数

日期	姓名	地址			邮编	操作
日期	姓名	省份	市区	地址	邮编	操作
2016-05-03	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-02	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-04	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-01	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-08	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-06	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-07	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333

表格8:排序

日期	流量大小	金额	单价	库存	售出
2016-05-03	500M	¥3.000	11	200	300
2016-05-02	20M	¥10.000	500	1004	200333
2016-05-04	50M	¥66.000	2233	9900	200333
2016-05-01	20M	¥30.000	455	4545	200333
2016-05-08	10G	¥888.000	345	7655	200333
2016-05-06	2G	¥12.000	656	3676	200333
2016-05-07	10M	¥8.000	346	9332	200333

表格9:合计

日期	数量	金额	单价	库存	售出
2016-05-03	wwee	24566	0.1	200	300
2016-05-02	rrrr	345345435	0.1	1004	200333
2016-05-04	trete	3234325	2233	9900	200333
2016-05-01	erwer	167688	455	4545	200333
2016-05-08	erewr	456584	345	7655	200333
2016-05-06	qqwwe	9678657	656	3676	200333
2016-05-07	iuuuu	785	346	9332	200333

表格10:左侧复选框

日期	姓名	省份	市区	地址	邮编
2016-05-03	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-02	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-04	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-01	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-08	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-06	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333
2016-05-07	王小虎	上海	普陀区	上海市普陀区金沙江路 1518 弄	200333

点我点我


    
        
            类名
            作用
        
        
            c-table-border
            添加边框
        
        
            c-table--noWrap
            不换行
        
        
            c-table--striped
            斑马线表格
        
        
            g-selectAll--main
            复选框选择父元素
        
        
            input type="checkbox" class="g-selectAll"
            复选框选择全部
        
        
            input type="checkbox" class="g-selectAll--input"
            复选框选择单个
        
        
            class="g-selectAll--btn" data-tag="select"
            复选框按钮，点击在回调中获取选中值的具体信息json
        
        
            g-toggleTable--main
            展开收起父元素
        
        
            tr.g-toggleTable--title>th i.g-toggleTable--buttonAll
            操作头-全部切换部分
        
        
            tr.g-toggleTable--title>th i.g-toggleTable--button
            操作头-单个切换部分
        
        
            col data-total="true"
            计算总数
        
        
            col data-sort="true"
            添加排序

    
        
            
                参数名
                默认值（可选值）
                作用
                类型
            
            
                fixedLeft
                false
                左边固定
                boolean
            
            
                fixedRight
                false
                右边固定
                boolean
            
            
                fixedMinWidth
                100
                最小宽度
                number
            
            
                totalString
                '--'
                计算列总数
                string
            
            
                totalTitle
                '总计'
                总数的标题
                string

js调用

    $('[role="c-table"]').jqTable();

    // 一侧固定
    $('[role="c-table2"]').jqTable({
        fixedRight: true
    });

    // 固定多列
    $('[role="c-table1"]').jqTable({
        fixedLeft: 2,
        fixedRight: 2
    });

    // 两侧固定
    $('[role="c-table"]').jqTable({
        fixedLeft: true,
        fixedRight: true
    });

    // 统计
    $('[role="c-table3"]').jqTable({
        totalString: '--',
        totalTitle: '总计'
    });

<div class="c-table c-table--noWrap">
    <table cellspacing="0" cellpadding="0" border="0" class="" role="c-table">
    <colgroup>
    <col name="" width="150">
    <col name="" width="120">
    <col name="" width="120">
    <col name="" width="120">
    <col name="" width="">
    <col name="" width="">
    <col name="" width="140">
    </colgroup>
    <thead>
    <tr>
        <th class="">
        <div class="cell">日期</div>
        </th>
        <th class="">
        <div class="cell">姓名</div>
        </th>
        <th class="">
        <div class="cell">省份</div>
        </th>
        <th class="">
        <div class="cell">市区</div>
        </th>
        <th  class="">
        <div class="cell">地址</div>
        </th>
        <th class="">
        <div class="cell">邮编</div>
        </th>
        <th class="">
        <div class="cell">操作</div>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="">
        <div class="cell">2016-05-03</div>
        </td>
        <td class="">
        <div class="cell">王小虎</div>
        </td>
        <td class="">
        <div class="cell">上海</div>
        </td>
        <td class="">
        <div class="cell">普陀区</div>
        </td>
        <td class="">
        <div class="cell">上海市普陀区金沙江路 1518 弄</div>
        </td>
        <td class="">
        <div class="cell">200333</div>
        </td>
        <td class="">
        <div class="cell">
            <button type="button" class="c-button">移除</button>
        </div>
        </td>
        
    </tr>
    </tbody>
    </table>
</div>

类名	作用
c-table-border	添加边框
c-table--noWrap	不换行
c-table--striped	斑马线表格
g-selectAll--main	复选框选择父元素
input type="checkbox" class="g-selectAll"	复选框选择全部
input type="checkbox" class="g-selectAll--input"	复选框选择单个
class="g-selectAll--btn" data-tag="select"	复选框按钮，点击在回调中获取选中值的具体信息json
g-toggleTable--main	展开收起父元素
tr.g-toggleTable--title>th i.g-toggleTable--buttonAll	操作头-全部切换部分
tr.g-toggleTable--title>th i.g-toggleTable--button	操作头-单个切换部分
col data-total="true"	计算总数
col data-sort="true"	添加排序

参数名	默认值（可选值）	作用	类型
fixedLeft	false	左边固定	boolean
fixedRight	false	右边固定	boolean
fixedMinWidth	100	最小宽度	number
totalString	'--'	计算列总数	string
totalTitle	'总计'	总数的标题	string