【layui】table的switch、edit修改

javascript 复制代码
<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

javascript 复制代码
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);
});
相关推荐
雪碧聊技术19 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了21 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light2 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00002 小时前
Vue组件通信方式详解
前端·面试
呆呆的心2 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再2 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down