伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:UI-图表
 11157  60  查看评论 (18)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容8
更新时间:2017/9/30 下午11:19:40更新说明:修复ajax模式在不传递maxHeight参数时两侧固定列高度计算不出来的bug

fixedTable

jQuery伟德BETVICTOR模式jQuery伟德BETVICTOR模式指的是表格的dom结构一加载就已经存在,表格里的数据由后端语言(Java、PHP、node.js等)直接填充!需要引入的资源:<link rel="stylesheet" href="css/fixed-table.css" /> <script src="jquery-1.11.3.min.js"></script> <script src="js/fixed-table.js"></script>fixedTable$(".fixed-table-box").fixedTable() => $(".fixed-table-box")对象调用fixedTable()方法后FixedTable才能有效! 查看demogetRow$(".fixed-table-box").getRow(row) => 包含多个对象的数组row {索引、dom对象,jQuery实例}[必填] row参数可以为表格主体行、两侧固定列中的行的数字索引、dom对象,jQuery对象,无论是否能获取到行都会返回一个数组。 返回的数组内容格式如下:查看demo[     {         bodyRow: tr,//表格主体中的行         leftFixedRow: tr,//左侧固定列的行         rightFixedRow: tr//右侧固定列的行     } ]addRow$(".fixed-table-box").addRow(rows) => $(".fixed-table-box")对象rows {html字符串、dom对象、jQuery实例、function}[必填] 如果rows为一个function,则该function必须return html字符串或dom对象或jQuery实例addRow()方法是为了方便动态的添加一行而添加的一个方法,如果不调用此方法,自己用js添加一行也是可以的。但是如果有两侧的固定列那么就需要做很多事情了,1:除了给表格主体添加行外还需要给两侧的固定列添加相同的行;2:如果表格没有垂直滚动条,并且有两侧固定列,那么你还需要手动去计算两侧固定列的高度deleteRow$(".fixed-table-box").deleteRow(rows) => $(".fixed-table-box")对象rows {html字符串、dom对象、jQuery实例、function}[必填] 如果rows为一个function,则该function必须return html字符串或dom对象或jQuery实例deleteRow()方法与addRow()方法类似,在删除了表格主体中指定的行后,如果有固定列,则会同时删除固定列中对应的行,并且计算固定列的高度 查看demoemptyTable$(".fixed-table-box").emptyTable(rows) => $(".fixed-table-box")对象emptyTable()可以清空表格的所有数据(表头部会清空),如果有固定列则固定列的内容也会被清空,同时会计算固定列的高度calFixedColHeight$.calFixedColHeight($(".fixed-table-box")) => $(".fixed-table-box")对象 $.calFixedColHeight()可以用来计算两侧固定列的高度calFixedTableWidth$.calFixedTableWidth($(".fixed-table-box")) => $(".fixed-table-box")对象$.calFixedTableWidth()可以用来计算表格的实际宽度,如果table的父容器宽度是固定的,而table的宽度为auto,那么table的每一列都会自动调整宽度,并且表格显示的最大宽度就是其父容器的宽度,如果要实现可以横向拖动表格则必须设置表格的宽度为表格的实际宽度。getScrollWidth$.getScrollWidth() => 滚动条的宽度 $.getScrollWidth()可以用来获取浏览器滚动条的宽度(这个宽度指的是垂直滚动条的宽度)isIE$.isIE() => true/false $.isIE()可以用来判断浏览器是否是IE浏览器ajax异步模式ajax模式指的是表格的dom结构完全由js动态生成,表格内容也由js动态填充。需要引入的资源:<link rel="stylesheet" href="css/fixed-table.css" /> <script src="jquery-1.11.3.min.js"></script> <script src="js/FixedTable.js"></script>

参数配置

  • wrap{select、dom、jQuery Object} [必填] [默认: null] 动态生产的table需要添加到哪个元素中
  • type{string} [可选] [默认: "row-col-fixed"] 表格的类型,可选的值有head-fixed(表头固定)、col-fixed(列固定)、row-col-fixed(列固定,可横向拖动)
  • fields{Array} [必填] [默认: [] ] 表格的表头.该参数必须是一个数组,数组中包含n个对象,对象的具体内容如下:
 [{      class: "", //需添加在列上的class      width: "150px", //列的宽度      /*列显示的值。field可以是普通字符串,当field是普通字符串的时候会自动生成th然后将field的值赋值过去。      为了让表头也可以更加灵活field的值也可以是HTML代码,当field的值是HTML代码时htmlDom必须为true*/      field: "日期",      /*htmlDom表示传递的field是否是HTML字符串。如果htmlDom为true则表示field的值是html字符串,在htmlDom为      true的情况下传递的class、width、fieldId等参数都将失效。*/      htmlDom: false,      fieldId: , //当前列的id      fixed: false, //当前列是否固定      fixedDirection: "" //如果是固定列,则该列的方向是在左边还是在右边。值可以为left、right。默认left  }]
  • extraClass{string} [可选] [默认: ""] 需要添加到表格中的额外class
  • hoverClass{string} [可选] [默认: "rowHover"] 鼠标移入表格中的每一行时添加的class,鼠标移出表格时会移除该class
  • maxHeight{number} [可选] [默认: 0] 设置表格两侧固定列的最大高度,设置最大高度后可以随着表格主体内容上下滚动,它的值必须为number,如果不传递该参数则会自动计算
  • tableDefaultContent{html string、dom、jQuery Object} [可选] [默认: ""] 表格数据还未添加进来时显示的默认内容
  • onHover{Function} [可选] [默认: function (){}] 当鼠标移入到表格的每一行的时候执行的函数
  • init{function} [可选] [默认: function (){}] 表格初始化完毕后执行的函数
addRownew FixedTable({...}).addRow(rows) => 当前FixedTable实例对象rows {html字符串、dom对象、jQuery实例、function}[必填] 如果rows为一个function,则该function必须return html字符串或dom对象或jQuery实例addRow()方法可以为表格动态的添加一行或多行,如果表格有固定列,固定列也会添加相应的行,并且会重新计算固定列的高度deleteRownew FixedTable({...}).deleteRow(rows) => 当前FixedTable实例对象rows {html字符串、dom对象、jQuery实例、function}[必填] 如果rows为一个function,则该function必须return html字符串或dom对象或jQuery实例deleteRow()方法与addRow()方法类似,在删除了表格主体中指定的行后,如果有固定列,则会同时删除固定列中对应的行,并且计算固定列的高度 查看demogetRownew FixedTable({...}).getRow(row) => 一个对象row {索引、dom对象,jQuery实例}[必填] row参数可以为表格主体行、两侧固定列中的行的数字索引、dom对象,jQuery对象,无论是否能获取到行都会返回一个对象。 返回的对象内容格式如下:查看demo{     bodyRow: tr,//表格主体中的行     leftFixedRow: tr,//左侧固定列的行     rightFixedRow: tr//右侧固定列的行 }emptynew FixedTable({...}).empty(rows) => 当前FixedTable实例对象emptyTable()可以清空表格的所有数据(表头部会清空),如果有固定列则固定列的内容也会被清空,同时会计算固定列的高度
相关伟德BETVICTOR-图表

layui使用datatableajax请求json渲染数据

基于layui,datatable.js。将datatable扩展成可以使用layui的调用方式调用的伟德BETVICTOR。当然如果想单独使用的话,将layui扩展去掉即可,可自行百度layui。
  图表
 21641  80

支持ie8的圆形统计比例图

动态统计,支持ie8以及以上版本的ie浏览器,其他的浏览器
  图表
 24816  113

jquery 表行列固定

支持表格行列固定和排序兼容所有浏览器
  图表
 29241  181

冻结表头

冻结表头 实现表头的冻结效果
  图表
 21096  94

讨论这个项目(18)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    风之殇 0
    2018/1/18 16:29:02
    有没有实现一二列和第五列固定的方法 回复
    ?蒌周 0
    2017/12/27 10:43:27
    列宽对不齐,修改如下 回复
    高华丽 0
    2017/11/21 14:11:34
    获取表格的宽度这一块都是怎么改的? 回复
    (⊙o⊙) 0
    2017/11/6 23:52:37
    滑到最右边会对不齐啊、
        xta fnhc tewq0
        2017/11/9 21:03:59
        恩,确实有这个情况,之前我也去想过解决方法,但都不理想,目前我没有找到很好的解决办法
        我是你的Wifi0
        2018/1/26 11:55:17
        设置一下右边滚动条的宽度位置什么的吧. 目测对不齐的原因就是因为右边滚动条的宽度
    回复
    潘友清 0
    2017/10/19 17:03:19
    目前这个是单行的表头,如果是多行的表头,需要跨行,跨列的怎么办
        xta fnhc tewq0
        2017/10/26 17:46:28
        这个有待以后实现
        瑾瑜0
        2017/11/29 21:59:55
        我也是这个问题,还要支持点击表头排序
    回复
    潘友清 0
    2017/10/19 15:52:22
    有个问题,就是表内容的边框和表头的边框线没对齐,请看left-fixed.html这个页面,然后将X轴的滚动拖动到最右边,然后看下 "地址\邮编\操作"这3个字段,望修复,谢谢
        xta fnhc tewq0
        2017/10/26 17:53:32
        这个问题我之前也发现了,也找到了解决办法。在表头的末尾加上一个th,设置这个th的宽度为滚动条的宽度,但这又会出现另一个问题:滚动条在最左端时表格内容的边框与表头的边框又会出现不对齐的现象。所以你说的这个问题我还没找到好的解决方法
    回复
    0
    2017/10/18 20:14:25
    666.慢慢研究,很好的伟德BETVICTOR 回复
    0
    2017/10/17 17:30:05
    lostdream 0
    2017/10/12 16:32:50
    觉得好的可以去百度一下elementUI,这个伟德BETVICTOR应该是扒的源码中的一部分。
        xta fnhc tewq0
        2017/10/13 10:27:32
        对的,不过不是扒的element ui的源码,是觉得他那个效果非常好,解决了表格的一个痛点,然后我就把这部分功能单独写出来了
    回复
    让我感激你、曾予我欢颜 0
    2017/9/13 11:49:44
取消回复