templet的多种运用（2）

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: '提示' });

结果：