好资源导航 » 文章资讯 » 在Layui中操作数据表格,给指定单元格添加事件示例

在Layui中操作数据表格,给指定单元格添加事件示例

2023-08-10 08:35:05 67

最近入坑Layui这个为服务端程序员量身定做的前端框架。

为什么不用vue结合各种流行前端框架Element、iView啊什么，后台大哥们不会啊！！！

只好我来迁就他们呢，还得一点一点儿的学起来。

当我们在操作数据表格的时候，并不是一定要点击表格工具栏中的“查看”按钮，来进行查看，而是点击某一特定的列来进行某些数据查看。例如下图这样。

这就涉及到表格的自定义事件。代码如下：

//需要渲染的表格

vartableInit=function(data){
table.render({
elem:'#task-list'
,height:472
,title:'决策场景信息'
,limit:data.length+1
,page:{
theme:'#1E9FFF',
layout:['prev','page','next','skip','count','limit']//自定义分页布局
,limit:10
,groups:1//只显示1个连续页码
,first:false//不显示首页
,last:false//不显示尾页
}
,cols:[[
{field:'id',title:'序号',width:60,style:'font-size:12px;color:#666'},
{field:'modelNum',title:'场景模型编号',style:'font-size:12px;color:#666'},
{field:'modelName',title:'场景模型名称',style:'font-size:12px;color:#666'},
{field:'taskNum',title:'当前任务编号',style:'font-size:12px;color:#666'},
{field:'taskLevel',title:'当前任务阶段',width:150,templet:"#level",style:'font-size:12px;color:#666'},
{field:'report',title:'报告',width:60,event:'viewReport',templet:"#reportID",style:'font-size:12px;color:#666;cursor:pointer'},
//这里设置event，事件名称自定义。
{field:'history',title:'历史任务',width:100,style:'font-size:12px;color:#666'},
{
fixed:'right',
title:'操作',
width:100,
toolbar:"#table-linetoolbar",
align:'center',
style:'font-size:12px;color:#666'
}
]]
,cellMaxWidth:100
,parseData:function(res){
returnres;
}
,data:data
,id:'task-list'
});

table.on('tool(task-list)',function(obj){
letevent=obj.event;

if(event==="viewReport"){
//处理你的业务逻辑
}
}

这样就可以给某特定列设置自定义事件了。

以上这篇在Layui中操作数据表格,给指定单元格添加事件示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

在Layui中操作数据表格,给指定单元格添加事件示例

热门推荐

随机推荐