1. 基础外观

    表头 表头 表头 表头
    文字较多的单元格 单元格 单元格 单元格
    文字较多的单元格 单元格 单元格 单元格
    文字较多的单元格 单元格 单元格 单元格
    文字较多的单元格 单元格 单元格 单元格
    文字较多的单元格 单元格 单元格 单元格
    <div class="c_table">
    	<table>
    		<thead>
    			<tr>
    				<th>表头</th>
    			</tr>
    		</thead>
    		<tbody>
    			<tr>
    				<td>单元格</td>
    			</tr>
    		</tbody>
    	</table>
    </div>
    
  2. 扩展外观

    1. 改变元素

      表头 表头 表头 表头
      文字 文字 文字 文字
      文字 文字 文字 文字
      <div class="c_table">
      	<table>
      		<tbody>
      			<tr>
      				<td class="edit"><span class="e_input"><span><input type="text" /></span></span></td>
      			</tr>
      		</tbody>
      	</table>
      </div>
      
    2. 变换行色彩

      1. 偶数行

        表头 表头 表头 表头
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        <div class="c_table">
        	<table>
        		<tbody>
        			<tr class="even">
        				<td>单元格</td>
        			</tr>
        		</tbody>
        	</table>
        </div>
        
      2. 强调行

        表头 表头 表头 表头
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        合计 3277
        <div class="c_table">
        	<table>
        		<tbody>
        			<tr class="focus">
        				<td>单元格</td>
        			</tr>
        		</tbody>
        	</table>
        </div>
        
      3. 选定行

        表头 表头 表头 表头
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        <div class="c_table">
        	<table>
        		<tbody>
        			<tr class="on">
        				<td>单元格</td>
        			</tr>
        		</tbody>
        	</table>
        </div>
        
      4. 新建行

        表头 表头 表头 表头
        单元格 单元格 单元格 链接
        单元格 单元格 单元格 链接
        单元格 单元格 单元格 链接
        单元格 单元格 单元格 链接
        单元格 单元格 单元格 链接
        单元格 单元格 单元格 链接
        <div class="c_table">
        	<table>
        		<tbody>
        			<tr class="new">
        				<td>单元格</td>
        			</tr>
        		</tbody>
        	</table>
        </div>
        
      5. 被删除的行

        表头 表头 表头 表头
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        <div class="c_table">
        	<table>
        		<tbody>
        			<tr class="delete">
        				<td>单元格</td>
        			</tr>
        		</tbody>
        	</table>
        </div>
        
    3. 鼠标悬移效果请将鼠标悬移到表格行上查看效果

      1. 行悬移效果

        表头 表头 表头 表头
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        <div class="c_table c_table-hover">
        	<table>
        		<tbody>
        			<tr>
        				<td>单元格</td>
        			</tr>
        		</tbody>
        	</table>
        </div>
        
      2. 表头悬移效果

        表头 表头 表头 表头
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        <div class="c_table c_table-th-hover">
        	<table>
        		<tbody>
        			<tr>
        				<td>单元格</td>
        			</tr>
        		</tbody>
        	</table>
        </div>
        
      3. 单元格悬移效果

        表头 表头 表头 表头
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        <div class="c_table c_table-td-hover">
        	<table>
        		<tbody>
        			<tr>
        				<td>单元格</td>
        			</tr>
        		</tbody>
        	</table>
        </div>
        
    4. 自动换行

      表头 表头 表头 表头
      假装这是一段很长的描述性的语言假装这是一段很长的描述性的语言假装这是一段很长的描述性的语言假装这是一段很长的描述性的语言假装这是一段很长的描述性的语言 文字 文字 文字
      假装这是一段很长的描述性的语言假装这是一段很长的描述性的语言假装这是一段很长的描述性的语言假装这是一段很长的描述性的语言假装这是一段很长的描述性的语言 文字 文字 文字
      <div class="c_table">
      	<table>
      		<tbody>
      			<tr>
      				<td class="wrap">文字</td>
      			</tr>
      		</tbody>
      	</table>
      </div>
      
    5. 默认高度

      当表格没有数据时,给出一个默认的高度,减小数据加载时的页面变化程度。设置了滚动条的表格,不需要设置默认高度。

      表头 表头 表头 表头
      <div class="c_table c_table-row-5">
      	<table>
      		<tbody>
      			<tr>
      				<td>单元格</td>
      			</tr>
      		</tbody>
      	</table>
      </div>
      

      “c_table-row-5” 中的数字代表默认高度占据的行数,支持 3、5、10、15、20。

    6. 表格树

      ECL 参数 参数说明
      元素    
      组件    
      标题栏    
      表格    
      基础外观    
      偶数行 even 区分奇偶行,方便用户查看单行数据。
      选定行 on 选择某一行,指定后续操作对象。
      强调行 strong 强调区分显示某一行。
      自动换行 wrap 需要一目了然地显示多行文本信息时,使单元格支持换行。应当尽量避免使用多行文字信息,必要时采取点击查看详情的方式来处理。
        某一节点进入编辑状态请使用 e_input。
      树状结构菜单    
      列表    
      分页标签    
      表单    
      布局    
      <div class="c_table">
      	<table>
      		<tbody>
      			<tr>
      				<td class="level level-1">
      					<a href="#nogo" class="ico"></a>
      					<input type="checkbox" class="e_checkbox" />
      					<a href="#nogo" class="text">节点</a>
      				</td>
      			</tr>
      		</tbody>
      	</table>
      </div>
      

      表格树继承了表格与树的特点,只是结构上和树的设置不一样,参数方面均已继承。

    7. 单列表格

      标题信息
      附加信息1
      附加信息2
      [99008080] 关爱宝 - 每月赠送35元
      2012-09-14 ~ 2013-09-14
      2012-09-14 ~ 2013-09-14
      目前移动各营业厅正在推广一种儿童机,在外观设计上非常卡通,很适合儿童使用,别看这款手机外观简单,却是不折不扣的手机里的“高智能机”!能远程开关机,只能与父母通话,还可实现准确定位,功能相当强悍。
      <div class="c_table">
      	<table>
      		<tbody>
      			<tr>
      				<td class="pic"><img src="img/pic.png" /></td>
      				<td class="li">
      					<div class="fn">
      						<button type="button"><span>功能1</span></button>
      						<button type="button"><span>功能2</span></button>
      					</div>
      					<div class="title">标题信息</div>
      					<div class="info">
      						附加信息1
      					</div>
      					<div class="info">
      						附加信息2
      					</div>
      				</td>
      				<td class="check"><input type="checkbox" class="e_checkbox" /></td>
      			</tr>
      		</tbody>
      	</table>
      </div>
      

      单列表格参数方面均继承表格。

    8. 排序标识

      1. 顺序

        表头 表头 表头 表头
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        <div class="c_table">
        	<table>
        		<thead>
        			<tr>
        				<th class="desc"><span>表头</span></th>
        			</tr>
        		</thead>
        		<tbody>
        			<tr>
        				<td>单元格</td>
        			</tr>
        		</tbody>
        	</table>
        </div>
        
      2. 倒序

        表头 表头 表头 表头
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        单元格 单元格 单元格 单元格
        <div class="c_table">
        	<table>
        		<thead>
        			<tr>
        				<th class="asc"><span>表头</span></th>
        			</tr>
        		</thead>
        		<tbody>
        			<tr>
        				<td>单元格</td>
        			</tr>
        		</tbody>
        	</table>
        </div>
        
    9. 拖曳表头时的触发点设置请将鼠标悬移在任一表头的最左侧测试效果

      表头 表头 表头 表头
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      <div class="c_table">
      	<table>
      		<thead>
      			<tr>
      				<th><span class="slip"></span>表头</th>
      			</tr>
      		</thead>
      		<tbody>
      			<tr>
      				<td>单元格</td>
      			</tr>
      		</tbody>
      	</table>
      </div>
      
    10. 拖曳表头时的目标位置

      表头 表头 表头 表头
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      <div class="c_table">
      	<table>
      		<tbody>
      			<tr>
      				<td>单元格</td>
      			</tr>
      		</tbody>
      	</table>
      	<div class="target" style="left:120px; height:133px;"></div>
      </div>
      

      【注】目标位置的高度和位置需要自行设置。

    11. 加入下拉按钮

      表头 表头 表头 表头
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      单元格 单元格 单元格 单元格
      <div class="c_table">
      	<table>
      		<thead>
      			<tr>
      				<th><span>表头</span></th>
      			</tr>
      		</thead>
      		<tbody>
      			<tr>
      				<td>
      					<a href="#nogo" class="select"></a>
      					单元格
      				</td>
      			</tr>
      		</tbody>
      	</table>
      </div>