layui table.on()事件只能存在一个

最新推荐文章于 2024-05-14 09:38:54 发布
最新推荐文章于 2024-05-14 09:38:54 发布
阅读量1.7w 收藏 3
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37273784/article/details/85169060
版权

layui  table.on()事件一个table只能存在一个，然后再判断。存在多个无效

<!--#include virtual ="include/header.html"-->
<body>
<!-- 任务管理列表 -->
<div class="layui-fluid larry-wrapper">
    <section class="panel panel-padding">
        <!--<form id="taskSearch"
              class="layui-form layui-form-pane form-conmon"
              data-params='{"dataName":"taskTable", "action":"list", "ajax":false, "bind":false}'>
            <div class="layui-form-item layui-form-item-sm">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="layui-form-item layui-form-item-sm">
                            <label class="layui-form-label">任务组名称</label>
                            <div class="layui-input-block">
                                <input id="jobName" name="jobName" type="text"
                                       class="layui-input" placeholder="任务组名称"/>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="layui-form-item layui-form-item-sm">
                            <label class="layui-form-label">任务名称</label>
                            <div class="layui-input-block">
                                <input id="name" name="name" type="text"
                                       class="layui-input" placeholder="任务名称"/>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                        <div class="layui-form-item layui-form-item-sm">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <select name="deletedFlag" id="deletedFlag">
                                    <option value="">&#45;&#45;请选择&#45;&#45;</option>
                                    <option value="0">启用</option>
                                    <option value="1">禁用</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3 layui-col-sm3 layui-col-xs3 text-right">
                        <button id="searchBtn" class="layui-btn layui-btn-sm" jq-submit
                                jq-filter="search">
                            <i class="iconfont search-icon">&#xe61b;</i> 查询
                        </button>
                        <button id="resetBtn" type="reset"
                                class="layui-btn layui-btn-danger layui-btn-sm">
                            <i class="iconfont search-icon">&#xe63a;</i> 重置
                        </button>
                    </div>
                </div>
            </div>
        </form>-->
        <div class="layui-form-item layui-form-item-sm">
            <div class="layui-row">
                <div class="layui-col-md12 layui-col-sm12 layui-col-xs12" style="margin-top: 8px;">
                    <button id="insertBtn" class="layui-btn btn-outline layui-btn-normal layui-btn-sm modal"
                       data-params='{content: "./task_add.html",type:"2","full":"true", title: "新增任务"}'>
                        <i class="iconfont search-icon">&#xe635;</i> 新增 </button>
                </div>
            </div>
            <table class="layui-table jq-even" id="LAY_table_task"
                   lay-filter="taskTable" lay-even=""></table>
        </div>
    </section>
</div>
</body>
<!--#include virtual ="include/version.html"-->
<script type="text/html" id="barDemo">
    {{#  if(d.jobStatus=='NORMAL'){ }}
        <a class="layui-btn layui-btn-xs" lay-event="onoff">禁用</a>
    {{#  } else{ }}
        <a class="layui-btn layui-btn-xs" lay-event="onoff">启用</a>
    {{#  } }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
    layui.use(['upload', 'jqbind', 'jqform', 'jquery', 'jqfrm', 'table','jqajax'], function () {
        var upload = layui.upload,
            jqbind = layui.jqbind,
            jqajax = layui.jqajax,
            form = layui.jqform,
            $ = layui.jquery,
            frm = layui.jqfrm,
            ctx = top.global.ctx,
            table = layui.table;
        form.init({
            "form": "#taskSearch"
        });
        //方法级渲染
        var tableIns = table.render({
            elem: '#LAY_table_task'
            , url: ctx + '/sys/job/sysJobConfig/listAllJob'
            , height: 'full-100'
            , cols: [[
                 {field: 'jobName', title: '任务组名称', width: "15%", style: "text-align:center",align: 'center'}
                , {field: 'name', title: '任务名称', width: "15%", style: "text-align:center", align: 'center'}
                , {
                    field: 'jobStatus',
                    width: "5%",
                    title: '状态',
                    align: 'center',
                    style: "text-align:center",
                    templet:function(d){
                        if(d.jobStatus == 'NORMAL'){
                            return '启用';
                        }else{
                            return '禁用';
                        }
                    }

                }
                , {field: 'cron', title: 'cron表达式', width: "15%", style: "text-align:center", align: 'center'}
                , {field: 'classPath', title: '类路径及类名', width: "30%", style: "text-align:center", align: 'center'}
                , {field: 'remark', title: '备注', width: "10%", style: "text-align:center", align: 'center'}
                , {fixed: 'right', width: "10%", title: '操作', toolbar: '#barDemo', align: 'center'}
            ]]
            , id: 'taskTable'
            , page: true
            , done: function (res, curr, count) {
                jqbind.init();
                tableIns.config.datas = table.cache['taskTable'];
                top.global['taskTable'] = tableIns;
            }
        });


        //操作
        table.on('tool(taskTable)', function(obj){
            if(obj.event === 'del'){ //删除
                layer.confirm('确认删除吗?', function(index){
                    var ajax = new jqajax();
                    ajax.options.method = 'POST';
                    ajax.options.contentType="application/json;charset=UTF-8";
                    ajax.options.url = "/sys/job/sysJobConfig/deleteJob";
                    ajax.options.data = obj.data;
                    ajax.ajax(ajax.options);
                    ajax.complete = function (ret, options) {
                        if (ret.httpCode == 200) {
                            layer.msg("删除成功!");
                            layer.close(index);//关闭弹窗
                            //刷新表格 tableId表格id
                            layui.table.reload('taskTable',{page:{curr:1}});
                        }else {
                            layer.msg("删除失败!");
                        }
                    };
                });
            }else if(obj.event === 'onoff'){//启用、禁用
                var ajax = new jqajax();
                ajax.options.method = 'POST';
                ajax.options.contentType="application/json;charset=UTF-8";
                ajax.options.url = "/sys/job/sysJobConfig/updateJob";
                ajax.options.data = obj.data;
                ajax.ajax(ajax.options);
                ajax.complete = function (ret, options) {
                    if (ret.httpCode == 200) {
                        layer.msg("修改成功!");
                        layer.close();//关闭弹窗
                        //刷新表格 tableId表格id
                        layui.table.reload('taskTable',{page:{curr:1}});
                    }else {
                        layer.msg("修改失败!");
                    }
                };
            }
        });
    });
</script>
</html>
jrliling
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用于layui table 自定义列
07-06
其中，layui table是layui框架中的一个核心组件，用于展示数据表格。本教程将深入探讨如何利用layui table实现自定义列，以及如何保存和应用这些自定义模板。 一、layui table组件基础 layui table组件提供了灵活...
layui的table单击行勾选checkbox功能方法
10-18
为此，我们添加另一个事件监听器来捕获复选框的点击事件，并使用`event.stopPropagation()`来阻止事件的进一步传播。 ```javascript $(document).on("click", "td div.laytable-cell-checkbox div.layui-form-...
layui的table事件
Devil678的博客
12-17 6138
table的事件： 1、表格点击某行事件 table.on('row(表格名称)',function (obj) { var url = obj.data.router; }) 2、表格绑定td点击事件 在cols中添加event事件（event = "viewReport"），事件名称自定义命名 监听获取点击事件的值 table.on('tool(表格名称)', function (obj) { let event = obj.e
layui table单元格事件修改值的方法
10-16
layui 是一个轻量级的前端框架，它提供了一系列丰富的组件，包括表格（table）在内。在本篇文章中，我们将探讨如何在 layui 的表格组件中处理单元格的事件，并实现修改单元格值的功能。 首先，layui 的 table 组件...
【前端】LayUI监听事件汇总
最新发布
qq_25285531的博客
05-14 747
一、监听单选按钮事件 二、监听下拉框事件
layui实现给某一列加点击事件
10-16
table.on('cell(test)', function (obj) { // 绑定test这个过滤器的单元格事件 if (obj.field === 'address') { console.log('点击了地址列'); // 这里执行地址列的点击事件逻辑 } }); ``` 在这个修改后的版本...
Layui数据表格之单元格编辑方式
01-19
开发工具与关键技术：VS、layui数据表格之单元格编辑 layui是我们常用的一个插件，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 ... //声明一个layuiTable变量作为全局变量。 layuiTable = layui.table;
layui动态绑定事件的方法
10-16
今天小编就为大家分享一篇layui动态绑定事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Layui组件Table绑定行点击事件和获取行数据的方法
12-03
一个项目里面用了layui,简直无数个坑… 这里先记录一个行点击事件的坑,后面慢慢补充. 初始化表格完成后利用事件给table(定位table需要在HTML代码中给table放入指定div)的tr绑定双击事件,然后获取Index,再从数据集...
layui-table 案例.rar
05-11
其中，Layui-Table 是一个强大的表格组件，它支持数据加载、排序、分页、自定义操作等多样化功能。本案例将深入解析如何使用 Layui-Table 创建经典表格，并且适合新手入门学习。 1. **Layui-Table 基本使用** ...
Layui事件监听的实现(表单和数据表格)
10-16
Layui是一款轻量级的前端框架，它提供了丰富的组件和便利的API，其中事件监听是其核心功能之一，特别在处理表单和数据表格时显得尤为重要。本文将深入讲解Layui中事件监听的实现，主要关注表单和数据表格。 **一、...
layui的表格table选中数据后可打印本行数据
10-26
在Web开发中，layui是一个非常流行的前端框架，它提供了丰富的组件和美观的界面设计，而表格（table）是其中常用的一个元素。本示例主要关注如何在layui的表格中实现选中某一行数据后，仅将该行数据打印的功能。这个...
layui动态禁用checkbox.rar
01-03
总结来说，layui table的复选框功能可以通过列定义中的`checkbox`属性开启，通过监听`checkbox`事件和使用`checkAll`、`uncheckAll`接口进行动态控制。在处理全选时，需要注意排除已被禁用的行，以确保用户体验的...
layui table数据修改的回显方法
12-10
在layui中，我们可以利用table模块提供的事件监听功能来实现这一过程。 关键代码如下： ```javascript table.on('tool(test)', function(obj) { var data = obj.data; // 获得当前行数据 var layEvent = obj....
layui table中的列为checkbox 使layui中table表格中的列单元格显示为单选框checkbox
01-06
例如，创建一个包含ID为`layui-table`的表格： ```html <table id="layui-table" lay-filter="test"></table> ``` 然后，在layui的JS代码中，我们使用`layui.table.render()`方法来渲染表格。在列配置中，我们使用...
在Layui中操作数据表格,给指定单元格添加事件示例
10-16
首先，创建一个Layui数据表格需要使用`table.render()`方法。在给出的代码中，我们可以看到一个表格被初始化，其中包含了多个列，每列都有自己的字段（field）、标题（title）和样式（style）。例如，'report'列设置...
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
10-16
在本文中，我们将深入探讨如何使用layUI框架的layer.open方法在content中打开一个数据表格，并获取选定值以便进行后续处理。layUI是一款基于 layui 的前端 UI 框架，它提供了丰富的组件和便捷的API，包括弹层、表单...
layui table 多行删除(id获取)的方法
12-10
table.on('checkbox(table)', function(obj){ var data = obj.data; }); layui.jquery, active = { getid: function () { var arr = []; var checkStatus = table.checkStatus('tableid') , data
关于layui 下拉列表的change事件详解
10-16
总结一下，layui的下拉列表change事件是一个强大的工具，它允许开发者在用户做出选择时执行各种操作，如更新页面内容、触发数据交互等。通过使用过滤器，我们可以精确地定位并监听需要的下拉列表，同时结合layui的...
layui table.on 对应的鼠标点击事件
06-07
在 layui 的 table 模块中，table.on() 方法可以用于监听表格中的各种事件，包括单元格的鼠标点击事件。具体实现可以参考以下代码： ```javascript layui.use('table', function(){ var table = layui.table; //监听单元格点击事件 table.on('cell(test)', function(obj){ console.log(obj.field); //当前单元格的字段名 console.log(obj.data); //当前行的数据 console.log(obj.event); //当前单元格的事件名 console.log(obj.tr); //当前行的DOM对象 //判断当前单元格的事件名是否为click if(obj.event === 'click'){ //执行鼠标点击事件的操作 //... } }); }); ``` 在上述代码中，'cell(test)' 表示监听名为 test 的表格的单元格事件。当单元格被点击时，会触发 table.on() 方法中的回调函数，其中 obj.event 属性为当前单元格的事件名，判断是否为 'click' 后即可执行鼠标点击事件的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值