table数据表格灵活获取当前点击行数据以及当前点击单元格、行索引

分享 已结 7 4853
TangHanF
TangHanF 2018-4-10
悬赏:20飞吻
现在我们获取当前行数据一般是通过加一个checkbox复选框的方式获取选中行数据,又或者加一个toolbar行内工具进行事件监听获取数据,如果说现在有这个一个需求:不要复选框,且能够获取双击鼠标所在整行数据、双击时所在在单元格数据(为了灵活加了这一个数据返回。我们知道,当鼠标点击某一行数据,必然会落在某一行单元格内,我现在要做的就是既要返回行数据,又要精确的返回是哪个单元格触发了行)。

同时我还会返回表格当前页的数据集合,此集合包含了表格的每行数据,以及每行数据对应的每个单元格数据、所在td的DOM对象,所在tr的DOM对象。这样做有什么用呢?首先可以灵活获取自己想要的数据,其次有了相应的DOM的对象,你就可以自行设置样式,甚至精确度达到单元格,例如根据某一条件设置行高亮显示,或者设置某一单元格显示。当然了,有些功能可以使用layui的数据表格的设置单元格样式处理(参考: http://www.layui.com/demo/table/style.html )但是行处理好像比较麻烦。为了解决这个问题才又做了一点工作,所有相关数据返回给你们,你们自行处理,因此灵活性就更强了

具体代码正在整理中,此处先了解一下这个需求有无必要,先上个效果图:
说明:此表格数据由社区社友 @潢隆大侠 提供,此处表示感谢!


同时,以上对于【竞猜数量】大于30的行进行了高亮显示!


文档已更新, 点击此处直达
回帖
  • 有具的代码吗?
    0 回复
  • 这种方法过于繁琐,直接用官方提供的方法,获取obj,调用他的obj.tr[0].rowIndex便可获取所以,obj便是数据
    1 回复
  • TangHanF
    2018-4-15
    如需帮助,联系微信:g992470084 共同交流!
    0 回复
  • TangHanF
    2018-4-18
    @有所思111 都在Github上。本帖子最后面有直达链接
    0 回复
  • @TangHanF 谢谢
    0 回复
  • @我是太阳 问一下,官方的那个方法,可以获取到啊?
    0 回复
  • stock2
    2019-3-6
    @我是太阳
    请问怎样知道 rowIndex的? 我在2.45版本里, console.log(obj); 没有看到这个属性
    我用的是笨办法. obj.tr.selector.split('"')[1];//得到当前 id行
    打印了代码 obj 详细 查看了代码
    0 回复