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 回复