整理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',//表格中的id
		id : 'bcastMngVerify',//自定义id
		url : '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'>&#xe65f;</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);
	    },
    });
}