JS Layui table 选中行颜色变化、自动换行以及翻页后查不到数据问题

1.table选中行颜色变化

table设置lay-filter属性

<table id="dataList" lay-filter="dataList"></table>

监听单击行事件

layui.table.on("row(dataList)",function(obj){
    $(".layui-table-body .layui-table tr").attr({"style":"background:#FFF"});    //其它tr恢复原样(必须在前)
    $(obj.tr.selector).attr({"style":"background:#FFE48D"});    //改变当前tr颜色(必须在后)

  // 附加功能:选中行自动勾选上
  obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
  obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");
});

效果

 2.table自动换行

添加css

.layui-table-cell{
        height:auto;
        white-space:normal;
        word-wrap:break-word;
    }

 3.table有多页时,翻页后搜索不到数据问题

在 table.reload 或 table.reloadData 方法 options 参数中增加 page:{curr:1} 即可,如: layui.table.reloadData("dataList",{data:retData.data, page:{curr:1}});

4.table获取当前行数据

在done属性方法中自定义获取当前行数据的方法。

done: function(){
    //自定义:获取当前行数据方法
    var options = this;
    layui.table.getRowData = function(elem){
        var index = $(elem).closest('tr').data('index');
        return layui.table.cache[options.id][index] || {};
    };
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要让layui table表头宽度小自动换行,可以通过设置CSS样式来实现。具体方法如下: 1. 找到表头所在的元素,一般是class为layui-table-box的div。 2. 给这个元素设置CSS样式:white-space: normal; word-break: break-all;。 3. white-space属性用于设置如何处理元素中的空白符,normal表示使用浏览器默认的处理方式。 4. word-break属性用于设置在什么位置断开单词换,break-all表示在任意字符处换。 完整的CSS样式如下: ``` .layui-table-box { white-space: normal; word-break: break-all; } ``` 这样设置之后,表头的内容就可以根据内容自动换行了。 ### 回答2: 在Layuitable组件中,默认情况下,表头的宽度是根据内容自动调整的,当表头的内容过长时,会自动换行显示。为了保证表头的内容完整显示,可以通过设置表头的CSS样式来控制宽度和换。 首先,可以通过设置表头单元格的宽度来限定表头的宽度。可以使用CSS中的`width`属性来设置单元格的宽度,例如: ```css th { width: 100px; } ``` 通过设置单元格的宽度,可以控制表头的宽度,避免内容过长而导致的换显示。 另外,如果单元格中的内容仍然过长,可以通过设置表头单元格的`white-space`属性来实现自动换行。可以使用CSS中的`white-space: normal;`属性来实现自动换行,例如: ```css th { white-space: normal; } ``` 通过设置`white-space`属性为`normal`,当表头内容过长时,会自动进显示。 综上所述,可以通过设置表头单元格的宽度和使用`white-space`属性来控制表头的宽度和自动换行。在CSS中使用类似以下的样式设置: ```css th { width: 100px; white-space: normal; } ``` 这样就可以实现在Layuitable中,当表头的宽度小于内容时,自动换行显示。 ### 回答3: Layui是一款前端开发框架,其中的table组件可以用来展示数据表格。在Layuitable中,如果表头的宽度过小,会导致文字无法完整显示,而自动换行可以解决这个问题。 实现表头宽度小自动换行的方法如下: 1. 设置表头的宽度:在Layuitable中,可以通过设置colspan属性来调整表头的宽度。根据表格的具体布局调整colspan的值,使其适应表头所需的宽度。 2. 使用CSS样式:可以通过设置CSS的样式来解决表头过窄导致文字无法完整显示的问题。可以使用"white-space: normal;"属性来实现表头文字自动换行。 3. 调整表格布局:如果上述方法仍然无法解决问题,可以尝试调整表格的整体布局,例如增加表格的宽度或减少表头的字数。 总的来说,要实现Layuitable表头宽度小自动换行,可以通过设置表头的宽度,使用CSS样式来自动换行,并根据需要调整表格的整体布局。这样就可以确保表头宽度足够大,同时在表头文字过多时自动换行,完整显示文字内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值