layui 数据表格 新增一行

第一件事 先把 闲心大佬的官网 贴上 :layui 官网

layui 数据表格中  新增一行 

官网拉下来的一个 大体结构就这样  <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Demo</title><!-- 请勿在项目正式环境中引用该 layui.css 地址 --><link href="//unpkg.com/layui@2.9.9/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<table class="layui-hide" id="ID-table-demo-templet"></table><!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.9.9/dist/layui.js"></script>
<script>
layui.use(['table'], function(){var table = layui.table;var form = layui.form;// 创建渲染实例table.render({elem: '#ID-table-demo-templet',url:'/static/json/2/table/user.json', // 此处为静态模拟数据,实际使用时需换成真实接口page: true,height: '315px',cols: [[{type: 'checkbox', fixed: 'left'},// 未自定义模板的普通列{field:'id', fixed: 'left', width:80, title: 'ID', sort: true},// 模板 - 选择器写法{field:'username', width:80, title: '用户', templet: '#ID-table-demo-templet-user'},// 模板 - 函数写法{field:'sex', width:60, title: '性别', templet: function(d){if(d.sex === '男'){return '<span style="color: blue">♂</span>';} else {return '<span style="color: pink">♀</span>';}}},// 模板 - 普通字符写法{field:'city', width:115, title: '城市', templet: '<div><i class="layui-icon layui-icon-location"></i> {{= d.city }}</div>'},// 模板中可包含任意字段、任意内容(如表单等){title: '状态', width:85, templet: '#ID-table-demo-templet-switch'},{title: '其他', minWidth:200, templet: '#ID-table-demo-templet-other'}]]});// 状态 - 开关操作form.on('switch(demo-templet-status)', function(obj){var id = this.value;var name = this.name;layer.tips(id + ' ' + name + ': '+ obj.elem.checked, obj.othis);});
});
</script></body>
</html>

直接按钮调用 下面使用方法:

我是在表头按钮增加的 switch (obj.event) {case 'getAddline':var getTblist = layui.table.cache['表格设置的id'];   //获取当前表格中数据//创建添加行 newBak = {   // key字段是上面的  field 设置的名称"fddesc": "", "xlh": "", "fdname": "", "fddefault": ""};getTblist.push(newBak);  // 创建的塞入原本的 然后重载// console.log('加载一次 新增一行字段!')table.reloadData('表id', {  // 我这个reloadData是只重载数据和结构无关 可去官网查看 data: getTblist,}, function (res) {console.error(res);});break;};

可用 直接用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/675185.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cmake进阶:目录属性之 INCLUDE_DIRECTORIES说明一

一. 简介 前一篇文章学习了 cmake的一些目录属性&#xff0c;其中最重要的是 头文件搜索路径。文章如下&#xff1a; cmake进阶&#xff1a;目录属性说明一-CSDN博客 本文主要学习 一个目录属性 INCLUDE_DIRECTORIES&#xff0c;即头文件搜索路径。 二. cmake进阶&#xff1…

VMware导入ova/ovf虚拟机文件

1.文件-打开-ova文件 2.为新虚拟机起名称 3.等待导入 4.导入完成&#xff0c;可以开始使用 参考链接&#xff1a;VMware导入ova/ovf虚拟机文件

2024年CMS市场的份额趋势和使用统计

目前市面上有超过一半的网站都是使用CMS来搭建的&#xff0c;据不完全统计&#xff0c;现在大概有900多种CDM可供选择&#xff0c;以下是最常见的CMS的市场份额和使用率信息&#xff1a; 除了WordPress以外&#xff0c;Shopify和Wix也是比较流行的内容管理系统&#xff0c;尤其…

使用pandas的merge()和join()函数进行数据处理

目录 一、引言 二、pandas的merge()函数 基本用法 实战案例 三、pandas的join()函数 基本用法 实战案例 四、merge()与join()的比较与选择 使用场景&#xff1a; 灵活性&#xff1a; 选择建议&#xff1a; 五、进阶案例与代码 六、总结 一、引言 在数据分析和处理…

无卤素产品是什么?有什么作用?

无卤素产品&#xff0c;即在生产过程中完全不使用卤素元素——氟、氯、溴、碘等——的产品。 卤素元素&#xff0c;虽然在电子设备、材料等领域应用广泛&#xff0c;却也可能潜藏危害。其阻燃剂&#xff0c;一旦在产品生命周期结束后释放&#xff0c;将对土壤和水体造成污染&a…

Linux Systemd基础教程

一、什么是systemd&#xff1f; systemd是Linux系统的一套基本构建模块。它提供了一个系统和服务管理器&#xff0c;作为PID 1运行并启动系统的其余部分。 systemd提供积极的并行化功能&#xff0c;使用套接字和D-Bus激活来启动服务&#xff0c;提供按需启动守护进程&#xf…

便捷的驾驶证识别API,简化工作流程

随着社会的发展和人们生活水平的提高&#xff0c;机动车的数量也越来越多。为了确保交通安全和减少违法行为&#xff0c;每个驾驶机动车的人都需要携带驾驶证。然而&#xff0c;识别驾驶证上的信息却是一个繁琐的过程。为了简化这个工作流程&#xff0c;提高工作效率&#xff0…

项目管理-项目绩效域1/2

项目管理&#xff1a;每天进步一点点~ 活到老&#xff0c;学到老 ヾ(◍∇◍)&#xff89;&#xff9e; 何时学习都不晚&#xff0c;加油 1.项目绩效域--整体框架 项目绩效域 重点&#xff1a; ①八大绩效域的含义。 ②八大绩效域的问题和解决方案。 ③八大绩效域与十大管…

信息系统安全与对抗-网络侦查技术与网络扫描技术(期末复习)

1、网络拓扑结构在网络攻击中的作用 查明目标网络的拓扑结构&#xff0c;有利于找到目标网络的关键节点&#xff0c;从而提高攻击效率&#xff0c;达到最大攻击效果。 2、网络侦查在网络攻击中的作用 识别潜在目标系统&#xff0c;确认目标系统适合哪种类型的攻击。 3、百度…

Verilog刷题笔记47

题目&#xff1a; From a 1000 Hz clock, derive a 1 Hz signal, called OneHertz, that could be used to drive an Enable signal for a set of hour/minute/second counters to create a digital wall clock. Since we want the clock to count once per second, the OneHer…

如何搜索空文件夹_名称为(纯或含)中/英/数/符

首先&#xff0c;需要用到的这个工具&#xff1a; 度娘网盘 提取码&#xff1a;qwu2 蓝奏云 提取码&#xff1a;2r1z 打开工具&#xff0c;切换到批量文件复制版块&#xff0c;快捷键Ctrl5 点击右侧的搜索添加 设定要搜索的范围、指定为文件夹、包括子目录&#xff0c;勾选…

英语新概念2-回译法-lesson12

第一次翻译 &#xff08;稀巴烂&#xff09; Our neiborhood,Capitain Charles Alison,will sail from P. We will ______ in the _. He will sit in his small boat, Topsail,Topsail is a famous boat. It has been across the A many times. Alison will sail at 8 o’cloc…