首页 > 其他分享 >layui表格中关键字加粗加红显示

layui表格中关键字加粗加红显示

时间:2023-09-21 16:25:49浏览次数:45  
标签:加红 sort false keyword title layui field 加粗 table

使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

相关文章

  • 使用layui写多个下拉选项框
    文件 css  <linkrel="stylesheet"href="https://unpkg.com/[email protected]/dist/css/layui.css">js  <scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  <scriptsrc=&q......
  • LayUI
    CSS类(Class)layui-elem-quotelayui-textlayui-elem-fieldlaytui-field-titlelayui-formlaytui-form-itemlaytui-form-labellaytui-input-blocklayui-inputlayui-inlinelayui-form-midlayui-word-auxlayui-form-textlayui-textarea......
  • layuiadmin(官方)知识点
    动态模板layuiAdmin的视图是一个“动静结合”的载体,除了常规的静态模板,你当然还可以在视图中存放动态模板,因此它可谓是焦点中的焦点。定义模板在视图文件中,通过下述规则定义模板:<scripttype="text/html"template><!--动态模板碎片--></script>下面是一个简单的例子:<scri......
  • 基于springboot+LayUI的校园信息发布平台
    系统使用技术:springboot前端技术:LayUI、css、js等开发工具:idea数据库:mysql5.7项目介绍:本系统是一个类似于论坛的信息发布平台,采用MVC三层架构和rest风格URL,后端使用SpringBoot框架,前端采用LayUI框架+freemarker动态模板生成,数据库使用mysql,开发工具采用idea,jdk采用1.8。系统实现了......
  • Layui-select 下拉框实现拼音全拼匹配/首字母模糊搜索
    Layui中搜索选择框搜索汉字不管用解决方案基于layui2.5.3首先贴上原创作者的文章地址,非常感谢他的思路Layui-select下拉框实现拼音全拼匹配/首字母模糊搜索最近做项目的时候引用了layui并使用了本文作者的方法解决了我得问题,但是由于需要使用layui新版的tree.js,发现不......
  • 前端歌谣的刷题之路-第六题-加粗文字
     目录前言题目核心代码编辑运行结果前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于......
  • mvc+layui上传视频
     一、 视频上传1、 前端:<div class="layui-container">    <div class="layui-row">        <div class="layui-col-md6">            <div class="layui-upload">                <button type="......
  • vue-treeselect 校验失败添加红框
    需求vue-treeselect校验及清除校验这篇介绍了用@input在校验失败时显示校验信息。但还需要同时显示红色边框。如下图所示:解决办法思路:动态绑定类名,校验失败时切换类名,更改边框颜色。子组件SelectTree二次封装vue-treeselect:组件SelectTree<template><divclass=......
  • layui-form 提交按钮不生效
    layui-form提交按钮不生效有时候layui-form不生效是因为div的层级关系错误造成的,比如把提交按钮放在了div的外部了;欢迎关注公-众-号【TaonyDaily】、留言、评论,一起学习。Don’treinventthewheel,librarycodeistheretohelp.文章来源:刘俊涛的博客若有帮助到您,欢迎点赞、......
  • layui - table 回填 - 相关
    table.render({elem:'#userTable',url:'../sysRole/getUserList',title:'用户列表',page:true//开启分页,cols:[[{type:'checkbox'},{......