layui循环数据并渲染_layui使用表格渲染获取行数据的例子
需求:使用前端框架layui生成表格,点击表格中一行数据中的按钮,获取到这行数据。
解决办法:
在render中增加字段:
done: function (res, curr, count) {
// $('.x-body').find('.layui-table-body').find("table").find("tbody").children("tr").on('click', function () {
// var id = json.stringify($('.x-body').find('.layui-table-body').find("table").find("tbody").find(".layui-table-hover").data('index'));
// var obj = res.data[id];
// console.log(obj, 'obj')
// // fun.openlayer(obj);
// })
table.on('tool(test)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layevent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的dom对象
if (layevent=="invest_perfer"){
x_admin_show("投资偏好","/echarts1.html?mobil="+data.mobil,"",510);
}else{
x_admin_show("用户画像","/echarts4.html?mobil="+data.mobil,"",510);
}
});
}
然后在按钮中一定要增加lay-event属性:
投资偏好
用户画像
完整代码:
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#userlisttable'
,height: 300
,url: '/userlist' //数据接口
,page: true //开启分页
,cols: [[ //表头
{field: 'id', title: 'id', width:80, sort: true, fixed: 'left',align:'center'}
,{field: 'name', title: '用户名', width:80,align:'center'}
,{field: 'sex', title: '性别', width:100, sort: true,align:'center'}
,{field: 'mobil', title: '手机', width:150,align:'center'}
,{field: 'log_in_time', title: '加入时间', sort: true, width: 250,align:'center'}
,{title: '操作', width: 300, toolbar:'#userpicbtn',align:'center'}
]],
data: [{ id: 1, name: '张三' }, { id: 2, name: '李四' }],//没卵用
done: function (res, curr, count) {
// $('.x-body').find('.layui-table-body').find("table").find("tbody").children("tr").on('click', function () {
// var id = json.stringify($('.x-body').find('.layui-table-body').find("table").find("tbody").find(".layui-table-hover").data('index'));
// var obj = res.data[id];
// console.log(obj, 'obj')
// // fun.openlayer(obj);
// })
table.on('tool(test)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layevent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的dom对象
if (layevent=="invest_perfer"){
x_admin_show("投资偏好","/echarts1.html?mobil="+data.mobil,"",510);
}else{
x_admin_show("用户画像","/echarts4.html?mobil="+data.mobil,"",510);
}
});
}
});
});
投资偏好
用户画像
效果展示:
点击投资偏好或者用户画像按钮都可以获取该行的数据。
以上这篇layui使用表格渲染获取行数据的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持萬仟网。
希望与广大网友互动??
点此进行留言吧!
layui循环数据并渲染_layui使用表格渲染获取行数据的例子相关推荐
- layui当前表格第一行_layui使用表格渲染获取行数据的例子
需求:使用前端框架layui生成表格,点击表格中一行数据中的按钮,获取到这行数据. 解决办法: 在render中增加字段: done: function (res, curr, count) { // ...
- Layui表格获取行数据
在开发项目的时候经常用的一个Layui表格,而我们要表格里的一数据来进行其他操作,这时候就需要监听到它的那行数据才行,就是说,你点击到一个表格的其中一行,你需要那行的某个信息,用那个信息来做某种操作, ...
- Pandas常见的数据过滤方法、通过列条件筛选行数据
Pandas常见的数据过滤方法.通过列条件筛选行数据 不废话了,直接看代码吧: 一般情况下,前面5种就覆盖了绝大多数需求 import pandas as pd import numpy as npd ...
- vue渲染大量数据如何优化_Vue - Table表格渲染上千数据优化
Vue - Table表格渲染上千数据优化 此次项目经验会谈谈常常在项目中,针对成千上万数据渲染优化的不断探索来谈谈本身的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户操做过程当 ...
- layui 自动渲染_layui怎么重新渲染
layui重新渲染的方法:首先通过layUI ajax加载html页面:然后将html插到指定位置后重新调用"element.init();"渲染即可. layUI ajax加载h ...
- el-table表格格式化某一列数据;统一处理el-table表格某一列数据
以下代码可以直接复制使用 场景:table的原数据就是 姓名1234,但是现在想要改成统一的格式.可以使用formatter属性,它用于格式化指定列的值,接受一个Function,会传入两个参数:ro ...
- 怎样用excel剔除异常数据_(如何剔除excel表格中重复的数据)excel表格怎么剔除异常数据...
请问 Excel 如何剔除与平均数偏差较大的数字再求平均数?谢谢. 把问题作为内容(邮件主定要包含"excel",本人以此据辨别非垃圾邮件,以免误删).excel样件(请特别注意: ...
- Ext grid 根据行号获取行数据
var store=Ext.getCmp('grid_id').store;// var storerow=store.getAt(row_num);//行数据 var phonenumber=sto ...
- python 获取金融数据_class类在python中如何获取金融数据
class类在python中如何获取金融数据 发布时间:2020-12-11 11:12:06 来源:亿速云 阅读:101 作者:小新 这篇文章主要介绍了class类在python中如何获取金融数据, ...
最新文章
- js调用数科阅读器_阅读大型 JavaScript 源码时有什么好用的工具?
- C#设计模式之4-原型模式
- 方舟手游服务器设置文件翻译,方舟手游咋设置翻译
- 5G技术对大数据产业的影响
- Leetcode207---课程表(逆拓扑排序)
- Linux 简单的双线设置
- java数组大小界限,Java数组索引超出界限
- 大点再大点个性化超大MSN头像(转)
- ubuntu18.04设置静态IP地址
- 医疗 PACS 系统的海量影像数据归档实例
- 手刃豆瓣top250排行榜
- 多边形(n边形)面积计算公式hdu2036
- 如何解决Win10删除文件慢的办法
- win10 系统识别不了移动硬盘
- python 十进制转二进制
- 云台山风景区茶园骑共享单车,游玩茶园的每一个角落
- 通过keil使用汇编语言生成二进制文件,并使用vivado仿真cortexm0处理器
- Ubuntu18.04 安装 ROS Melodic(同时解决 rosdep update 问题,亲测有效)
- composer类库—汉字转拼音
- 腾讯会议多开一个账号同时登陆手机和电脑
热门文章
- MySql中添加用户,新建数据库,用户授权,删除用户,修改密码
- 最老程序员创业札记:全文检索、数据挖掘、推荐引擎应用29
- html表格鼠标高亮行列,JS实现的表格行鼠标点击高亮效果代码
- chgrp r mysql ._mysql操作命令
- mysql sqlserver对比_很用心的写了 9 道 MySQL 面试题
- python哨兵循环_Python通用循环的构造方法实例分析
- 什么叫组网_5G NSA和SA是什么?有什么不同?
- 手机网页css字体,CSS深入浅出-动态REM(手机专用)
- c语言中菲薄拉次数列,在VB子函数如何写出菲薄拉起数列
- ES5和6的一些新特性