【layui】table的switch、edit修改

embedded/2024/11/24 16:07:14/

在这里插入图片描述

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);
});

http://www.ppmy.cn/embedded/140157.html

相关文章

03系统设计之商业业务平台(D2_【秒杀抽奖】秒杀系统设计)

目录 学习前言 一、基本介绍 二、解决方案 1. 秒杀中的削峰 方案一&#xff1a;消息队列 答题器 数据过滤 2. 秒杀中的服务性能优化 三、知识小结 四、参考文献 学习前言 提示&#xff1a;这个章节会重新梳理。 一、基本介绍 秒杀请求在高度集中在某一个时间点。这…

【人工智能】AutoML自动化机器学习模型构建与优化:使用Auto-sklearn与TPOT的实战指南

解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 机器学习模型的构建和优化是一个复杂且耗时的过程,涉及特征工程、模型选择、超参数调优等多个环节。AutoML(Automated Machine Learning)旨在通过自动化的方式来简化这些流程,提高开发效率并提升模型表现。Au…

Redis入门(九)

Redis地理空间&#xff08;GEO&#xff09; 简介 从版本 3.2 开始&#xff0c;Redis 引入了地理空间支持&#xff0c;允许用户在 Redis 中存储地理位置信息&#xff0c;并执行一些与地理位置相关的操作。 原理 将球体转换为平面&#xff0c;区块转换为一点 基本命令 1.G…

next build报错bash: next: command not found

相关背景&#xff1a;我有个next.js项目&#xff08;第一次使用next.js框架&#xff09;&#xff0c;想构建一下&#xff0c;发现报错了&#xff0c;没有该命令。 &#xff08;ps&#xff1a;我测试用的是&#xff1a;yarn dev&#xff09; 然后我用everything全局搜了下 next…

9.局部变量和全局变量

局部变量 定义在函数体内部的变量&#xff0c;只在函数体内部生效。 全局变量 定义在函数体的外面的变量&#xff0c;所有的函数都可以使用。 global关键 函数内部声明的变量为全局变量。 函数里对全局变量进行修改&#xff0c;要想生效&#xff0c;需要用global声明。 …

uniapp接入BMapGL百度地图

下面代码兼容安卓APP和H5 百度地图官网&#xff1a;控制台 | 百度地图开放平台 应用类别选择《浏览器端》 /utils/map.js 需要设置你自己的key export function myBMapGL1() {return new Promise(function(resolve, reject) {if (typeof window.initMyBMapGL1 function) {r…

分类算法——基于heart数据集实现

1 heart数据集——描述性统计分析 import matplotlib.pyplot as plt import pandas as pd# Load the dataset heart pd.read_csv(r"heart.csv", sep,)# Check the columns in the DataFrame print(heart.columns)aheart.loc[:, y].value_counts() print(a) heart.l…

【C++】二叉搜索树详解:插入、删除、查找的最佳实践与优化策略

个人主页: 起名字真南的CSDN博客 个人专栏: 【数据结构初阶】 &#x1f4d8; 基础数据结构【C语言】 &#x1f4bb; C语言编程技巧【C】 &#x1f680; 进阶C【OJ题解】 &#x1f4dd; 题解精讲 目录 &#x1f4cc; 前言&#x1f4cc; 1 二叉搜索树的概念&#x1f4cc; 2 二叉…