欢迎光临
我的个人博客网站

LayUI中table组件中如何使用switch开关

在table组件中,加载后台数据的时候,就在页面上显示一个开关值,直接在页面上选中开关可以进行数据更改。

1.首先在table组件中,利用它模板的去显示这个开关

——————————————————————————————————————————————————————————–

table.render({
  elem: ‘#demo’ //指定原始表格元素选择器(推荐id选择器)
  ,height: 315 //容器高度
  ,cols: [{
        filed:’status’,title:’状态’,templet:’#statusTemp’ // 这个就是用来在表格上显示开关的。
}] //设置表头
  //,…… //更多参数参考右侧目录:基本参数选项
});

——————————————————————————————————————————————————————————-

2.编写模板代码:

——————————————————————————————————————————————————————————-

<script type=”text/html” id=”statusTemp”>
{{#  if(d.media.status==1){ }}
    <input type=”checkbox” name=”status” lay-skin=”switch” checked   lay-text=”开启|关闭”  value= {{ d.media.id}}  lay-filter=”status” >
{{#  } else { }}
    <input type=”checkbox” name=”status” lay-skin=”switch”  lay-text=”开启|关闭”  value= {{ d.media.id} lay-filter=”status” >
{{#  } }}

 

——————————————————————————————————————————————————————————-

 

3.在js中监听switch的事件:

———————————————————————————————————————————————————————————

form.on(‘switch(status)’, function(data){
 
 
// 得到开关的value值,实际是需要修改的ID值。
var id = data.value;
var status = this.checked ? ‘1’ : ‘0’;
 
$ajax({
  var index;
  type: ‘POST’,
  url: ‘/hetong/setAlert/’,
  data: {“id” :id,”status”:status  },
  beforeSend:function(){
     index = layer.msg(‘正在切换中,请稍候’,{icon: 16,time:false,shade:0.8});     
      },
  error: function(data){
      console.log(data);              
      layer.msg(‘数据异常,操作失败!’);
           },
  success: function(data){  
  if(data.result==”SUCCESS”){
    setTimeout(function(){
        layer.close(index);
        layer.msg(‘操作成功!’);},2000);  
      }else{
        console.log(data);
        layer.msg(‘数据异常,操作失败!’);
       }},          
  dataType:’JSON’
});
 
 
});

 

———————————————————————————————————————————————————————————–

 

原文引自https://blog.csdn.net/weixin_38109191/article/details/90348477

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » LayUI中table组件中如何使用switch开关
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏