layui table表格单元格之复选框switch

具体看代码,没什么好说的

layui.use(['form','table','element'], function () {
    var $ = layui.jquery,
        form = layui.form,
        table = layui.table,
     	//是否启用模板
    var statusTpl = function (d) { //名字需要和上面定义的名字对应上
      var isCkecked = d.used == "1" ?"checked":"";
      return '<input type="checkbox" value="'+d.id+'" lay-skin="switch" lay-filter="status" lay-text="启用|禁用" '+ isCkecked +'> ';
    };
    table.render({
        elem: '#currentTableId',
        url: 'page/list.php',
        //toolbar: '#toolbarDemo',
        defaultToolbar: ['filter', 'exports', 'print', {
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips'
        }],
        cols: [[
            {type: "checkbox", width: 50},
            {field: 'id', width: 80, title: 'ID', sort: true},
            {field: 'fullname', width: 120, title: '姓名'},
            {field:'used', width: 80, title: '状态',align:'center',templet: statusTpl},// 这个就是用来在表格上显示开关的
            {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
        ]],
        limits: [10, 15, 20, 25, 50, 100],
        limit: 15,
        page: true,
        skin: 'line',
        done: function(res,page,counts){
        //根据id显示中文名
        $.getJSON('api/user_select.json', function(curres){
            var curjson=curres.data;
            //分类显示中文名称
            $("[data-field='curid']").children().each(function(){
                var fieldobj=$(this);
                var curid=fieldobj.text();
                //console.log(cloudid);
                $.each(curjson, function(index, item){
                    //console.log(item.id);
                    if(item.id==curid){
                        fieldobj.text(item.fullname);
                    }
                });
             
            });
        });
        //处理完成
            }
        });
        
        form.on('switch(status)', function(obj){
		// 得到开关的value值,实际是需要修改的ID值。
			console.log(obj);
			var index;
			var tid = obj.value;
			var status = this.checked ? '1' : '0';
			var onoffstr='page/table/switch_onoff.php?id='+tid;
			$.ajax({
				type: 'POST',
				url: onoffstr,
				dataType:'JSON',
				data: {"id" :tid,"status":status},
				beforeSend:function(){
					index = layer.msg('正在切换中,请稍候',{icon: 16,time:false,shade:0.8});
				},
				error: function(data){
					layer.msg('数据异常,操作失败!'); 
				},
				success: function(data){
					if(data.Status){
					setTimeout(function(){
						layer.close(index);
						layer.msg('操作成功!');},2000);
					}else{
						layer.msg('数据异常,操作失败!');
					}
				}
				
			});
		});

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });
        
    });
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注