基于bootstrap,jQuery 的表格插件

使用方式

• 引入代码库,开发时使用less和typescript，线上可使用css和js

<link rel="stylesheet/less" type="text/css" href="itable.less" />
<script src="./less.min.js"></script>
<script src="jquery.js" charset="utf-8"></script>
<script src="itable.js" charset="utf-8"></script>

• html 结构:

<div id="myTable" style="overflow:auto;">

    </div>

• JS 调用组件并传参：

var option = {
    tableId:'demoTable',
    data: data,
    columns: columns,
    freezeHead: true,
    freezeColumn: true,
    getUniqueId: function (rowData) {
      return rowData.id;
    },
    width: 1500,
    handleTdClick:function(rowId,cellIndex ,td){
      console.log(rowId);
      
    }
  };
var itable = $('#myTable').itable(option);
itable.render();

返回的实例可继续调用方法

• 预览

用服务器打开 index.html 可以看到综合示例

配置项 option

名称	类型	必填	含义
tableId	string	yes	创建表格后给表格的ID，如果是固定列的情况，会存在左右两个表格，id为 tableIdleft 和 tableIdright
name	string	no	插件内部用来区分左右表格，在固定列的情况出现
data	array	yes	数据项数组，数据项为一个对象，每个字段对应一个单元格
columns	array	yes	列定义，详细见下方列定义
freezeHead	boolean	no	是否冻结头部,默认false
freezeColumn	boolean	no	是否冻结列，如果在columns中有列为冻结列，那么需要明确指定为true，默认false
width	number	no	表格容器的宽度，表格的宽度始终是100%,如果有指定本属性，则应用到容器上,否则容器也是100%
getUniqueId	string或function	no	返回一行的唯一标识,如果是字符串，则代表该行的唯一列名称，比如指定 "id"，则改行的 "id" 列的数据作为唯一标识,如果是函数，则函数的返回值作为唯一标识，每行都会运行这个函数,如果不指定，使用系统默认函数，默认函数为该行的所有Value 的字符串拼接
cancelActiveRow	boolean	no	是否可以通过再次点击活跃行来取消该行的活跃状态，默认false
clickMeansActive	boolean	no	单击行变成活跃行，默认false
activeScrollDuration	number	no	滚动到活跃行动画持续的时长，如果为0，则不执行动画，直接跳，毫秒
activeRowBgColor	string	no	活跃行背景颜色
dblClickMeansLock	boolean	no	双击行变成锁定行，默认false
flashWhenUpdate	boolean	no	数据更新时，单元格是否闪光，这可以提示用户到底哪儿变了
scrollWhenAppend	boolean	no	append 数据时，表格是否自动滚动到底部
virtualRender	boolean	no	是否开启虚拟渲染，适用于数据量较大的场景
visibleRowsCount	number	no	如果开启了虚拟渲染，一直可见的行数
scrollThreshold	number	no	如果开启了虚拟渲染，滚动多少条数据触发加载下一批次数据
trHeight	number	no	行高
handleScroll	function	no	处理滚动事件,(scrollValue: number) => void
handleEnter	function	no	处理鼠标悬浮事件，确定当前左右表格哪个是活动表格,(name: string) => void
handleSort	function	no	处理排序事件,(sortColumnIndex: number, sortDirection: 'ascend'|'descend') => void
handleTdHover	function	no	处理鼠标悬浮td事件,(rowIndex: number, cellIndex: number, td?:JQuery<Node[]>) => void
handleThHover	function	no	处理鼠标悬浮th事件,(cellIndex: number, th?:JQuery<Node[]>) => void, 可通过 th.data('name') 获取列的name
handleTdClick	function	no	处理鼠标点击td事件,(rowId: string, cellIndex: number ,td?:JQuery<Node[]>) => void
handleTdDblClick	function	no	(rowId: string, cellIndex: number, td?:JQuery<Node[]>) => void

columns 列定义

名称	类型	必填	含义
title	string	yes	标题
name	string	yes	字段名称，根据这个到data中取值
isFrozen	boolean	no	是否冻结
resizable	boolean	no	是否可伸缩
isSequence	boolean	no	是否序号列,如果有其他冻结列，序号列也必须为冻结列
sorter	boolean|function	no	是否排序，或者指定排序函数,(a: Value, b: Value) => number
sortDirections	array	no	排序顺序，升降序,'ascend' 和'descend'的数组
defaultSortOrder	string	no	默认按 'ascend' 还是 'descend' 排序
width	number|string	no	宽度，数值代表像素，字符串代表百分比
maxWidth	number	no	最大宽度
minWidth	number	no	最小宽度
render	function	no	渲染函数,默认调用 toString() 显示

方法

名称	定义	含义
setOption	(optionsParam: Options, $this?: JQuery)=>void	设置配置项
getOption	()=>Options	获取配置项
getState	()=>State	获取内部状态
updateOptionData	(row:Row)=>void	更新一行option data,同时更新option data,根据 id 查找需要更新的数据, 同时更新dom渲染，是更新，不是 重绘，也就是不会调用 render 方法
replaceOptionData	(data: Array) => void	替换option data,同时替换state data
appendOptionData	(row: Row) => void	向option data 末尾添加一条数据,触发重新渲染,同时更新state data
appendOptionData	(row: Row) => void	向option data 末尾添加一条数据,触发重新渲染,同时更新state data
prependOptionData	(row: Row) => void	向option data 头部添加一条数据,触发重新渲染,同时更新state data
deleteOptionData	(id:string)=>void	删除一行，触发重新渲染,并同时删除options和state中的数据
setActiveRow	(id:string)=>void	设置活跃行,活跃行背景蓝色
setLockedRow	(id:string)=>void	设置锁定行，锁定行背景黄色，并置顶
updateStateData	(data: Array) => void	更新state data,目前可能由排序触发，未来也许会添加筛选功能，也能触发
render	() => void	渲染表格数据
destory	(withChild:boolean) => void	销毁dom内容，引用