Table 普通表格

使用说明

本表格是原生table,没有使用任何插件,纯css改良而来的。

表格类参数

样式 说明
ax-table 默认表格没有左右边框,居中排列
ax-table ax-border 带四周边框的表格
ax-table ax-border-grid 带网格边框的表格
ax-table ax-stripe 表格行颜色交替,第一行开始变色
ax-table ax-stripe-none 表格不交替变色,默认
ax-table ax-stripe-odd 表格行颜色交替,交替方式同ax-stripe
ax-table ax-stripe-even 表格行颜色交替,第二行开始变色
ax-table ax-hover 鼠标经过行变色
ax-table ax-hover-none 鼠标经过行不变色,默认
ax-table ax-align-left 表格内容靠左排列
ax-table ax-align-center 表格内容居中排列
ax-table ax-align-right 表格内容靠右排列

默认的表格

给table标签添加ax-table类即可实现默认表格样式,默认表格是没有左右边框且居中排列的。

等级 说明 举例
A、微小 为其他部门的工作提供服务。 会计、分析员、一线督导、一线经理、业务员
B、略有 对实现企业的发展战略提供支持性服务。 部门主管、执行经理
C、中等 对实现企业的发展战略起到重要作用。 助理副总、副总、事业部经理
D、巨大 制定企业的发展战略,位于企业的决策层。 中型组织CEO、大型组织的副总
                                <table class="ax-table">
                                    <thead>
                                    <tr>
                                        <th>等级</th>
                                        <th>说明</th>
                                        <th>举例</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>A、微小</td>
                                        <td>为其他部门的工作提供服务。</td>
                                        <td>会计、分析员、一线督导、一线经理、业务员</td>
                                    </tr>
                                    <tr>
                                        <td>B、略有</td>
                                        <td>对实现企业的发展战略提供支持性服务。</td>
                                        <td>部门主管、执行经理</td>
                                    </tr>
                                    <tr>
                                        <td>C、中等</td>
                                        <td>对实现企业的发展战略起到重要作用。</td>
                                        <td>助理副总、副总、事业部经理</td>
                                    </tr>
                                    <tr>
                                        <td>D、巨大</td>
                                        <td>制定企业的发展战略,位于企业的决策层。</td>
                                        <td>中型组织CEO、大型组织的副总</td>

                                    </tr>
                                    </tbody>
                                </table>
                        

有边框的表格

给table标签添加ax-border类即可实现有四周边框的表格。

等级 说明 举例
A、微小 为其他部门的工作提供服务。 会计、分析员、一线督导、一线经理、业务员
B、略有 对实现企业的发展战略提供支持性服务。 部门主管、执行经理
C、中等 对实现企业的发展战略起到重要作用。 助理副总、副总、事业部经理
D、巨大 制定企业的发展战略,位于企业的决策层。 中型组织CEO、大型组织的副总
                                <table class="ax-table ax-border">
                                    <thead>
                                    <tr>
                                        <th>等级</th>
                                        <th>说明</th>
                                        <th>举例</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>A、微小</td>
                                        <td>为其他部门的工作提供服务。</td>
                                        <td>会计、分析员、一线督导、一线经理、业务员</td>
                                    </tr>
                                    <tr>
                                        <td>B、略有</td>
                                        <td>对实现企业的发展战略提供支持性服务。</td>
                                        <td>部门主管、执行经理</td>
                                    </tr>
                                    <tr>
                                        <td>C、中等</td>
                                        <td>对实现企业的发展战略起到重要作用。</td>
                                        <td>助理副总、副总、事业部经理</td>
                                    </tr>
                                    <tr>
                                        <td>D、巨大</td>
                                        <td>制定企业的发展战略,位于企业的决策层。</td>
                                        <td>中型组织CEO、大型组织的副总</td>

                                    </tr>
                                    </tbody>
                                </table>
                        

有网格边框的表格

给table标签添加ax-border-grid类即可实现有网格边框的表格。

等级 说明 举例
A、微小 为其他部门的工作提供服务。 会计、分析员、一线督导、一线经理、业务员
B、略有 对实现企业的发展战略提供支持性服务。 部门主管、执行经理
C、中等 对实现企业的发展战略起到重要作用。 助理副总、副总、事业部经理
D、巨大 制定企业的发展战略,位于企业的决策层。 中型组织CEO、大型组织的副总
                                 <table class="ax-table ax-border-grid">
                                    <thead>
                                    <tr>
                                        <th>等级</th>
                                        <th>说明</th>
                                        <th>举例</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>A、微小</td>
                                        <td>为其他部门的工作提供服务。</td>
                                        <td>会计、分析员、一线督导、一线经理、业务员</td>
                                    </tr>
                                    <tr>
                                        <td>B、略有</td>
                                        <td>对实现企业的发展战略提供支持性服务。</td>
                                        <td>部门主管、执行经理</td>
                                    </tr>
                                    <tr>
                                        <td>C、中等</td>
                                        <td>对实现企业的发展战略起到重要作用。</td>
                                        <td>助理副总、副总、事业部经理</td>
                                    </tr>
                                    <tr>
                                        <td>D、巨大</td>
                                        <td>制定企业的发展战略,位于企业的决策层。</td>
                                        <td>中型组织CEO、大型组织的副总</td>

                                    </tr>
                                    </tbody>
                                </table>
                        

被选中的表格

给表格的tr标签添加ax-selected类即可实现行被选中样式。

等级 说明 举例 选择
A、微小 为其他部门的工作提供服务。
一旦工作出现失误,会给其他部门的工作带来不便。
会计、分析员、一线督导、一线经理、业务员
B、略有 对实现企业的发展战略提供支持性服务。
一旦工作出现失误,会造成其他部门工作效率的损失。
部门主管、执行经理
C、中等 对实现企业的发展战略起到重要作用。
一旦工作出现失误,会造成战略执行的偏差,或管理成本的陡增,或业务收入骤减,
或重要客户资源丢失,或造成其他重大风险。
助理副总、副总、事业部经理
D、巨大 制定企业的发展战略,位于企业的决策层。
一旦工作出现失误,会给整个企业的发展造成重大经济损失。
中型组织CEO、大型组织的副总
                                 <table class="ax-table">
                                    <thead>
                                    <tr>
                                        <th style="width: 80px;">等级</th>
                                        <th>说明</th>
                                        <th>举例</th>
                                        <th style="width: 80px;">选择</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>A、微小</td>
                                        <td>为其他部门的工作提供服务。<br>一旦工作出现失误,会给其他部门的工作带来不便。</td>
                                        <td>会计、分析员、一线督导、一线经理、业务员</td>
                                        <td><span class="ax-iconfont ax-icon-circle ax-color-ignore"></span></td>
                                    </tr>
                                    <tr class="ax-selected">
                                        <td>B、略有</td>
                                        <td>对实现企业的发展战略提供支持性服务。<br>一旦工作出现失误,会造成其他部门工作效率的损失。</td>
                                        <td>部门主管、执行经理</td>
                                        <td><span class="ax-iconfont ax-icon-check-o-fill ax-color-primary"></span></td>
                                    </tr>
                                    <tr>
                                        <td>C、中等</td>
                                        <td>对实现企业的发展战略起到重要作用。<br>一旦工作出现失误,会造成战略执行的偏差,或管理成本的陡增,或业务收入骤减,<br>或重要客户资源丢失,或造成其他重大风险。</td>
                                        <td>助理副总、副总、事业部经理</td>
                                        <td><span class="ax-iconfont ax-icon-circle ax-color-ignore"></span></td>
                                    </tr>
                                    <tr>
                                        <td>D、巨大</td>
                                        <td>制定企业的发展战略,位于企业的决策层。<br>一旦工作出现失误,会给整个企业的发展造成重大经济损失。</td>
                                        <td>中型组织CEO、大型组织的副总</td>
                                        <td><span class="ax-iconfont ax-icon-circle ax-color-ignore"></span></td>
                                    </tr>
                                    </tbody>
                                </table>
                        

行交替变色

给表格添加ax-stripeax-stripe-even即可。

等级 说明 举例
A、微小 为其他部门的工作提供服务。 会计、分析员、一线督导、一线经理、业务员
B、略有 对实现企业的发展战略提供支持性服务。 部门主管、执行经理
C、中等 对实现企业的发展战略起到重要作用。 助理副总、副总、事业部经理
D、巨大 制定企业的发展战略,位于企业的决策层。 中型组织CEO、大型组织的副总
                                 <table class="ax-table ax-stripe">
                                    <thead>
                                    <tr>
                                        <th>等级</th>
                                        <th>说明</th>
                                        <th>举例</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>A、微小</td>
                                        <td>为其他部门的工作提供服务。</td>
                                        <td>会计、分析员、一线督导、一线经理、业务员</td>
                                    </tr>
                                    <tr>
                                        <td>B、略有</td>
                                        <td>对实现企业的发展战略提供支持性服务。</td>
                                        <td>部门主管、执行经理</td>
                                    </tr>
                                    <tr>
                                        <td>C、中等</td>
                                        <td>对实现企业的发展战略起到重要作用。</td>
                                        <td>助理副总、副总、事业部经理</td>
                                    </tr>
                                    <tr>
                                        <td>D、巨大</td>
                                        <td>制定企业的发展战略,位于企业的决策层。</td>
                                        <td>中型组织CEO、大型组织的副总</td>

                                    </tr>
                                    </tbody>
                                </table>
                        

鼠标经过行变色

给表格添加ax-hover类即可。

等级 说明 举例
A、微小 为其他部门的工作提供服务。 会计、分析员、一线督导、一线经理、业务员
B、略有 对实现企业的发展战略提供支持性服务。 部门主管、执行经理
C、中等 对实现企业的发展战略起到重要作用。 助理副总、副总、事业部经理
D、巨大 制定企业的发展战略,位于企业的决策层。 中型组织CEO、大型组织的副总
                                 <table class="ax-table ax-hover">
                                    <thead>
                                    <tr>
                                        <th>等级</th>
                                        <th>说明</th>
                                        <th>举例</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>A、微小</td>
                                        <td>为其他部门的工作提供服务。</td>
                                        <td>会计、分析员、一线督导、一线经理、业务员</td>
                                    </tr>
                                    <tr>
                                        <td>B、略有</td>
                                        <td>对实现企业的发展战略提供支持性服务。</td>
                                        <td>部门主管、执行经理</td>
                                    </tr>
                                    <tr>
                                        <td>C、中等</td>
                                        <td>对实现企业的发展战略起到重要作用。</td>
                                        <td>助理副总、副总、事业部经理</td>
                                    </tr>
                                    <tr>
                                        <td>D、巨大</td>
                                        <td>制定企业的发展战略,位于企业的决策层。</td>
                                        <td>中型组织CEO、大型组织的副总</td>

                                    </tr>
                                    </tbody>
                                </table>
                        

靠左排列的表格

给table标签添加ax-align-left类即可实现靠左排列的表格。

等级 说明 举例
A、微小 为其他部门的工作提供服务。 会计、分析员、一线督导、一线经理、业务员
B、略有 对实现企业的发展战略提供支持性服务。 部门主管、执行经理
C、中等 对实现企业的发展战略起到重要作用。 助理副总、副总、事业部经理
D、巨大 制定企业的发展战略,位于企业的决策层。 中型组织CEO、大型组织的副总
                                 <table class="ax-table ax-align-left">
                                    <thead>
                                    <tr>
                                        <th>等级</th>
                                        <th>说明</th>
                                        <th>举例</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>A、微小</td>
                                        <td>为其他部门的工作提供服务。</td>
                                        <td>会计、分析员、一线督导、一线经理、业务员</td>
                                    </tr>
                                    <tr>
                                        <td>B、略有</td>
                                        <td>对实现企业的发展战略提供支持性服务。</td>
                                        <td>部门主管、执行经理</td>
                                    </tr>
                                    <tr>
                                        <td>C、中等</td>
                                        <td>对实现企业的发展战略起到重要作用。</td>
                                        <td>助理副总、副总、事业部经理</td>
                                    </tr>
                                    <tr>
                                        <td>D、巨大</td>
                                        <td>制定企业的发展战略,位于企业的决策层。</td>
                                        <td>中型组织CEO、大型组织的副总</td>

                                    </tr>
                                    </tbody>
                                </table>
                        

单行超出省略的表格

框架定义了表格td单行内容的最大长度是160px,给td内容添加ax-ell类即可实现单行超出省略。如果160px不是用户想要的宽度,可以直接将width样式写在标签上。

等级 说明 举例
A、微小 为其他部门的工作提供服务。 会计、分析员、一线督导、一线经理、业务员
B、略有 对实现企业的发展战略提供支持性服务。 部门主管、执行经理
C、中等 对实现企业的发展战略起到重要作用。 助理副总、副总、事业部经理
D、巨大 制定企业的发展战略,位于企业的决策层。 中型组织CEO、大型组织的副总
                                 <table class="ax-table ax-align-left">
                                    <thead>
                                    <tr>
                                        <th>等级</th>
                                        <th>说明</th>
                                        <th>举例</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>A、微小</td>
                                        <td><span class="ax-ell">为其他部门的工作提供服务。</span></td>
                                        <td>会计、分析员、一线督导、一线经理、业务员</td>
                                    </tr>
                                    <tr>
                                        <td>B、略有</td>
                                        <td><span class="ax-ell">对实现企业的发展战略提供支持性服务。</span></td>
                                        <td>部门主管、执行经理</td>
                                    </tr>
                                    <tr>
                                        <td>C、中等</td>
                                        <td><span class="ax-ell">对实现企业的发展战略起到重要作用。</span></td>
                                        <td>助理副总、副总、事业部经理</td>
                                    </tr>
                                    <tr>
                                        <td>D、巨大</td>
                                        <td><span class="ax-ell">制定企业的发展战略,位于企业的决策层。</span></td>
                                        <td>中型组织CEO、大型组织的副总</td>

                                    </tr>
                                    </tbody>
                                </table>
                        

多行超出省略的表格

框架定义了表格td多行内容的最大长度是60个字符,给td内容添加ax-more-ell类即可实现多行超出省略。

等级 说明 举例
A、微小
对实现企业的发展战略起到重要作用。一旦工作出现失误,会造成战略执行的偏差,或管理成本的陡增,或业务收入骤减,或重要客户资源丢失,或造成其他重大风险。
会计、分析员、一线督导、一线经理、业务员
B、略有 对实现企业的发展战略提供支持性服务。 部门主管、执行经理
C、中等 对实现企业的发展战略起到重要作用。 助理副总、副总、事业部经理
D、巨大 制定企业的发展战略,位于企业的决策层。 中型组织CEO、大型组织的副总
                                <table class="ax-table ax-align-left">
                                    <thead>
                                    <tr>
                                        <th style="width:20%;">等级</th>
                                        <th >说明</th>
                                        <th style="width: 20%">举例</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>A、微小</td>
                                        <td><div class="ax-more-ell" >对实现企业的发展战略起到重要作用。一旦工作出现失误,会造成战略执行的偏差,或管理成本的陡增,或业务收入骤减,或重要客户资源丢失,或造成其他重大风险。</div></td>
                                        <td>会计、分析员、一线督导、一线经理、业务员</td>
                                    </tr>
                                    <tr>
                                        <td>B、略有</td>
                                        <td><span class="ax-ell">对实现企业的发展战略提供支持性服务。</span></td>
                                        <td>部门主管、执行经理</td>
                                    </tr>
                                    <tr>
                                        <td>C、中等</td>
                                        <td><span class="ax-ell">对实现企业的发展战略起到重要作用。</span></td>
                                        <td>助理副总、副总、事业部经理</td>
                                    </tr>
                                    <tr>
                                        <td>D、巨大</td>
                                        <td><span class="ax-ell">制定企业的发展战略,位于企业的决策层。</span></td>
                                        <td>中型组织CEO、大型组织的副总</td>

                                    </tr>
                                    </tbody>
                                </table>
                                    

用户根据自己需要设置字符长度,除了字符长度之外还可以设置按钮的文字和样式,使用方法如下:

                            <script type="javascript">
                               $(document).ready(function () {
                                   $(".ax-more-ell").axEll({
                                      textLength: "60",
                                      foldText: "收起",
                                      unfoldText: "全部",
                                      btnClass: "ax-color-primary",
                                   });
                              });
                            </script>
                        

带表头提示的表格

情形 描述 回购和转让安排 操作
激励对象在持有激励股权6年以内,出现以下情形,按照以下方式处理:
1、激励对象主动解除劳动关系
在劳动合同期内书面辞职
按照原始出资价格加每年6%利息回购
2、激励对象被解除劳动关系
因违反法律、法规、甲方规章制度、双方协议等被解除劳动关系的
按照原始出资价格回购,如果给公司造成损失,赔偿损失
3、丧失劳动能力并终止劳动关系
激励对象因伤病等非工伤的原因
按照原始出资价格加每年10%的利息回购
4、职务变更(仅限于高管)
职务调整,按照“股随岗走”原则,依据公司的《岗位与激励股权确定细则》确定乙方的激励股权,相应增加或者减少
增加激励股权按照新的激励对象处理;减少激励股权按照应减少的激励股权出资额加10%利率回购
5、退休
88退休且不签署《保密及竞业限制协议》
按照原始出资价格加每年12%的利息回购
6、死亡
公司股份不能在公开市场自由转让的
继承人与公司股东协商转让,如无人受让,则原始出资价格加每年12%的利息回购
                                 <table class="ax-table ax-border">
                                    <thead>
                                    <tr>
                                        <th style="width: 240px;">情形</th>
                                        <th>描述</th>
                                        <th>回购和转让安排</th>
                                        <th style="width: 100px;">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td colspan="4">
                                            <div class="ax-alert ax-warning ax-margin-lr ax-align-left">激励对象在持有激励股权<span class="ax-color-danger">6</span>年以内,出现以下情形,按照以下方式处理:</div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><div class="ax-align-left">1、激励对象主动解除劳动关系</div></td>
                                        <td><div class="ax-align-left">在劳动合同期内书面辞职</div></td>
                                        <td><div class="ax-align-left">按照原始出资价格加每年<span class="ax-color-danger">6%</span>利息回购</div></td>
                                        <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a></div></td>
                                    </tr>
                                    <tr>
                                        <td><div class="ax-align-left">2、激励对象被解除劳动关系</div></td>
                                        <td><div class="ax-align-left">因违反法律、法规、甲方规章制度、双方协议等被解除劳动关系的</div></td>
                                        <td><div class="ax-align-left">按照原始出资价格回购,如果给公司造成损失,赔偿损失</div></td>
                                        <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a></div></td>
                                    </tr>
                                    <tr>
                                        <td><div class="ax-align-left">3、丧失劳动能力并终止劳动关系</div></td>
                                        <td><div class="ax-align-left">激励对象因伤病等非工伤的原因</div></td>
                                        <td><div class="ax-align-left">按照原始出资价格加每年<span class="ax-color-danger">10%</span>的利息回购</div></td>
                                        <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a></div></td>
                                    </tr>
                                    <tr>
                                        <td><div class="ax-align-left">4、职务变更(仅限于高管)</div></td>
                                        <td><div class="ax-align-left">职务调整,按照“股随岗走”原则,依据公司的《岗位与激励股权确定细则》确定乙方的激励股权,相应增加或者减少</div></td>
                                        <td><div class="ax-align-left">增加激励股权按照新的激励对象处理;减少激励股权按照应减少的激励股权出资额加<span class="ax-color-danger">10%</span>利率回购</div></td>
                                        <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a></div></td>
                                    </tr>
                                    <tr>
                                        <td><div class="ax-align-left">5、退休</div></td>
                                        <td><div class="ax-align-left ax-more-ell">88退休且不签署《保密及竞业限制协议》</div></td>
                                        <td><div class="ax-align-left">按照原始出资价格加每年<span class="ax-color-danger">12</span>%的利息回购</div></td>
                                        <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a></div></td>
                                    </tr>
                                    <tr>
                                        <td><div class="ax-align-left">6、死亡</div></td>
                                        <td><div class="ax-align-left">公司股份不能在公开市场自由转让的</div></td>
                                        <td><div class="ax-align-left">继承人与公司股东协商转让,如无人受让,则原始出资价格加每年<span class="ax-color-danger">12%</span>的利息回购</div></td>
                                        <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a></div></td>
                                    </tr>
                                    </tbody>
                                </table>
                        

带复选的表格

部门 岗位 年度保底
目标(元)
岗位价值
分数
姓名 平均年薪
(元)
阶段考核
结果
分配比例 分配金额
(元)
激励股数 操作
董事会 董事长 1000000 86 马云 200000 600 16% 20000 300000
董事会 董事长 1000000 86 马云 200000 600 16% 20000 300000
董事会 董事长 1000000 86 马云 200000 600 16% 20000 300000
董事会 董事长 1000000 86 马云 200000 600 16% 20000 300000
董事会 董事长 1000000 86 马云 200000 600 16% 20000 300000
选择全部
                                 <table class="ax-table ax-border-tb">
                                    <thead>
                                    <tr>
                                        <th style="width:50px;"><input name="" type="checkbox" value=""></th>
                                        <th>部门</th>
                                        <th>岗位</th>
                                        <th>年度保底<br>目标(元)</th>
                                        <th>岗位价值<br>分数</th>
                                        <th>姓名</th>
                                        <th>平均年薪<br>(元)</th>
                                        <th>阶段考核<br>结果</th>
                                        <th>分配比例</th>
                                        <th>分配金额<br>(元)</th>
                                        <th>激励股数</th>
                                        <th style="width:110px;">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td><input name="" type="checkbox" value=""></td>
                                        <td>董事会</td>
                                        <td>董事长</td>
                                        <td><span class="ax-color-warning">1000000</span></td>
                                        <td>86</td>
                                        <td>马云</td>
                                        <td>200000</td>
                                        <td>600</td>
                                        <td>16%</td>
                                        <td>20000</td>
                                        <td>300000</td>
                                        <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-fill" title="查看"></a><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a><a href="###" class="ax-iconfont ax-icon-trash-alt-fill" title="删除"></a></div></td>
                                    </tr>
                                    <tr class="selected">
                                        <td><input name="" type="checkbox" value=""></td>
                                        <td>董事会</td>
                                        <td>董事长</td>
                                        <td><span class="ax-color-warning">1000000</span></td>
                                        <td>86</td>
                                        <td>马云</td>
                                        <td>200000</td>
                                        <td>600</td>
                                        <td>16%</td>
                                        <td>20000</td>
                                        <td>300000</td>
                                        <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-fill" title="查看"></a><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a><a href="###" class="ax-iconfont ax-icon-trash-alt-fill" title="删除"></a></div></td>
                                    </tr>
                                    <tr>
                                        <td><label class="ax-checkbox ax-bone"><input type="checkbox" name="star3" value="2" checked><span></span></label></td>
                                        <td>董事会</td>
                                        <td>董事长</td>
                                        <td><span class="ax-color-warning">1000000</span></td>
                                        <td>86</td>
                                        <td>马云</td>
                                        <td>200000</td>
                                        <td>600</td>
                                        <td>16%</td>
                                        <td>20000</td>
                                        <td>300000</td>
                                        <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-fill" title="查看"></a><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a><a href="###" class="ax-iconfont ax-icon-trash-alt-fill" title="删除"></a></div></td>
                                    </tr>
                                    <tr>
                                        <td><label class="ax-checkbox ax-bone"><input type="checkbox" name="star3" value="2"><span></span></label></td>
                                        <td>董事会</td>
                                        <td>董事长</td>
                                        <td><span class="ax-color-warning">1000000</span></td>
                                        <td>86</td>
                                        <td>马云</td>
                                        <td>200000</td>
                                        <td>600</td>
                                        <td>16%</td>
                                        <td>20000</td>
                                        <td>300000</td>
                                        <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-fill" title="查看"></a><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a><a href="###" class="ax-iconfont ax-icon-trash-alt-fill" title="删除"></a></div></td>
                                    </tr>
                                    <tr>
                                        <td><input name="" type="checkbox" value=""></td>
                                        <td>董事会</td>
                                        <td>董事长</td>
                                        <td><span class="ax-color-warning">1000000</span></td>
                                        <td>86</td>
                                        <td>马云</td>
                                        <td>200000</td>
                                        <td>600</td>
                                        <td>16%</td>
                                        <td>20000</td>
                                        <td>300000</td>
                                        <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-fill" title="查看"></a><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a><a href="###" class="ax-iconfont ax-icon-trash-alt-fill" title="删除"></a></div></td>
                                    </tr>
                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <td colspan="13">
                                            <div class="ax-flex-row">
                                                <div class="ax-flex-block ax-align-left">选择全部</div>
                                                <div class="ax-flex-block ax-align-right"><a href="###" class="ax-btn ax-primary ax-xs">批量删除</a></div>
                                                <span class="ax-gutter"></span>
                                            </div>
                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>
                        

带按钮和操作的表格

                                <table class="ax-table ax-border">
                                    <thead>
                                    <tr>
                                        <th><div class="ax-align-left">项目名称</div></th>
                                        <th style="width:80px;">头像</th>
                                        <th style="width: 120px;">是否签章</th>
                                        <th style="width: 120px;">签章日期</th>
                                        <th style="width: 120px;">截止日期</th>
                                        <th style="width:80px;">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td><div class="ax-align-left"><a href="###" class="ax-ell"><span class="ax-iconfont ax-icon-email-fill"></span> 张宇凡2017年虚拟股激励个人目标责任书</a></div></td>
                                        <td><a href="###" class="ax-avatar ax-xxs ax-round" style="background-image: url(https://src.axui.cn/examples/images/head01.jpg),url(https://src.axui.cn/src/images/loading.gif)"></a></td>
                                        <td><a href="###" class="ax-btn ax-xs">填写并签章</a></td>
                                        <td>-</td>
                                        <td>2017-10-23</td>
                                        <td>
                                            <a href="###" class="ax-btn ax-xs ax-icon"><span class="ax-iconfont ax-icon-eye-fill" title="查看"></span></a>
                                            <a href="###" class="ax-btn ax-xs ax-primary ax-icon"><span class="ax-iconfont ax-icon-eye-fill" title="查看"></span></a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><div class="ax-align-left"><a href="###"><span class="ax-iconfont ax-icon-theme-fill"></span> <span>张宇凡2016年虚拟股激励个人目标责任书</span></a></div></td>
                                        <td><a href="###" class="ax-avatar ax-xxs ax-round" style="background-image: url(https://src.axui.cn/examples/images/head02.jpg),url(https://src.axui.cn/src/images/loading.gif)"></a></td>
                                        <td><span class="ax-iconfont ax-icon-check-o-fill  ax-color-forbid" title="已完成"></span></td>
                                        <td>2016-2-6</td>
                                        <td>2017-10-23</td>
                                        <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-fill" title="查看"></a></div></td>
                                    </tr>
                                    <tr>
                                        <td><div class="ax-align-left"><a href="###"><span class="ax-iconfont ax-icon-pie-fill"></span> <span>张宇凡2015年虚拟股激励个人目标责任书</span></a></div></td>
                                        <td><a href="###" class="ax-avatar ax-xxs ax-round" style="background-image: url(https://src.axui.cn/examples/images/head03.jpg),url(https://src.axui.cn/src/images/loading.gif)"></a></td>
                                        <td><span class="ax-iconfont ax-icon-check-o-fill  ax-color-ignore" title="已完成"></span></td>
                                        <td>2016-2-6</td>
                                        <td>2017-10-23</td>
                                        <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-fill" title="查看"><span class="ax-dot ax-bg-danger"></span></a><a href="###" class="ax-iconfont ax-icon-editing-fill ax-color-forbid" title="编辑"></a></div></td>
                                    </tr>
                                    <tr>
                                        <td><div class="ax-align-left"><a href="###"><span class="ax-iconfont ax-icon-file-text-fill"></span> <span>张宇凡2014年虚拟股激励个人目标责任书</span></a></div></td>
                                        <td><a href="###" class="ax-avatar ax-xxs ax-radius" style="background-image: url(https://src.axui.cn/examples/images/head04.jpg),url(https://src.axui.cn/src/images/loading.gif)"></a></td>
                                        <td><a href="###" class="ax-btn ax-btn-ignore ax-xs">填写并签章</a></td>
                                        <td>-</td>
                                        <td>2017-10-23</td>
                                        <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-fill" title="查看"></a></div></td>
                                    </tr>
                                    <tr>
                                        <td><div class="ax-align-left"><a href="###"><span class="ax-iconfont ax-icon-plus-s-fill"></span> <span>张宇凡2017年虚拟股激励个人目标责任书</span></a></div></td>
                                        <td><a href="###" class="ax-avatar ax-xxs ax-radius" style="background-image: url(https://src.axui.cn/examples/images/head05.jpg),url(https://src.axui.cn/src/images/loading.gif)"></a></td>
                                        <td><span class="ax-iconfont ax-icon-check-o-fill  ax-color-primary" title="已完成"></span></td>
                                        <td>2016-2-6</td>
                                        <td>2017-10-23</td>
                                        <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-eye-fill" title="查看"></a></div></td>
                                    </tr>


                                    </tbody>
                                </table>
                        

表单

在table中的表单控件均使用ax-xs尺寸,另外对ax-form-group包裹的input采用自适应宽度的办法,对td/th直接子元素inputselect采用固定120px的方法,当然用户可行内定义表单元素宽度。

姓名 性别 身高 体重 年级 操作
文汉阳
厘米
核对 删除
李川
厘米
核对 删除
欧阳忠实
厘米
核对 删除
                                <table class="ax-table ax-border ax-align-left">
                                    <thead>
                                    <tr>
                                        <th>姓名</th>
                                        <th>性别</th>
                                        <th>身高</th>
                                        <th>体重</th>
                                        <th>年级</th>
                                        <th style="width:80px;">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>文汉阳</td>
                                        <td>
                                            <label class="ax-radio ax-xs"><input name="sex" value="" type="radio" checked><span>男</span></label>
                                            <label class="ax-radio ax-xs"><input name="sex" value="" type="radio"><span>女</span></label>
                                        </td>
                                        <td>
                                            <div class="ax-form-group ax-xs ax-row">
                                                <div class="ax-col">
                                                    <div class="ax-form-input" ><input type="text" class="ax-xs"></div>
                                                </div>
                                                <span class="ax-form-txt ax-color-ignore">厘米</span>
                                            </div>
                                        </td>
                                        <td>
                                            <input type="text" class="ax-xs">
                                        </td>
                                        <td>
                                            <select class="ax-select ax-xs">
                                                <option>初中一年级</option>
                                                <option>初中二年级</option>
                                                <option>初中三年级</option>
                                            </select>
                                        </td>
                                        <td>
                                            <a href="###" class="ax-btn ax-primary ax-xs">核对</a>
                                            <a href="###" class="ax-btn ax-danger ax-xs">删除</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>李川</td>
                                        <td>
                                            <label class="ax-radio ax-xs"><input name="sex2" value="" type="radio" checked><span>男</span></label>
                                            <label class="ax-radio ax-xs"><input name="sex2" value="" type="radio"><span>女</span></label>
                                        </td>
                                        <td>
                                            <div class="ax-form-group ax-xs ax-row">
                                                <div class="ax-col">
                                                    <div class="ax-form-input" ><input type="text" class="ax-xs"></div>
                                                </div>
                                                <span class="ax-form-txt ax-color-ignore">厘米</span>
                                            </div>
                                        </td>
                                        <td>
                                            <input type="text" class="ax-xs">
                                        </td>
                                        <td>
                                            <select class="ax-select ax-xs">
                                                <option>初中一年级</option>
                                                <option>初中二年级</option>
                                                <option>初中三年级</option>
                                            </select>
                                        </td>
                                        <td>
                                            <a href="###" class="ax-btn ax-primary ax-xs">核对</a>
                                            <a href="###" class="ax-btn ax-danger ax-xs">删除</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>欧阳忠实</td>
                                        <td>
                                            <label class="ax-radio ax-xs"><input name="sex3" value="" type="radio" checked><span>男</span></label>
                                            <label class="ax-radio ax-xs"><input name="sex3" value="" type="radio"><span>女</span></label>
                                        </td>
                                        <td>
                                            <div class="ax-form-group ax-xs ax-row">
                                                <div class="ax-col">
                                                    <div class="ax-form-input" ><input type="text" class="ax-xs"></div>
                                                </div>
                                                <span class="ax-form-txt ax-color-ignore">厘米</span>
                                            </div>
                                        </td>
                                        <td>
                                            <input type="text" class="ax-xs">
                                        </td>
                                        <td>
                                            <select class="ax-select ax-xs">
                                                <option>初中一年级</option>
                                                <option>初中二年级</option>
                                                <option>初中三年级</option>
                                            </select>
                                        </td>
                                        <td>
                                            <a href="###" class="ax-btn ax-primary ax-xs">核对</a>
                                            <a href="###" class="ax-btn ax-danger ax-xs">删除</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                        

基本排序

借助list.js插件实现表格的表头排序。要求:1、给table添加id;2、表头添加class="sort" data-sort="*";3、tbody添加class="list"。list.js的用法请点击这里。如果需要创建大型数据表格并使用更复杂的操作,建议使用datatables插件,详情请点击这里

顺序 朝代 存在时间
A 唐朝 274年
B 宋朝 319年
C 元朝 97年
D 明朝 276年
  • <script src="src/plugins/list/list.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
        $(document).ready(function () {
        var options01 = {
                valueNames: [ 'no', 'dynasty','life' ],
            };
            var list01 = new List('list01', options01);
        });
    </script>
                            
  •                                 <table class="ax-table ax-stripe" id="list01">
                                        <thead>
                                        <tr>
                                            <th class="sort" data-sort="no"><span>顺序</span></th>
                                            <th class="sort" data-sort="dynasty"><span>朝代</span></th>
                                            <th class="sort" data-sort="life"><span>存在时间</span></th>
                                        </tr>
                                        </thead>
                                        <tbody class="list">
                                        <tr>
                                            <td class="no">A</td>
                                            <td class="dynasty">唐朝</td>
                                            <td class="life" >274年</td>
                                        </tr>
                                        <tr>
                                            <td class="no">B</td>
                                            <td class="dynasty">宋朝</td>
                                            <td class="life" >319年</td>
                                        </tr>
                                        <tr>
                                            <td class="no">C</td>
                                            <td class="dynasty">元朝</td>
                                            <td class="life" >97年</td>
                                        </tr>
                                        <tr>
                                            <td class="no">D</td>
                                            <td class="dynasty">明朝</td>
                                            <td class="life" >276年</td>
                                        </tr>
    
                                        </tbody>
                                    </table>