整理layUI初始化表格，监听等 + 表格拖曳(tableDnD插件)

这次将之前所有的前端页面需要用layUI统一一下，其中还是遇到一些问题。

1.初始化table，table中的各种事件操作

(1)先展示html页面代码

<table class="layui-table" type="hidden" id="bcastMng" lay-filter="demo"></table>

(2)js中初始化table

table.render({elem : '#bcastMng',//表格中的idid : 'bcastMngVerify',//自定义idurl : 'xxxx',// 数据接口contentType : 'application/json',//json格式method : 'post',//请求方式where : {param : param   //参数},page : true, // 开启分页cols : [ [ {field : 'id',title : '序号',hide : true}, {field : 'displayName',title : '文件名',width : 362}, {field : 'timeLength',title : '播放时长',width : 160}, {field : 'regionName',title : '所属区域',width : 340}, {field : 'status',title : '审核状态',width : 180,templet: '#sexTpl',//表格初始化可进行的处理方式event: 'setStatus'//类型于点击事件}, {field : 'createTime',title : '创建时间',width : 260}, {title : '操作',width : 180,toolbar : '#templateStatus'//可添加对当前行数据的操作按钮} ] ],});

(2.1)解释templet

//和表格中templet的标识必须一样
<script type="text/html" id="sexTpl">{{#  if(d.status === 'a'){ }}<span style="color: #00DD00;">{{ d.status }}</span>{{#  } else if(d.status === 'b'){ }}<span style="color: #FF0000;">{{ d.status }}</span>{{#  } else if(d.status === 'c'){ }}<span style="color: #000000;">{{ d.status }}</span>{{# } }}
</script>
//如果js是通过外联的方式，那么这段js必须放在外联js后面(有先后顺序)

效果图

(2.2)解释event

//对表格进行事件处理
table.on('tool(demo)', function(obj) {switch (obj.event) {//处理事件中的类型case 'setStatus'://event中的标识table.on('row(demo)', function(obj){//选取当前一行的数据var data = obj.data;if(data.status === '审核不通过'){//这里我跳转到一个新的页面，并带上我需要的data值layer.open({title: '审核不通过信息',type : 2,area : [ '560px', '320px' ],shade : 0.8,content : [ encodeURI('notPassInfo.html?data='+JSON.stringify(data)), 'no' ]});}//标注选中样式obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');});break;};});

点击“审核不通过”，弹出页面

添加在另外一个页面，获取data值：

//获取跳转过来的url地址(这里是有参数的全部地址)
var url = window.location.href;
//截图内容,并转换为对象，可以获取对象中的内容
var data = eval('(' + decodeURI(url.split("?")[1].split("=")[1]) + ')');

(2.3)解释toolbar

//这里的id和表格中的toolbar中的标识必须一样
//这里的d是框架中的，所以可以直接d.xx得到你想要的值
<script type="text/html" id="templateStatus"><a class="layui-btn layui-btn-primary" lay-event="detail" style="height:25px;line-height:25px;">查看</a>{{# if(d.status === 'a'){}}//判断内容展示不一样的内容在表格中<a href="#" lay-event="pass">审核通过</a>&nbsp;&nbsp;<a href="#" lay-event="notPass">审核不通过</a>{{#}else if(d.status === 'b'){}}<a href="#" lay-event="pass">审核通过</a>{{#}else if(d.status === 'c'){}}{{#}}}
</script>

使用toolbar

//注意event
//lay-event和这里的obj.event是保持一致的
table.on('tool(demo)', function(obj) {switch (obj.event) {case 'pass':$.post(url, 参数, function(r) {if (r.message) {layer.open({//这个方法是关闭所有弹框content : r.message,yes : function(index, layero) {layer.close(index);location.reload();}});}});break;case 'notPass':layer.open({title: '填写审核不通过',type : 2,area : [ '690px', '280px' ],shade : 0.8,content : [ encodeURI('addNotPassInfo.html?status=notPass&id='+obj.data.id), 'no' ]});break;};});

2.表格拖曳功能(tableDnD插件)

//这里的id和拖曳中的id必须相同
//拖曳能否用在layUI自动生成的数据中，未找到解决方法
//layUI自动生成的表格是lay-id，不是id，不能找到处理方法
<table class="layui-table" id="programMng" style="margin-top:-5px;"><thead><tr><td></td><td style='display:none;'>ID</td><td style='display:none;'>真实名称</td><td style='display:none;'>区域</td><td>文件名</td><td>播放时长</td><td>创建时间</td><td>操作</td></tr></thead><tbody id="programBody"></tbody>
</table>

//我的data是个数组，所以循环组合成string字符串
for(var i = 0;i<data.length;i++){html += "<tr class='add'>" +"<td><i class='layui-icon'></i></td>" +"<td style='display:none;'>"+data[i].id+"</td>" +"<td style='display:none;'>"+data[i].a+"</td>" +"<td style='display:none;'>"+data[i].b+"</td>" +"<td>"+data[i].c+"</td>" +"<td>"+data[i].d+"</td>" +"<td>"+data[i].e+"</td>" +"<td><button type='button' onclick='moveMedia(null)' class='layui-btn layui-btn-sm'>移除</button></td>" +"</tr>"
}//添加数据$("#programBody").html(oldHtml+html);//添加拖曳功能initTableDnD();

//这里的拖曳完成后进行的操作，没有具体研究，请尽情补充
//programMng是表格中的id
function initTableDnD(){$("#programMng").tableDnD({//滚动的速度scrollAmount:10,onDragClass:'highlight',//当拖动排序完成后onDrop: function(table,row) {//console.log(table);},onDragStart:function(table,row){//console.log(row.id);},});
}

整理layUI初始化表格，监听等 + 表格拖曳(tableDnD插件)相关推荐

button layui 点击事件_Layui 带多选框表格监听事件以及按钮自动点击写法实例
不话不多说了,直接上代码吧: 获取选中行数据获取选中数目验证是否全选提交选择 id运动名运动时长运动类型 var msg=""; var idlist="" ...
Layui数据表格监听单元格编辑恢复原值
Layui数据表格监听单元格编辑,并获取原值 table.on('edit(test)', function(obj){ //注:edit是固定事件名,test是table原始容器的属性 lay-fi ...
layui中table监听单元格_layui table表格监听头删除不请求后台
表格js function getTable() { var table = layui.table //表格 var username=$("#username").val(); ...
layui表格监听全选_layui表格(表单)的全选功能
最近在使用layui这个框架,其中有用到表格的全选功能,下面记录下我的使用.html文件需要引用的是layui.js和layui.css,但是上面两个文件又会引入其他文件.,如图所示, 所以建议从la ...
layui中table监听单元格_最全总结 | 聊聊 Python 办公自动化之 PPT（中）
点击上方 "AirPython",选择 "加为星标" 第一时间关注 Python 技术干货! 1. 前言上一篇文章简单地介绍了 PPT 的文档结构,并使用 p ...
基于uniapp开发的ZEBRA(斑马) PDA使用广播扫码监听功能（文件配置+插件使用）
一.首先进行DataWedge的配置以ZEBRA TC52为例 1.点击桌面的DataWedge软件 2.点击第一项Profile0(default)进行配置 3.勾选"配置文件已启用&q ...
【整理】fiddler不能监听 localhost和 127.0.0.1的问题
localhost/127.0.0.1的请求不会通过任何代理发送,fiddler也就无法截获. 解决方案 1,用 http://localhost. (locahost紧跟一个点号) 2,用 http ...
Layui表格行监听与字体颜色的改变
文献种类:专题技术总结文献开发工具与关键技术: MVC jq技术作者:彭智豪 :年级:2004 :撰写时间:2021 年 7 月 28日文献编号: ...
layui中监听select下拉框改变事件
前言:使用在如省市区三级联动,二级联动场景等场景一.HTML部分通过lay-filer属性 <div class="layui-form-item"><labe ...

整理layUI初始化表格，监听等 + 表格拖曳(tableDnD插件)

1.初始化table，table中的各种事件操作

2.表格拖曳功能(tableDnD插件)

整理layUI初始化表格，监听等 + 表格拖曳(tableDnD插件)相关推荐

最新文章

热门文章