使layui表格中根据关键词进行加红加粗显示,先看效果
前台代码
<script tab="table处理及事件">
var table = layui.table;
layui.use(['table'], function () {
table.render({
id: 'ID-table-news',
elem: '#ID-table-news',
url: '/newslist_xj',
method: 'post',
cols: [[
{ field: 'id', fixed: 'left', maxWidth: 50, title: 'ID', sort: false },
{
field: 'title', title: '标题', sort: false, templet: function (d) {
var keyword = $('#input_id_keyword').val().trim();
if (keyword == "")
return d.title;
var keyword_red = '<b style="color:red;" >' + keyword + '</b>';
return d.title.replace(keyword, keyword_red);
}
},
{ field: 'source', title: '来源', sort: false },
{ field: 'date', minWidth: 160,title: '日期', sort: true },
{ field: 'category1', title: '分类1', sort: false },
{ field: 'category2', title: '分类2', sort: false },
{ field: 'content', title: '内容', sort: false },
{ fixed: 'right', title: '操作', maxWidth: 80, toolbar: '#ID-table-news-delete' }
]],
page: true
});
});
</script>
代码解析
这里使用到了自定义模板的模板 - 函数写法
在title
列中添加templet
函数里先获取当前查询的关键词,如果为空,则直接返回标题,不为空,则把标题中的关键词替换为组建好的html标签返回就可以了。这里也可以用mark高亮显示。
标签:加红,sort,false,keyword,title,layui,field,加粗,table From: https://www.cnblogs.com/xujiecnblogs/p/17720228.html