精华内容
下载资源
问答
  • 比如监听行的单双击事件,可利用行的单双击事件实现很多我们想要的功能,比单击某条数据可以进行修改、删除操作,双击某条数据调出到其他表中,接下来就讲讲layui表格里的监听行的单双击事件。 如上图所示:因为这...
  • layui 自定义个别事件

    2019-10-07 01:32:00
    网页调用自定义函数的两种方法,一种是给id,可以在自定义函数里通过id写自定义函数,另一种是没有id,直接在标签写自调用...link rel="stylesheet" href="/static/.../css/layui.css" media="all"> 在<body...

    网页调用自定义函数的两种方法,一种是给id,可以在自定义函数里通过id写自定义函数,另一种是没有id,直接在标签写自调用定义函数的方法。

     

    一、引入支持

    首先在<head>标签内引入layui的样式:<link rel="stylesheet" href="/static/.../css/layui.css" media="all">

    在<body>标签内引入layui.js文件,获得layui的支持。<script src="/static/.../layui.js"></script>

     

    二、定义按钮

    在<body>标签内定义:

    <a class="layui-btn" id="noclick" herf="javascript:;">有id无click测试</a>

    <a class = "layui-btn" οnclick="hello('月月加油')" herf="javascript:;">无id有click测试</a>

     

    三、定义自定义函数

    <script type="text/javascript">
    layui.use(["jquery","layer"],function () {
    var $ = layui.jquery, layer = layui.layer;

    window.hello = function(obj){
    layer.msg('Hello :'+obj);
    };

    $("#noclick").click(function () {
    hello('月爸必须努力');
    });
    });
    </script>

    注意:window前缀,是全局变量的声明方式。

     

    好,完成。

     

    如果有一组按钮,定义它们的事件,可以用统一监听的方式,这个在后面介绍。

     

    转载于:https://www.cnblogs.com/zhangxj/p/11258862.html

    展开全文
  • Layui监听事件

    万次阅读 2019-05-27 19:33:50
    Layui监听事件 开发工具与关键技术:VS MVC、SQL、JS 撰写时间:2019/5/25 表格事件监听可以实现,点击当前的数据,获取到当前的数据,赋值给想显示数据的from表单,或其他表格。表格事件监听的好处那么多,怎样...

    Layui监听事件

    开发工具与关键技术:VS   MVC、SQL、JS
    撰写时间:2019/5/25
    

    表格事件监听可以实现,点击当前的数据,获取到当前的数据,赋值给想显示数据的from表单,或其他表格。表格事件监听的好处那么多,怎样可以实现简单易懂的事件监听呢?额!还是通过layui插件来实现这个监听功能,layui插件提供了监听多种事件。

    监听复选框选择:点击复选框时触发,回调函数返回一个object参数

    table.on(‘checkbox(test)’,function(obj){
    
    console.log(obj.checked);//当前是否选中状态
    
    console.log(obj.data);//选中行的相关数据
    
    console.log(obj.type);//如果触发的是全选,则为:all,如果触发的是单选,则为:one
    
    });
    

    监听行的单击或双击事件:row(单击)、rowDoub(双击)
    一个简单的监听行的单击事件:

    t

    able.on(‘row(test)’,function(obj){ //test是table原始容器的属性
    lay-filter=“对应的值”
    
        console.log(obj.tr);//得到当前行元素对象
    
    console.log(obj.data);//得到当前行数据
    
    //obj.del();//删除当前行
    
    //obj.update(fields);//修改当前行数据
    });
    

    无论layui监听的是什么事件,都要在html布局的table标签上加上layui-filter=“”的对应值,否则监听事件就会失效。例如:<table id="demo" layui-filter="test"></table>
    通过layui渲染出数据表格之后,监听表格行的点击事件,把表格的数据赋值绑定到from表单中;其监听绑定的效果图如下:(图片上涉及的信息属于虚构的测试数据)
    在这里插入图片描述
    监听绑定from的代码如下:

    layuiTable.on('row(TabSupplierInformation)', function (raot) {
    
                       
    var data = raot.data;//获取点击行数据                   
    
                       
    //表格数据 绑定到from表单中
    
                       
    $("#SupplierNum").val(data.SupplierNum);//绑定编号
    
                       
    $("#SupplierName").val(data.SupplierName);//绑定名称
    
                       
    $("#SupplierBusiness").val(data.SupplierBusiness);//绑定主营业务          
    
                       
    $("#SupplierTele").val(data.SupplierTele);//绑定电话  
    
                       
    $("#SupplierAddress").val(data.SupplierAddress);//绑定地址  
    
                       
    $("#SupplierWeb").val(data.SupplierWeb);//绑定网站  
    
                       
    $("#SupplierLinkname").val(data.SupplierLinkname);//绑定联系人  
    
                       
    $("#SupplierFax").val(data.SupplierFax);//绑定传真 
    
                       
    $("#SupplierPhone").val(data.SupplierPhone);//绑定手机  
    
                       
    $("#SupplierMailbox").val(data.SupplierMailbox);//绑定邮箱  
    
                       
    $("#SupplierRemark").val(data.SupplierRemark);//绑定备注  
    
                       
    $("#PinyinCode").val(data.PinyinCode);//拼音码
    
                       
    $("#WarehouseAddress").val(data.WarehouseAddress);//库房地址
    
                       
    $("#WarehousePhone").val(data.WarehousePhone);//库房电话
    
                       
    $("#SupplierTax").val(data.SupplierTax);//税号
    
                      
    $("#SupplierMoney").val();//应付款                  
    
                    });
    

    选中一行数据,显示另外一个表格数据,即表2的数据,根据表1的数据进行显示。这种情况同样可以根据行的单击事件来实现筛选数据,在监听事件中添加表2得重载事件即可。
    //监听行单击事件(双击事件为:rowDouble)

       layuiTable.on('row(tabNotice)', function (rate) {
          var data = rate.data;//获取点击行数据
          //标注选中样式
          rate.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
          var noticeID = data.NoticeID;
         //公告查询附件  reload()重载表格
     TabFiles =layuiTable.reload('tabFiles', {
                                url: '/SystemManagement/IssuanceNotice/SelectFileAll',
                                page: {
                                    curr: 1
                                },
                                where: {//设定异步数据接口的额外参数,比如设置多条件查询的参数
                                    noticeId: noticeID
                                },
                            });
                        });
    
    展开全文
  • 今天小编就为大家分享一篇layui加载表格,绑定新增,编辑删除,查看按钮事件的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • LayUI tab 删除事件回调

    千次阅读 2017-08-21 23:02:01
    $(".layui-tab").on("click",function(e){  if($(e.target).is(".layui-tab-close")){  console.log($(e.target).parent().attr("lay-id"))// 输出哪个tab被点击,没有值时返回undefined  




    $(".layui-tab").on("click",function(e){

                if($(e.target).is(".layui-tab-close")){
                    console.log($(e.target).parent().attr("lay-id"))// 输出哪个tab被点击,没有值时返回undefined
                }
            })
    展开全文
  • layui回车确定事件

    2020-11-03 16:13:14
    layer.confirm('确定要删除选中的记录?', { btn : [ '确定', '取消' ], success:function(){ this.enterEsc = function (event) { if (event.keyCode === 13) { $(".layui-layer-btn0").click(); ...
    function remove(id) {
    	layer.confirm('确定要删除选中的记录?', {
    		btn : [ '确定', '取消' ],
    		success:function(){
    			this.enterEsc = function (event) {
    				if (event.keyCode === 13) {
    					$(".layui-layer-btn0").click();
    					return false; //阻止系统默认回车事件
    				}else if(event.keyCode == 27){
    					$(".layui-layer-btn1").click();
    					return false;
    				}
    			};
    			$(document).on('keydown', this.enterEsc); //监听键盘事件,关闭层
    		},
    		end:function(){
    			$(document).off('keydown',this.enterEsc); //解除键盘关闭事件
    		}
    
    	}, function() {
    	
    	layer.close(index);    //执行完后关闭
    	}
    	})
    }
    
    展开全文
  • layui常用的事件

    2018-02-01 09:45:00
    等待效果 index = layer.load(2, {shade: false}); 关闭等待效果 layer.close(index) 提示信息错误信息 layer.msg('请填写完整内容', { icon : 2, ...layer.msg('删除成功', { icon:...
  • 一:监听复选框事件 var checkedArr=[]; table.on('checkbox(demo)', function(obj){ if (obj.type=='all') return; if (obj.checked){ checkedArr.push(obj.data.LAY_TABLE_INDEX); //checkedArr[obj.data.id] =...
  • 样式: 首先要为数据表格加载删除/编辑按钮 <... //barDemo是表头中‘操作’这一列的id <a class="layui-btn layui-btn-xs" lay-event="edit">编辑保存</a> <a class="...
  • layui confirm 取消事件

    2021-02-20 13:53:43
    layer.confirm('确定要删除吗?', { icon:3, title:"提示", btn: ['确定', '取消'], submit:function(index){ layer.close(index); console.log("提交...
  • LayUI之select监听事件

    千次阅读 2019-09-17 17:30:18
    看着layui是比较简单的东西,只一个监听事件,搞得晕头转向的,主要还是对这个东西不太熟悉,而且项目中都是封装的东西,有些不太好找。 需求:选择select的时候,获取不同的值。 //lay-filter="test" 用来过滤要...
  • layui工具栏按钮监听事件

    千次阅读 2019-06-09 20:06:54
    layui工具栏按钮监听事件
  • layui实现单个删除和批量删除

    千次阅读 2019-02-28 16:45:49
    layui实现单个删除和批量删除 先获得表格数据 一、单个删除 1、在js文件中绑定操作工具栏的删除操作 //列表操作 table.on(‘tool(employeeList)’, function(obj){ var layEvent = obj.event, data = obj.data; if...
  • layui table toolbar 工具条事件

    千次阅读 2019-11-08 14:24:27
    layui table 添加一列工具列,放上工具按钮 语法 table.render({ cols: [[ {field:'id', title:'ID', width:100}, {fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是...
  • 删除行:obj.del(); 更新数据:obj.update({属性:更改后的值}); //监听工具条 table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值" var...
  • layui中监听单击和双击事件的使用

    千次阅读 2019-06-27 21:42:47
    平时在做数据回填的时候,我们需要用到layui中的监听单击和双击事件来进行数据的获取和回填.具体的使用如图所示: 从图中看出这是监听单击事件,一开始需要先引入layui插件就不用多说了.先写一个jQuery 方法出来包裹,...
  • Layui表格监听行单双击事件

    千次阅读 2019-07-27 14:31:49
    比如监听行的单双击事件,可利用行的单双击事件实现很多我们想要的功能,比单击某条数据可以进行修改、删除操作,双击某条数据调出到其他表中,接下来就讲讲layui表格里的监听行的单双击事件。...
  • 1,效果图 ...div class="layui-tab layui-tab-brief" lay-filter="demo"> <ul class="layui-tab-title"> <li class="layui-this">数据</li> <li>查询</li>
  • tp layui删除 批量删除

    2021-06-10 10:27:19
    使用layui页面 先是前端 <table class="layui-hide" id="test" lay-filter="test"></table> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button ...
  • layui删除弹窗

    千次阅读 2019-08-16 23:20:08
    执行删除操作时,设置一个简单的弹出...button type="button" class="layui-btn layui-btn-danger" data-id='${rl.id}' data-type="test2">删除</button> <script> $(function () { // 监听删除点...
  • layui自带的导出,是导出当前页的数据,以下方法是导出所有数据 <button class="layui-btn layui-btn layui-btn-warm" οnclick="excl_rep()">导出</button> //导出 function excl_rep() { var SH=$...
  • <... <h3>{{ d.title }}<... {{# layui.each(d.list, function(index, item){ }} //d 指的是data d.list 指的是data里的数组 <li> <span>{{ item.modname }}</span> <span&.
  • layui 数据表格按钮事件绑定和渲染

    千次阅读 2019-10-04 22:29:45
    顶部的添加和删除按钮,右侧的三个筛选,打印,导出按钮 基础参数属性:toolbar:'#demo2', //创建 删除 添加按钮模板 <!-- 生成模块 --> <script id="demo2" lay-filter="test1"> <button ...
  • 使用Layui数据表格实现行工具事件Layui表单弹框与数据回填具体步骤如下: 步骤一:布置行工具栏样式与数据表格初始化,代码如下: [removed] 编辑 删除 [removed] var listEnquiryQ
  • 使用Layui数据表格实现行工具事件Layui表单弹框与数据回填具体步骤如下: 步骤一:布置行工具栏样式与数据表格初始化,代码如下: <script type="text/html" id="barDemo2"> <a class="layui-btn...
  • div class="layui-inline"> <select id="tabletype" name="tabletype" multiple="multiple" lay-filter="tabletypechange"> <option value="模型表">模型表</option> <option value
  • layui版本:v2.5.6 treeTable版本:2.x 按照官方文档,dom标签如下: ...js渲染和绑定事件layui.config({ base: '${basePath}' }).extend({ treeTable: 'static/treeTable/treeTable' }).use(['treeTabl
  • layui 数据表格最简单的点击事件

    千次阅读 2019-10-04 22:29:43
    //定义点击事件 table.on('row(test)', function(obj){ console.log(obj.tr) //得到当前行元素对象 console.log(obj.data) //得到当前行数据 ... //删除当前行 //obj.update(fields) //修改当前行数据 ...
  • 使用layui框架的时候,总会重复的写相关代码,感觉很是苦恼,所以进行分装,只需要关注业务方面即可如下图,提供新增,编辑,查看等功能js方法/** * 页面内弹出编辑窗口 //需要引入 layui.js layui.css文件 * @...
  • Layui表格删除

    千次阅读 2019-06-18 08:06:20
    Layui表格删除行 开发工具与关键技术:MVC 作者:盘洪源 撰写时间:2019年6月17日星期一 在这里我要实现的一个删除行的效果就是通过点击键盘上的delete按钮来删除表格的选中行,想要实现这个效果需要怎么做呢? 首先...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,512
精华内容 1,004
关键字:

layui删除事件