当前位置: 首页 > article >正文

根据条件 控制layui的table的toolbar的按钮 显示和不显示

部分代码:

<!-----查询条件----->
<input type="date" id="StartDate" onchange="PageList()" />
<input type="date" id="EndDate" onchange="PageList()" />

<!-----表格Table----->
<table id="table" lay-filter="table" class="layui-table"></table>

<!-----Layui表格----->
<script>
    //初始化
    $(function () {
        PageList();
    });
    //查询
    function PageList() {
        var StartDate = $("#StartDate").val();
        var EndDate = $("#EndDate").val();

        layui.use(['table'], function () {
            var table = layui.table;

            table.render({
                elem: '#table'//对应着Table的ID
                , method: 'POST'
                , url: '/Daily/PageList'//URL为数据接口的地址
                , where: { //where就是ajax的data,但不包括分页条件
                    "StartDate": StartDate,
                    "EndDate": EndDate,
                }
                , request: {//分页条件: page  limit
                    pageName: 'page',    //页码的参数名称,默认:page 或者 index、pageIndex
                    limitName: 'size'  //每页数据量的参数名,默认:limit 或者 size、pageSize
                }
                , parseData: function (res) {
                    return {
                        "code": 0,//数据类型,必须的
                        "count": res.total,//总记录数,用于分页
                        "data": res.data,//必须的
                    }
                }
                , cols: [[
                    { field: 'DailyID', title: '日报ID', sort: true }
                    , { field: 'Username', title: '员工', sort: true }
                    , { field: 'Daily', title: '日报', sort: true }
                    , { title: '操作', toolbar: '#barDemo' }
                ]],
                page: true,//开启分页功能
                limit: 25,//当前每页条数
                limits: [25, 50, 100],//每页条数集合
                //editMode: "single",//可编辑模式,支持:single单行、row整行、cell单元格
            });
        });
    }
</script>

<!-----表格的toolbar----->
<script type="text/html" id="barDemo">
    <!-- d代表的是layui 引擎模板中所使用的单个数据 -->
    <!-- 只能编辑和删除[自己]创建的日报 -->
    {{#  if(d.UserID == @ViewBag.LoginUserRole.UserID){ }}
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detail">明细</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
    {{#  } }}
    <!-- RoleLevel > 1 的,能够查看所有人的日报 -->
    {{#  if(@ViewBag.LoginUserRole.RoleLevel > 1 && d.UserID != @ViewBag.LoginUserRole.UserID){ }}
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detail">明细</a>
    {{#  } }}
</script>

备注说明:

① ViewBag.LoginUserRole 是登录用户的Session,包括登录用户id和角色id等信息

② d代表的是layui 引擎模板中所使用的单个数据,每一行的数据,包含数据中的用户id

③ 利用以上①和②判断当前数据行 是否启用: 明细、编辑、删除 的按钮(只能编辑自己提交的数据)

④ 根据 RoleLevel 值,控制 明细 按钮的启用(高级用户能够查看所有人的明细)


图示:


http://www.kler.cn/a/402480.html

相关文章:

  • 在win10环境部署opengauss数据库(包含各种可能遇到的问题解决)
  • TEA加密逆向
  • CTF-RE 从0到 N: 高版本 APK 调试 + APK逻辑修改再打包 + os层调试[2024 强网杯青少年专项赛 Flip_over] writeup
  • qt添加模块
  • 【网络通信】数据集合集!
  • 【大数据学习 | Spark-Core】广播变量和累加器
  • 【Redis】实现点赞功能
  • 5.tree of thought 源码 (prompts 类)
  • 零基础入门Flink,掌握基本使用方法
  • 华为openEuler考试真题演练(附答案)
  • # TCP、UDP、HTTP、Socket
  • 无人机CAN总线基础——CKESC电调小课堂14
  • 平价鼠标推荐-英菲克PW1有线鼠标
  • 【Spring boot】微服务项目的搭建整合swagger的fastdfs和demo的编写
  • Linux中定时操作
  • 【AIGC】破解ChatGPT!如何使用高价值提示词Prompt提升响应质量
  • 109. UE5 GAS RPG 实现检查点的存档功能
  • 计算机毕业设计Hive+Spark空气质量预测 空气质量可视化 空气质量分析 空气质量爬虫 Hadoop 机器学习 深度学习 Django 大模型
  • 鱼厂实习,光速转正了!
  • 【STM32项目】基于STM32设计的震动马达超声波电机高频震动——高级定时器PWM互补输出带死区控制
  • 《自动化运维》
  • 20.有效的括号-力扣(LeetCode)
  • 全面解析亚马逊云服务器(AWS):功能、优势与使用指南
  • 【Vue 表单类组件封装与 v-model 简化代码】
  • 使用vue-i18n为你的Vue应用添加多语言支持
  • 爬虫基础总结 —— 附带爬取案例