templet的多种运用(2)

本文主要介绍了layui的templet功能,展示了如何使用templet自定义表格操作列,并提供了修改样式和处理小bug的示例,包括设置按钮进行修改和删除操作,以及解决提示内容字体颜色问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

templet的多种运用(2

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术:Visual Studio 2015  templet

作者: 梁柏源

撰写时间:2019/07/25

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

好,让我们接着昨天的那一篇文献,继续写下去(什么!!!∑(゚Д゚ノ)ノ,你以为上篇已经写完了?不,你想当然了。)上篇因为某些原因没有写完,只写了一种栗子,templet除了可以改变样式外,还有很多功能,这次就把上篇缺的补上。

templet的操作列:

layui.use(['layer', 'table'], function () {

                //赋值

                layer = layui.layer, layuiTable = layui.table;

                //学生  执行渲染

                tabwyll = layuiTable.render({

                    elem: "# tabwyll ",//html table id

                    url: "",//数据接口

                    cols: [[ //表头

                        { type: 'checkbox', fixed: 'left' },//复选框列,fixed:'left' 将列固定在左边

                        { type: 'numbers', title: '序号' },//序号列,title设定标题名称

                        { field: A, title: A, hide: true },

                        { field: ID, title: ID, hide: true },//hide:true 隐藏列

                        { field: B, title: 'B' },

                        { field: C, title: 'C', width: 98 },

                        { field: D, title: 'D' },

                        { field: E, title: 'E', width: 58 },

                        { field: F, title: 'F' },

                        { field: G, title: 'G' },

                        { field: H, title: 'H', width: 68 },

                        { field: I, title: 'I', width: 98 },

                        { field: J, title: ' J ' },

                        { title: '操作', templet: setOperate, width: 148, align: 'center', fixed: 'right' }//width: 148 指定宽度,align 指定对其方式

                    ]],

                    page: {

                        limit: 10,//指定每页显示的条数

                        limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项

                    }, //开启分页

                    data: [],//加载本地数据                   

                })

            });

以上是表格:

function setOperate(data) {

            var studentID = data.studentID;

            var btns = "";

            btns += '<button type="button" class="layui-btn layui-btn-xs" onclick=openUpdate(' + ID + ')>修改</button>';

            btns += '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" onclick=doDelete(' + ID + ')>删除</button>';

            return btns;

        }

templet的栗子暂且就这么点了。

接下来就是修一下小bug:

这是因为某些不成熟的原因造成的提示内容字体颜色变白,如图:

因为不想改,或者说是偷懒,可以直接在相应的代码上加个标签:

原代码:

layer.alert("用户编号和用户姓名不能为空!", { icon: 2, title: '提示' });

加了标签之后:

layer.alert("<span style='color:black'>" + "用户编号和用户姓名不能为空!" + "</span>", { icon: 2, title: '提示' });

结果:

### LayUI 中 `templet` 属性的用法 在 LayUI 表格模块中,`templet` 是一个非常重要的属性,它允许开发者自定义单元格的内容展示方式。通过 `templet`,可以实现复杂的模板逻辑,例如显示图片、按钮组或其他 HTML 结构。 以下是关于 `templet` 的具体用法及其示例: #### 1. 使用字符串作为模板 可以直接传入一个简单的字符串模板,用于替换单元格内的内容。 ```javascript { field: 'avatar', title: '头像', templet: '<div><img src="{{ d.avatar }}" style="width:50px;height:50px;"></div>' } ``` 在此示例中,`{{ d.avatar }}` 将被对应字段的实际值替代[^1]。 --- #### 2. 使用函数返回模板 更灵活的方式是传递一个回调函数,在函数内部可以根据当前行的数据动态生成模板内容。 ```javascript { field: '', title: '操作', templet: function(d){ return `<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>`; } } ``` 此代码片段展示了如何利用 `templet` 创建带有事件绑定的操作列[^2]。 --- #### 3. 组合其他数据字段 可以在模板中组合多个字段的信息,形成更加丰富的展示效果。 ```javascript { field: '', title: '姓名与职位', templet: '{{ d.name }} - {{ d.position }}' } ``` 如果需要进一步处理字段值,则可以通过 JavaScript 函数完成复杂计算后再拼接至最终结果中[^1]。 --- #### 4. 动态条件判断 支持基于不同条件渲染不同的HTML结构。 ```javascript { field: 'status', title: '状态', templet: function(d){ if (d.status === 1) { return "<span style='color:green;'>启用</span>"; } else { return "<span style='color:red;'>禁用</span>"; } } } ``` 这段脚本依据记录的状态值呈现绿色或红色的文字描述[^2]。 --- ### 注意事项 - 当前版本需确保已引入最新版 LayUI 文件以获得最佳兼容性和特性支持。 - 如果涉及大量DOM操作或者性能敏感场景下建议优化模板设计减少不必要的重绘开销。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值