API Docs for: 0.2
Show:

JC.TableFreeze Class

TableFreeze 表格固定指定列功能

require: JC.BaseMVC

JC Project Site | API docs | demo link

页面只要引用本文件, 默认会自动初始化div为class="js_compTableFreeze"下的表格

目前不支持带有tfooter的表格。如果表格带有tfooter,tfooter部分的内容会被清空

可用的 HTML attribute

freezeType = string
声明表格列冻结的类型:

prev:左边的列固定,其他滚动

next:右边的列固定,其他滚动

both:两边的列固定,其他滚动

freezeCol = string
声明表格要冻结的列数:

0:全部滚动,不冻结

列表数目:全部冻结, 不滚动

num,num:freezeType为both时,第一个数字表示前面冻结的列数
第二个数字表示后面冻结的列数。
当两个数字加起来等于列数时,表示全部冻结,不会出现有滚动的列。

scrollWidth = num
声明表格滚动部分的宽度,默认120%
needHoverClass = true|false
声明表格行是否需要鼠标hover高亮效果:

默认值为true

alternateClass = string
声明表格索引值为奇数行的背景色的className: (表格行隔行换色)

如果为空则不指定隔行背景色

beforeCreateTableCallback = function
表格创建前, 触发的回调, window 变量域
function beforeCreateTableCallback( _selector ){
   var _ins = this;
   JC.log( 'beforeCreateTableCallback', new Date().getTime() );
}
afterCreateTableCallback = function
表格创建后, 触发的回调, window 变量域
function afterCreateTableCallback( _selector ){
   var _ins = this;
   JC.log( 'afterCreateTableCallback', new Date().getTime() );
}

Constructor

JC.TableFreeze

(
  • _selector
)

Parameters:

Example:

   <script>
       JC.debug = true;
       JC.use('TableFreeze');
   </script>
   <dl class="defdl">
       <dt>TableFreeze example</dt>
       <dd>
           <dl>
               <dd>
                   <div class="js_compTableFreeze" freezeType="prev" freezeCols="2" />
                       <dl>
                           <dd>
                               <table >
                                   <thead>
                                       <tr>
                                           <th > 
                                               item0
                                           </th>
                                           <th >
                                               item1
                                           </th>
                                           <th >
                                               item2
                                           </th>
                                           <th >
                                               item3
                                           </th>
                                           <th >
                                               item4
                                           </th>
                                       </tr>
                                   </thead>
                                   <tbody>
                                       <tr>
                                           <td rowspan="3">
                                               col01
                                           </td>
                                           <td class="breaklw" >
                                               我的我的我的我的我的我的我的我的我的
                                           </td>
                                           <td rowspan="2" colspan="2">
                                               col02
                                           </td>
                                           <td>
                                               col04
                                           </td>
                                       </tr>
                                       <tr>
                                           <td >
                                               col11
                                           </td>
                                           <td >
                                               col14
                                           </td>
                                       </tr>
                                         <tr>
                                           <td>
                                               col21
                                           </td>
                                            <td colspan="3">
                                               col22
                                           </td>
                                       </tr>
                                       <tr>
                                           <td>
                                               col30
                                           </td>
                                           <td rowspan="2">
                                               col31
                                           </td>
                                            <td>
                                               col32
                                           </td>
                                            <td>
                                               col33
                                           </td>
                                           <td rowspan="2">
                                               col34
                                           </td>
                                       </tr>
                                       <tr>
                                           <td>
                                               col40
                                           </td>
                                            <td>
                                               col42
                                           </td>
                                            <td>
                                               col43
                                           </td>
                                       </tr>
                                   </tbody>
                               </table>
                           </dd>
                       </dl>
                   </div>
               <dd>
           </dl>
       </dd>
   </dl>

Methods

_beforeInit

() private

初始化之前调用的方法

_init

(
  • _selector
)
private

内部初始化方法

Parameters:

  • _selector Selector

_inited

() private

内部初始化完毕时, 调用的方法

_initHanlderEvent

() private

内部事件初始化方法

getInstance

(
  • _selector
)
TableFreezeInstance static

获取或设置 TableFreeze 的实例

Parameters:

  • _selector Selector

Returns:

TableFreezeInstance:

init

(
  • _selector
)
Array of TableFreezeInstance static

初始化可识别的 TableFreeze 实例

Parameters:

  • _selector Selector

Returns:

Array of TableFreezeInstance:

notification

(
  • _evtName
  • _args
)

通知选择器有新事件
JC 组件以后不会在 HTML 属性里放回调, 改为触发 selector 的事件

Parameters:

notificationHandler

(
  • _evtName
  • _args
)

通知选择器有新事件, 有返回结果
JC 组件以后不会在 HTML 属性里放回调, 改为触发 selector 的事件

Parameters:

Returns:

:

on

(
  • _evtName
  • _cb
)

使用 jquery on 绑定事件

Parameters:

Returns:

BaseMVCInstance

selector

()

获取 显示 BaseMVC 的触发源选择器, 比如 a 标签

Returns:

selector

trigger

(
  • _evtName
  • _args
)

使用 jquery trigger 触发绑定事件

Parameters:

Returns:

BaseMVCInstance

triggerHandler

(
  • _evtName
  • _args
)

使用 jquery triggerHandler 触发绑定事件

Parameters:

Returns:

: