【layui】table的switch、edit修改

<title>简单表格数据</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a>系统设置</a>
        <a>简单表格数据</a>
    </div>
</div>

<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
    <div class="layui-card-header">简单表格数据</div>
    <div class="layui-card-body">
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            </div>
        </script>
        <table class="layui-hide" id="test" lay-filter="test"></table>
        <script type="text/html" id="table_status">
            <input type="checkbox" name="kaiguan" value="{{d.id}}" lay-skin="switch" 
            lay-text="开启|禁止" class="layui-input" {{ d.kaiguan === 1 ? 'checked' : '' }} lay-filter="checkbox_status">
        </script> 
    </div>
</div>
</div>
</div>
</div>

<script>
layui.use(['admin','table', 'view', 'form', 'util','setter','layer','ourJs'], function(){
    var $ = layui.$
        ,admin = layui.admin
        ,setter = layui.setter
        ,element = layui.element
        ,form = layui.form
        ,view = layui.view
        ,layer = layui.layer
        ,util = layui.util
        ,table = layui.table
        ,ourJs = layui.ourJs
        ,router = layui.router();

    table.render({
        elem: '#test'
        ,url:'./user.json'
        ,toolbar: '#toolbarDemo'
        ,cols: [[
            {field:'id', width:90, title: 'ID', sort: true, align: 'center'}
            ,{field:'username', title: '用户名', align: 'center'}
            ,{field:'sex', title: '性别', align: 'center'}
            ,{field:'city', title: '城市',edit: 'text', align: 'center'}
            ,{field:'kaiguan', title: '开关', align: 'center',width: 96,templet: '#table_status'}
            ,{field:'experience', title: '积分', align: 'center'}
            ,{field:'classify', title: '职业', align: 'center'}
            ,{field:'wealth', title: '财富', align: 'center'}
        ]]
        ,page: true
    });
  	//监听工具条
  	//===edit的修改
    table.on('edit(test)', function(obj){
        var value = obj.value;
        if(obj.field === 'city'){
            admin.req({
                url: layui.setter.baseUrl + '接口地址'
                ,data: { id: obj.data.id, city: value }
                ,type: 'post'
                ,success: function (res) {
                    if (res.code == 1) {
                        layer.msg(res.msg, {icon: 1,shade:0.5,time: 1000});
                    } else {
                        layer.msg(res.msg, {icon: 5,anim: 6,shade: 0.5,time: 1000});
                    }
                }
            });
        }
    });
    // 监听菜单状态修改
  	//===switch的修改
    form.on('switch(checkbox_status)', function (e) {
        var _this = this, status = e.elem.checked;
        admin.req({
            url: layui.setter.baseUrl + '接口地址'
            ,data: { id: e.value,kaiguan: status?'1':'0' }
            ,type: 'get'
            ,success: function (res) {
                if (res.code == 1 || res.code == 0) {
                    ourJs.status_tong(table, _this, status);
                } else {
                    layer.msg(res.msg, { icon: 5, anim: 6, shade: 0.5, time: 1000 });
                }
            }
        });
    });
    
});
</script>

/static/admin/src/controller/ourJs.js

layui.define(['jquery'],function(exports) {
    var $ = layui.jquery;
    var obj={
        status_tong:function(table,_this,status,type)
        {
            type=type==undefined?'status':type;
            var arr=table.cache;
            var data='';
            for(var i in arr){
                data=arr[i];
            }           
            var td=$(_this).parent().parent();
            var tr=td.parent().attr('data-index');
            if (status === true) {
                status = 1;
            } else {
                status = 0;
            }
            for(var i in data[tr]){
                if(i==type){
                    data[tr][i]=status;
                    break;
                }
            }
            
        }
    }
    exports("ourJs", obj);
});