layui 表格某一列显示图标

最新推荐文章于 2023-02-06 10:09:11 发布
最新推荐文章于 2023-02-06 10:09:11 发布
阅读量4.4k 收藏 3
点赞数
分类专栏： Layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/charmingdang/article/details/82224598
版权

加个图标 设备状态是不是一目了然   在线设备往前排

{
   field: 'DevID', title: '设备ID', templet: function (d) {

        return d.iso == "1" ? "<i class='layui-icon' style='color:green;margin-right:5px'>&#xe617;</i>" + d.DevID : "<i class='layui-icon' style='color:red;margin-right:5px'>&#xe617;</i>" + d.DevID;
           }
   }

 

 

CharmingDang
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
layui 实现表格某一列显示图标
10-16
今天小编就为大家分享一篇layui 实现表格某一列显示图标的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui怎么给表头添加图标，通过点击后自动填充
weixin_40362806的博客
03-10 806
layui给表头添加图标，通过点击后自动填充
layui 给table里面的添加图标_layui怎么添加icon图标？
weixin_35436993的博客
12-31 1894
layui怎么添加icon图标？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库(iconfont)。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或...
layui数据表格自定义按钮样式
九亿宅男的梦的博客
08-27 4993
<table class="layui-hide" id="loadList" lay-filter="menu-filter" style=" margin: 0 10px;"></table> <script type="text/html" id="toolbtn"> <a class="" lay-event="down"><...
layui 给table里面的添加图标_layui教程---table
weixin_35811662的博客
01-27 1953
layui.config({base:"${ctx}/static/js/"}).use([‘form‘, ‘layer‘, ‘jquery‘, ‘common‘,‘element‘, ‘table‘, ‘laytpl‘], function() {$=layui.$;var $ =layui.$,form=layui.form,common=layui.common,laydate=layui....
layui 给table里面的添加图标_layui中的table中toolbar自定义过程
weixin_35906775的博客
01-13 1705
自己挖过的坑需要自己来填。layui的table默认表头工具栏右边有3个操作，分别是过滤字段、导出excel、打印功能。在js中代码添加toolbar即可实现上面的效果：table.render({elem:‘#demo‘,height:420,url:‘/demo/table/user/‘ //数据接口,title: ‘用户表‘,page:true //开启分页,toolbar: ‘defaul...
layui 表格操作列按钮动态显示的实现方法
10-16
今天小编就为大家分享一篇layui 表格操作列按钮动态显示的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui实现给某一列加点击事件
10-16
今天小编就为大家分享一篇layui实现给某一列加点击事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui实现数据表格隐藏列的示例
10-16
今天小编就为大家分享一篇layui实现数据表格隐藏列的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui表格动态添加|layui表格可编辑
08-24
layui表格动态添加|layui表格可编辑动态添加
在layui中如何向某单元格里面添加图标
weixin_44484756的博客
07-07 5995
我们接触到的layui表格大多数都是很单调的样式，就比如下面的第一张图片： 现在我就想在供应商的单元格中添加图标，效果图如下： 这种效果是怎么实现的呢？来看一下吧。 在layui表格中有一个很好用的函数，就是done回调函数，在done里面可以接收表格里面所有的数据，可以很方便我们获取值，并且也可以通过done来设置单元格的样式，或者表格的样式也可以用done来实现，那么来看一下done究竟是...
layui 给table里面的添加图标_用了5年苹果手机，才知道这个小汽车图标是什么意思，真是涨知识了...
weixin_36378951的博客
01-05 190
品牌宣传、产品推广，覆盖全国，日曝光量千万+，7500+公众号广告招商进行中，点击进入了解详情用了5年苹果手机，才知道这个小汽车图标是什么意思，真是涨知识了苹果手机在国内市场一直深受用户的喜爱，不止是因为iOS有多么流畅，还是因为苹果手机还有很多贴心实用的功能。比如苹果手机中有一特色功能：控制中心，该功能中有许多小图标，相信大家经常看见这些小图标。那你知道其中的小汽车图标是什么意思吗？笔...
layui添加第三方图标
佳佳鸽的博客
01-31 838
layui添加第三方图标
layui-icon各种常用动态图标
小熊猫
02-06 9175
buttonid="btnPrintDetail"class="layui-btnicon-btn">明细打印 icon很多，选择起来纷繁复杂，罗列一点常用的，用于自己以后使用~~AppleIOS苹果 。Android安卓 。上传-空心-拖拽 。消息-通知-喇叭 。添加-圆圈-细体 。
layui中table显示 图片
l_degege的专栏
11-26 1652
在table页面中加如下css .layui-table-cell{ text-align: center; height: auto; white-space: normal; } 注：https://blog.csdn.net/QYHuiiQ/article/details/82079361
C# Layui树形表格treetable（二）
Q_MingTao
05-15 1388
C# Layui树形表格treetable（二）（前台请求路径，后台json返回数据） 作者：邱名涛 撰写时间：2020 年05 月15日 需求：Layui树形表格treetable加上筛选功能，并且显示指定宿舍，对应的床位数，入住人数。 html <table class="layui-table" id="shushexxin" lay-filter="shushexxin"></table> js $(function() { var Se
layui table中的数据列中加入图片的上传和展示的例子
qq_41182238的博客
08-27 3112
layui table 中数据列中可点击按钮直接上传图片或者展示图片 这里直接展示代码(主要逻辑是要在table 加载时把upload 组件渲染在每一个格子) //table 列中模板的代码 <script type="text/html" id="imgTpl2"> #[[ <a href="javascript:void(0);" onclick="imgOpen('{{d.ID}}')" class="layui-table-link">查看</a>/
layui table 头部工具栏右侧图标隐藏，增加
hello_world_1996的博客
06-11 2430
defaultToolbar - 头部工具栏右侧图标 类型：Array，默认值：[“filter”,“exports”,“print”] 该参数可自由配置头部工具栏右侧的图标按钮，值为一个数组，支持以下可选值： filter: 显示筛选图标 exports: 显示导出图标 print: 显示打印图标 可根据值的顺序显示排版图标，如： defaultToolbar: ['filter', 'print', 'exports'] 可以无限扩展图标按钮（layui 2.5.5 新增）： table.rende
生成一个layui的树表格，第一列的标题是layui
最新发布
05-20
以下是生成一个layui树表格的代码，第一列的标题是"layui"： ```html <table id="treeTable" lay-filter="treeTable"></table> <script> layui.use(['treeTable'], function () { var treeTable = layui.treeTable; var data = [{ id: 1, title: '节点1', parentId: 0 }, { id: 2, title: '节点2', parentId: 1 }, { id: 3, title: '节点3', parentId: 1 }, { id: 4, title: '节点4', parentId: 2 }, { id: 5, title: '节点5', parentId: 2 }, { id: 6, title: '节点6', parentId: 3 }]; treeTable.render({ elem: '#treeTable', data: data, icon_key: 'title', is_checkbox: true, cols: [{ key: 'title', title: 'layui' }] }); }); </script> ``` 解释一下上面的代码： 首先，在HTML中我们定义了一个id为"treeTable"的表格，并且指定了lay-filter属性为"treeTable"，这样在后面的JavaScript代码中就可以通过这个lay-filter属性来操作这个表格。 接着，在JavaScript中，我们使用layui.use()方法引入了layui的treeTable模块，并在回调函数中通过treeTable.render()方法生成了一个树表格。在生成树表格的时候，我们传入了以下参数： - elem：表示要渲染的表格的选择器，这里我们传入了"#treeTable"，表示要渲染id为"treeTable"的表格。 - data：表示要渲染的数据，这里我们定义了一个包含6个节点的数据。 - icon_key：表示树形图标所在的字段，这里我们传入了"title"，表示每个节点的图标要根据它的标题来确定。 - is_checkbox：表示是否显示复选框，这里我们传入了true，表示所有节点都可以被选择。 - cols：表示表格的列，这里我们只定义了一列，它的key为"title"，title为"layui"，表示第一列的标题为"layui"。 最后，我们在treeTable.render()方法外面写了一段JavaScript代码，用来定义数据，这只是示例数据，实际使用时需要根据实际情况来定义。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值