Layui表格监听行单双击事件讲解

在学MVC过程中,我们一般都是利用layui插件里的layui数据表格加载数据库中的数据,而layui表格里有许多的事件监听,比如监听行的单双击事件,可利用行的单双击事件实现很多我们想要的功能,比单击某条数据可以进行修改、删除操作,双击某条数据调出到其他表中,接下来就讲讲layui表格里的监听行的单双击事件。

如上图所示:因为这个数据表格用到了layui插件,因此在使用前要先引用layui插件里面的css文件以及js文件,然后在“$(function(){});”里面加载和初始化layui模块,否则会报错。page表示开启分页。limit表示指定每页显示的条数。limits表示每页条数的选择项,这里可以自己定义每页条数的选择项,初始化表格就看看监听行的单双击事件。

如上图所示:是layui表格监听行的单击事件,这里是监听刚刚初始化的表格。获取到点击选中的行数据,我这里是根据供应商ID回填form表单数据的,所以要获取供应商ID,用post请求把获取到供应商ID传递到控制器中,在控制器中根据供应商ID查询对应的数据后再回填到form表单中,“loadDatatoForm”是一个方法表示回填form表单数据,但回填不了下拉框数据,所以还需要另一个方法回填。监听行的单击事件可以实现很多功能的。

上图是监听行的单击事件的效果图,点击左边的某条数据就会回填右边的form表单,这就方便我们查看供应商的基本资料。监听行的单击事件就这样完成了。

如上图所示:是layui表格监听行的双击事件,这里也是监听刚刚初始化的表格。双击获取到点击选中的行数据,我这里也是根据供应商ID回填另一个form表单数据的,所以要获取供应商ID,用post请求把获取到供应商ID传递到控制器中,在控制器中根据供应商ID查询对应的数据后再回填到form表单中,“loadDatatoForm”是一个方法表示回填form表单数据,但回填不了下拉框数据,所以还需要另一个方法回填。这里监听行的双击事件跟单击事件一样,也是回填form表单,所以请求的控制器代码是一样的。监听行的单击事件可以实现很多功能的。看看效果图,

上图是监听行的双击事件的效果图,点击某条数据就会回填form表单的数据,这里是只需要回填供应商名称和供应商编号的,然后关闭模态框。监听行的双击事件就完成了。

以上这篇Layui表格监听行单双击事件讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • layui 数据表格 点击分页按钮 监听事件的实例

    找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起 (我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法) 先上图 代码 .html <div> <table class="layui-hide" id="test" lay-filter="demo"></table>

  • Layui事件监听的实现(表单和数据表格)

    一.表单的事件监听 先介绍一下几个属性的用法 1.lay-filter 事件过滤器 相当于选择器,layui的专属选择器 2.lay-verify 验证属性 属性值可以是 :required必填项, phone手机号,email邮箱,url网址,number数字,date日期,identity身份证.这个相当于正则判断,当然你也可以定义自己的正则,做一些复杂的判断,例如: <input type="text" lay-verify="required">

  • Layui 带多选框表格监听事件以及按钮自动点击写法实例

    不话不多说了,直接上代码吧: <div class="layui-btn-group demoTable" style="margin: 10px;">   <button class="layui-btn" id="hqsj" data-type="getCheckData">获取选中行数据</button>   <button class="layui

  • Layui表格监听行单双击事件讲解

    在学MVC过程中,我们一般都是利用layui插件里的layui数据表格加载数据库中的数据,而layui表格里有许多的事件监听,比如监听行的单双击事件,可利用行的单双击事件实现很多我们想要的功能,比单击某条数据可以进行修改.删除操作,双击某条数据调出到其他表中,接下来就讲讲layui表格里的监听行的单双击事件. 如上图所示:因为这个数据表格用到了layui插件,因此在使用前要先引用layui插件里面的css文件以及js文件,然后在"$(function(){});"里面加载和初始化lay

  • 使用layui监听器监听select下拉框,事件绑定不成功的解决方法

    如下所示: 使用layui监听select所选的value 需要注意的是:form.on必须写在layui.use(){ }中 且使用layui动态添加option时,必须要进行渲染(form.render()),否则选项追加不上 这样做完之后如果还不能获取select所选的value,那就需要检查一下select所在的form表单有没有写class属性,如果没有写class属性,就监听不到select 如果在完成后台操作之后跳转页面时不显示样式了,就检查一下请求路径resultmapping后

  • vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作

    Vue 事件处理方法 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. v-on:click 单击事件 <button class=" btn btn-info" v-on:click="add(1)"> + + </button> <button class=" btn btn-danger " v-on:click="subtract(1)">

  • Layui组件Table绑定行点击事件和获取行数据的方法

    一个项目里面用了layui,简直无数个坑... 这里先记录一个行点击事件的坑,后面慢慢补充. 初始化表格完成后利用事件给table(定位table需要在HTML代码中给table放入指定div)的tr绑定双击事件,然后获取Index,再从数据集里面取出行数据; done: function(res, curr, count){ $('#div').find('.layui-table-body').find("table" ).find("tbody").child

  • vue使用element-ui的el-input监听不了回车事件的解决方法

    原因 今天在使用element-ui时,el-input组件监听不了回车事件,如下代码没有想要的效果: <el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="search()"></el-input> 原因应该是element-ui自身封装了一层input标签之后影响了事件的监听,在el

  • android 控件同时监听单击和双击实例

    不适用click而用touch 自定义监听: class myOnGestureListener extends GestureDetector.SimpleOnGestureListener { @Override public boolean onDoubleTap(MotionEvent e) { //点赞 mLoadingListener.onFinishedLoading("0");//取消点赞 是一个接口 //已经点赞 更换图片 1:已经点赞 0 :没有点赞 if (lik

  • JavaScript监听文本框回车事件并过滤文本框空格的方法

    本文实例讲述了JavaScript监听文本框回车事件并过滤文本框空格的方法.分享给大家供大家参考.具体如下: <script type="text/javascript" language="javascript"> var username = null; var password = null; //获取文本框 onload = function() { username = document.getElementById("txtUser

  • C#实现给DataGrid单元行添加双击事件的方法

    本文实例讲述了C#实现给DataGrid单元行添加双击事件的方法.分享给大家供大家参考.具体如下: 现在我需要做到的功能是当我单击DataGrid某行时显示相对应选中的数据信息,在双击此相同行时弹出删除对话框,应该怎么做呢.由于单击问题很简单就不再阐述了,下面我说一下双击事件是怎么实现的. 这里用到了DataGrid的ItemDataBound事件,我们可以把下面的代码加入到所需的程序中就可实现双击的功能. private void DataGrid1_ItemDataBound( object

  • Vue2实时监听表单变化的示例讲解

    如下所示: <template> <section> <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" :before-close="cancel"> <el-form :model="form" :rules="rules" ref="form"> </e

随机推荐