layui数据表格怎么使用switch

提问已结

 18  473

蓝小远 2018-10-10

悬赏：20飞吻

版本：layui

浏览器：

这个是表格初始化：
//初始化Table
	layui.use(['table','form'], function(){
		  var table = layui.table;
          var form = layui.form;
......
 ,{field:'openStatus', title: '启用状态',event: 'setOpenStatus',templet: '#openStatus', unresize: true}
......
            //监听开关操作
            form.on('switch(openStatus)', function(obj){
                alert(1)
                console.log(JSON.stringify(obj)+"!!!!!")
                var params = {};
                if(obj.value == 1){
                    params["openStatus"] = 0;
                }else{
                    params["openStatus"] = 1;
                }
                params["id"] = obj.elem.getAttribute("switchId");
                //编辑策略-启用状态
                modTask(params);
            });
             //监听工具条
	    table.on('tool(sceneStrategy)', function(obj){
......

html部分
<div id="sceneStrategyPage">
		<table class="layui-hide" lay-skin="line" id="sceneStrategy_list" lay-filter="sceneStrategy"></table>
	</div>
	<script type="text/html" id="openStatus">
		<input lay-event="setOpenStatus" type="checkbox" name="openStatus" value="{{d.openStatus}}" switchId={{ d.id}} lay-skin="switch"  lay-text="启用|未启用" lay-filter="openStatus"{{ d.openStatus == 1 ? 'checked' : '' }}>
	</script>
	<script type="text/html" id="sceneStrategy_opt">
		<a lay-event="edit" style="cursor: pointer;"><span class="glyphicon glyphicon-pencil" title="编辑"></span></a>
		<a lay-event="del" style="margin-left:20px;cursor: pointer;"><span class="glyphicon" title="删除"><img src="../../images/sensor_del.png"/></span></a>
	</script>

回帖

圣贤愁

2018-10-10

<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="download">下载</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs" lay-event="comment">评论</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 自定义模板加入表单元素 -->
<script type="text/html" id="isRecommentx">
<input type="checkbox" name="isRecommentx" value={{d.id}} lay-skin="switch" lay-text="是|否" lay-filter="isRight" {{ d.isRecomment == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="play">
	<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="play">播放</a>  
</script>

<script>
var table;
var pageNow = 0;

layui.use(['table','form','admin'], function(){
  table = layui.table;
  var form = layui.form , admin = layui.admin;
  
  
  
  
table.render({
    elem: '#demo'
    ,url:''
    ,loading: true
    ,cols: [[ //标题栏
    	{fixed: 'left',type:'checkbox'}
    	,{type: 'numbers', title: '序号', align:'center'}
        ,{field: 'soundShow_User', title: '所属用户' ,align:'center'}
/*         ,{field: 'soundShow_Lines', title: '所属台词' ,align:'center'} */
        ,{field: 'movieName', title: '所属电影' ,align:'center'}
        ,{field: 'soundShow_Fragment', title: '所属片段' ,align:'center'}
        ,{field: 'recordUrl', title: '录音地址' ,align:'center',templet:'#play'}
        ,{field: 'playCount', title: '播放次数' ,align:'center',sort:true}
        ,{field: 'countShare', title: '分享数量' ,align:'center',sort:true}
        ,{field: 'countLike', title: '点赞数量' ,align:'center',sort:true}
        ,{field: 'countComment', title: '评论数量' ,align:'center',sort:true}
        ,{field: 'isRecomment', title: '是否精选', align:'center',templet: '#isRecommentx'}
        /* ,{field: 'info', title: '描述' ,align:'center'} */
       ,{fixed: 'right', title:'操作', align:'center',width:200, toolbar:'#barDemo' } 
    ]] 
   	,id:'dataTable'
    ,page: true //是否显示分页
    ,isBatchDelete:false //是否开启批量删除
    ,limits: [10,20,30,50]
    ,limit: 20 //每页默认显示的数量
    ,where:{access_token: layui.data('layuiAdmin').access_token}
    ,done: function(res, curr, count){	
        pageNow = curr;
    	form.render();
	
    	
    }
  });
  
  
form.on('switch(isRight)', function(data){
	 if(data.elem.checked == true){
		admin.req({
				url:'',
				type:'POST',
				data:{'id':data.value,'state':1},
				dataType:'json',
				success:function(res){
					layer.msg("已推荐为精选");
				}
		 });
	 }else{
		 admin.req({
				url:'',
				type:'POST',
				data:{'id':data.value,'state':0},
				dataType:'json',
				success:function(res){
					layer.msg("已取消精选");
				}
		 });
	 }
}); 
  

//监听工具条
table.on('tool(demo)', function(obj){
var data = obj.data;

//播放
if(obj.event === 'play'){	
	sessionStorage.setItem("userRecordData",JSON.stringify(data));  
	 layer.open({
		 type:2,
		 offset: '100px',
		 area: ['310px', '38px'],
		 title: false,
		 shadeClose: true,
		 content:"",
		 success:function(){
				
		 }
		});
}
//下载
else if(obj.event === 'download'){
	admin.req({
		url:'',
		type:'POST',
		data:{'id':data.id},
		dataType:'json',
		success:function(res){			
			if(!!res.url){
				window.open(res.url)
			}else{
				layer.msg("找不到下载路径");
			}
		}
	});
}
//评论
else if(obj.event === 'comment'){
	 var link ="";
	 sessionStorage.setItem("recordData",JSON.stringify(data));  
	 location.hash=link;  
}
//删除操作
else if(obj.event === 'del'){
  layer.confirm('确定要删除吗?', function(index){
    admin.req({
        type:"post",
        url:"",
        data:{"id":data.id},
        async:true,
        dataType:'json',//返回的类型
        maxmin: true, //开启最大化最小化按钮
        success:function(value){//返回的对象 
        	 obj.del();
        	  table.reload('dataTable', {page: {curr: 1}});	
        }
    }); 
layer.close(index);
  });
} 。。。。。。。

0 回复

蓝小远

2018-10-11

@蓝小远事实证明，不是初始化table的原因，是我在其他地方，重新渲染了一下，form 比如：
layui.use(['form'], function(){
var form = layui.form;
form.render();
});
所以把原来的表格的form给覆盖掉了

1 回复
蓝小远

2018-10-10

问题是现在我点击编辑操作，也会调用form.on这个方法

0 回复
圣贤愁

2018-10-10

table回调时form.render();了吗,可能要渲染一下

0 回复
蓝小远

2018-10-10

是不是我表格里switch用的不对

0 回复
圣贤愁

2018-10-10

你监听了radio进行操作,就不需要加lay-event来操作了吧

0 回复

圣贤愁

2018-10-10

<!-- 自定义模板加入表单元素 -->
<script type="text/html" id="isRecommentx">
<input type="checkbox" name="isRecommentx" value={{d.id}} lay-skin="switch" lay-text="是|否" lay-filter="isRight" {{ d.isRecomment == 1 ? 'checked' : '' }}>
</script>

我以前做过时可以的

0 回复

蓝小远

2018-10-10
@圣贤愁把event去掉也没有效果
```
,{field:'openStatus', title: '启用状态',templet: '#openStatus', unresize: true}
```
还有就是你说的table回调调用form.render()是怎么用的
0 回复
蓝小远

2018-10-10

@圣贤愁就是我点击编辑的时候，form.on(...这一段，当前表格有多少条数据，会走多少次，比如说有5条数据，会走五次

0 回复
圣贤愁

2018-10-10

@lcy123 你是不是加了行编辑或行点击事件

0 回复

蓝小远

2018-10-10

@圣贤愁

这个是操作列
 ,{field:'right', title: '操作',width:180,align: 'center', toolbar:"#sceneStrategy_opt"}
......
//监听工具条
		  table.on('tool(sceneStrategy)', function(obj){
                    if(obj.event === 'edit'){//信息编辑
                     ....


html部分
<script type="text/html" id="sceneStrategy_opt">
		<a lay-event="edit" style="cursor: pointer;"><span class="glyphicon glyphicon-pencil" title="编辑"></span></a>
		<a lay-event="del" style="margin-left:20px;cursor: pointer;"><span class="glyphicon" title="删除"><img src="../../images/sensor_del.png"/></span></a>
	</script>

0 回复

圣贤愁

2018-10-10

@lcy123 看你截的代码没什么问题啊,能截全部代码吗？我是没看出什么问题,可能是你form.on那部分没放到最外层？

0 回复

蓝小远

2018-10-10

//初始化策略列表
function initTable(){
	//初始化Table
	layui.use(['table','form'], function(){
		  var table = layui.table;
          var form = layui.form;
		  table.render({
			  elem: '#sceneStrategy_list'
		    ,url:'xxxxxx'
		    ,method:'post'
		    ,contentType: 'application/json'
		  ....
		    ,cols: [[
		      ,{field:'openStatus', title: '启用状态',templet: '#openStatus', unresize: true}
                     ...
		      ,{field:'right', title: '操作',width:180,align: 'center', toolbar:"#sceneStrategy_opt"}
		    ]]
		    ,page: true
		  });
            //监听开关操作
            form.on('switch(openStatus)', function(obj){
                alert(1)
                console.log(JSON.stringify(obj)+"!!!!!")
                var params = {};
                if(obj.value == 1){
                    params["openStatus"] = 0;
                }else{
                    params["openStatus"] = 1;
                }
                params["id"] = obj.elem.getAttribute("switchId");
                  ...
            });
		  //监听工具条
		  table.on('tool(sceneStrategy)', function(obj){
		      console.log(JSON.stringify(obj)+"%%%%%%%%")
		     if(obj.event === 'edit'){//信息编辑
		        // 编辑赋值
                giveEdit(obj.data);
                form.render();
            }
    });
		
}

0 回复

圣贤愁

2018-10-10

@蓝小远没看出问题 ,还有干嘛要把页面加载和操作等放好函数方法里面,直接那样也有效果的,时下不放在里面看看

0 回复
蓝小远

2018-10-10

能展示一下吗

0 回复
蓝小远

2018-10-10

@圣贤愁谢谢，容我好好对比下

0 回复

蓝小远

2018-10-11

@圣贤愁老铁，我看了一下，是我编辑方法写的有问题，编辑方法里面又重新渲染了表格方法

...
else if(obj.event === 'edit'){//信息编辑
		        // 编辑赋值
                giveEdit(obj.data);
                // form.render();
            }
...
//编辑赋值
function giveEdit(data){
...
//赋值分组列表
        initGroupTable(groupInfoList);                           这里初始化另外一个数据表格了
...

0 回复

肥仔聪

2018-10-11

0 回复