Layui数据表格之自定义模板

开发工具与关键技术:VS、layui

作者:陆桂超

撰写时间:2019年6月4日

Layui插件是现在比较主流的一个前端 UI 框架,很适合界面的快速开发。Layui里面包含了很多个模块,这里我要讲解的是数据表格模块中的自定义模板。数据表格模块作为一个大模块,它里面自然少不了各个大大小小的模板,自定义模板作为数据表格模块的成员之一,它的作用是对表格进行个性化操作。以达到自己所需要的效果。这里我通过一个小例子来简述数据模块的使用。我用到的开发工具是VS,编程语言是C#,和MVC开发框架。

1、 使用layui之前少不了的就是引用layui的css和js的脚本文件。

2、 把layui引进后,像这样如果是使用数据表格模块的,要初始化表格。

layui.use([‘模块1’, ‘模块2’,’…….’], function () {
//表格初始化
表格名称 = layuiTable.render({
})
});

模块1和模块2就是添加模块名称的,当然,根据实际情况还可以添加更多的模块。

真实项目模块使用如下截图。

在这里插入图片描述

打了红色下划线的就是数据表的自定义操作列,templet是函数方法。

3、
除了在初始化中添加templet操作列,还需要根据实际情况写一个操作列的函数。我所说的小例子就是在这个函数里。这个例子就是启用或作废数据。通过点击自定义操作列的作废或启用按钮实现对数据的控制。

//自定义“操作”列

    function setOperate(data) {

        var toVoidNo =

data.ToVoidNo;//是否有效

        console.log(data);

        var userTypeId =

data.UserTypeID;//用户类型id

        var btns = "";

        if (toVoidNo) {

            btns += '<button

type=“button” class=“layui-btn layui-btn-warm layui-btn-xs”
οnclick=switchEnable(’ + userTypeId + ‘,false)>作废’;

        } else {

            btns += '<button

type=“button” class=“layui-btn layui-btn-xs
layui-btn-normal” οnclick=switchEnable(’ + userTypeId + ‘,true)>启用’;

        }

        return btns;



    }

 

 自定义操作列可以放置HTML内容,比如我在这里放了button按钮。所谓自定义操作列就是根据自己所需实行自定义布局表格。





         //作废或启用权限设置 下一步到控制器写保存都数据库

    function

switchEnable(userTypeId, toVoidNo) {

        var strMsg = "确定";

        strMsg += toVoidNo ? "启用" : "作废";

        strMsg += "该用户类型?";

        layer.confirm(strMsg, {

            icon: 3,

            btn: ['确定', '取消']

        }, function (index) {

           

        });



    }



 toVoidNo的值为true和false。通过获取当前行的toVoidNo值,如果是true,说明当前数据处于启动状态,这时就显示作废按钮。如果当前数据的toVoidNo值为false,说明该数据为停用状态,这时就显示启动按钮,通过点击启动数据。完成这一功能还需要在控制器写相关的代码。

ReturnJsonVo returnJson = new ReturnJsonVo();

        returnJson.State = false;

        try

        {

            //先查询出userTypeId对应的数据

            SYS_UserType dbUserType = (from tbUserType in

myModel.SYS_UserType

                                       where

tbUserType.UserTypeID == userTypeId

                                       select

tbUserType).Single();

            //修改数据

            dbUserType.ToVoidNo = toVoidNo;

            //保存修改



            myModel.Entry(dbUserType).State

= EntityState.Modified;

上图代码就是改变数据库ToVoidNo值的。

通过以上的这个小例子,除了可以学到如何使用数据表格的操作列模板,还可以学到如何停用或启用数据库的数据。

版权声明:本文为weixin_44543189原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44543189/article/details/91350217