关于layui数据表格如何改变单元格颜色的实践 |
您所在的位置：网站首页 › 表格如何改变边框颜色 › 关于layui数据表格如何改变单元格颜色的实践 |
关于layui数据表格如何改变单元格颜色的实践
这学期大作业要求一个用户管理模块，现有一个需求要求我们能够通过颜色区分用户的状态
最终实现效果
解决过程
一开始看很多CSDN的老哥使用的是success回调函数进行处理，但是可能是我太菜了，整了半天没整明白，最后通过阅读layui官方文档，意外发现贤心大佬的一段话:
短短几句话貌似正好解决了我们的需求，最后看到官方演示示例:
再看源代码
贤心大佬在这使用的是layui使用的是layui的模板引擎laytpl，相当神奇且强大，那么要实现我们的功能，我们只需要在我们的表格字段属性里添加templet属性：
再去写模板代码就ok了:
这段代码可以写在任意位置，我就把它写在了原本lauyi js声明下,另附页面源码与各位共同学习: layui 搜索信息 用户姓名 用户性别 用户城市 用户职业 搜 索 删除 编辑 删除 layui.use(['form', 'table','jquery'], function () { var $ = layui.jquery, form = layui.form, table = layui.table; table.render({ elem: '#currentTableId', url: '/user/getUserlist', toolbar: '#toolbarDemo', defaultToolbar: ['filter', 'exports', 'print', { title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips' }], cols: [ [ {type: 'checkbox', fixed: 'left'} , {field: 'userId', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true} , {field: 'userName', title: '用户名', width: 120, edit: 'text'} , {field: 'userAge', title: '用户年龄', width: 120} , {field: 'userMail', title: '用户邮箱', width: 150} , {field: 'userPhone', title: '用户手机号', width: 150} , {field: 'userStatus', title: '用户状态', width: 120, templet: '#titleTpl'} , {field: 'userSex', title: '用户性别', width: 120} , {fixed: 'right', title: '操作', toolbar: '#currentTableBar', width: 150} ] ], limits: [10, 15, 20, 25, 50, 100], limit: 10, page: true, skin: 'line', done: function (res, curr, count) { for (var i; i < res.data.length; i++) { //遍历整个表格数据 var item = res.data[i]; //获取当前行数据 if (item.userStatus.value() === '正常') { $("tr[data-index='" + i + "']").attr({"style": "background:#99ff99"}); //将当前行变成绿色 } } }} ) // 监听搜索操作 form.on('submit(data-search-btn)', function (data) { var result = JSON.stringify(data.field); layer.alert(result, { title: '最终的搜索信息' }); //执行搜索重载 table.reload('currentTableId', { page: { curr: 1 } , where: { searchParams: result } }, 'data'); return false; }); /** * toolbar监听事件 */ table.on('toolbar(currentTableFilter)', function (obj) { // if (obj.event === 'add') { // 监听添加操作 // var index = layer.open({ // title: '添加用户', // type: 2, // shade: 0.2, // maxmin:true, // shadeClose: true, // area: ['100%', '100%'], // content: '../page/table/add.html', // }); // $(window).on("resize", function () { // layer.full(index); // }); // } else if (obj.event === 'delete') { // 监听删除操作 // var checkStatus = userlist.checkStatus('currentTableId') // , data = checkStatus.data; // layer.alert(JSON.stringify(data)); // } var checkStatus = table.checkStatus("currentTableId"); switch(obj.event) { case 'delete': var data = checkStatus.data; //根据id删除数据 if (data.length > 0) { layer.confirm('确定删除吗?', function (index) { var params = []; for(var i=0; i{# } else { }} {{ d.userStatus }} {{# } }}
|
【本文地址】
今日新闻 |
推荐新闻 |