layui的表格可以动态添加行吗_Layui数据表格动态添加行的处理方式(原生HTML方式)...
项目需求:动态的增加表格行数据,并且单元格允许支持下拉框。
解决步骤:
1、编写表格头部内容
信息项名称
信息项编码
信息项类型
信息项长度
是否为空
显示序号
是否共享
共享方式
是否公开
公开方式
操作
2、编写动态生成数据行的JS代码,使用拼接HTML方式,具体逻辑可参考代码。(此方法比较繁琐,亦可用其他方式)
$(document).ready(function(){
layui.use(['jquery','table','form'], function(){
var table = layui.table,
$ = layui.jquery,
form = layui.form;
//添加行按钮
$(".add_tr_btn").click(function(){
var tableRow = HTable.ADD_TR(HTable.trNum);
var trObj = $("#resTable").children('tbody').find('tr');
var tbody = $("#resTable").find('tbody');
tbody.append(tableRow);
form.render();
});
//保存按钮
$(".add_res_btn").click(function(){
//var json = $(".res_field_form").serializeJSON();
var result = $(".res_field_form").parseFormJSON();
alert(JSON.stringify(result));
});
});
});
//定义HTable对象
window.HTable = {
trNum:1,
count:0,
DEL_TR:function(trNum){
$("#tr"+trNum).remove();
this.trNum--;
if(this.trNum==0){
this.trNum=1;
}
this.count--;
if(this.count<0){
this.count=0;
}
$("#count").text(this.count);
},
ADD_TR:function(trNum){
var IsNullHtml = "是否";
var IsShareHtml = "是否";
var ShareTypeHtml = "有条件无条件";
var IsPublicHtml = "是否";
var PublicTypeHtml = "有条件无条件";
var result = "
"+
""+
""+
""+
""+
""+IsNullHtml+""+
""+
""+IsShareHtml+""+
""+ShareTypeHtml+""+
""+IsPublicHtml+""+
""+PublicTypeHtml+""+
"";
this.trNum++;
this.count++;
$("#count").text(this.count);
return result;
},
TR_ROW:function(trNum,trHtml){
}
}
说明:
1)HTable.DEL_TR是直接绑定到标签中,亦可考虑动态绑定的方式。
2)HTable对象中主要定义了增加行、删除行方法,并且以当前行的Index作为参数。
3)暂未考虑现实序号,由于动态选择删除行,需要重新绘制序号,增加了额外工作量,所以仅在顶部展示目前以增加的数量。
3、将动态表格中的数据行转成JSON数组的形式提交到后台。
//原生JS的方式实现构建JSON数组
$.fn.parseFormJSON = function (){
var result = [];
var json = {};
var data = this.serializeArray();
if(data.length==0){
return [];
}else{
for(var i=0; i
说明:1)可使用原生的JS方式实现组装成JSON数组;2)亦可以参考jquery.serializeJSON的实现方式,但此种方式提交的数据为JSON对象,需要到后台再进行一次转换才行。
ADD_TR:function(trNum){
var IsNullHtml = "是否";
var IsShareHtml = "是否";
var ShareTypeHtml = "有条件无条件";
var IsPublicHtml = "是否";
var PublicTypeHtml = "有条件无条件";
var result = "
"+
""+
""+
""+
""+
""+IsNullHtml+""+
""+
""+IsShareHtml+""+
""+ShareTypeHtml+""+
""+IsPublicHtml+""+
""+PublicTypeHtml+""+
"";
this.trNum++;
this.count++;
$("#count").text(this.count);
return result;
},
TR_ROW:function(trNum,trHtml){
}
layui的表格可以动态添加行吗_Layui数据表格动态添加行的处理方式(原生HTML方式)...相关推荐
- layui数据表格接口_layui数据表格实现重载数据表格功能(搜索功能)
layui数据表格实现重载数据表格功能,以搜索功能为例 加载数据表格 实现搜索功能和数据表格重载 全部代码 加载数据表格 按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
- layui数据表格如何获取id_LayUI之table数据表格获取行、行高亮等相关操作
前言 目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
- js layui跳转页面_Layui数据表格跳转到指定页的实现方法
Layui数据表格跳转到指定页的实现方法 1.获取数据表格下分页组件中的页码输入框,具体元素在Elements中位置如下 2.获取上述input并设置其value属性值为目标跳转页面页码 $(&quo ...
- layui表格更改一列数据_layui数据表格隐藏列的方法介绍
在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性. table.render({ elem: '#test' ,url:'${p ...
- layui 传递前端请求_Layui数据表格 前后端json数据接收的方法
先上效果图: 前端数据表格: 编号菜单名称菜单路径菜单图标菜单子菜单操作 编辑 删除 js代码 $(function () { //注意:这里是数据表格的加载数据,必须写 layui.use(['ta ...
- layui修改table中的按钮_layui数据表格中如何设置按钮切换(是否置顶)与分页居中...
手记1 一.数据表格中按钮切换(置顶与取消) 在layUI数据表格中是可以使用toolbar设置表格内的按钮 使用laytel语法 置顶 {{# if(d.order>0){ }} 取消 {{ ...
- layui当前表格第一行_layui数据表格新增一行
方案一 layui的数据表格集成了查看编辑删除等功能,但新增功能官方文档却没有提及,当业务需求需要点击新增一行时,可用如下方式实现 实现的思路是:当点击新增一行时,把之前的数据保存下来,并在数据尾部增 ...
- layui 数据表格下拉框_LayUi数据表格中嵌套下拉框
layui嵌套下拉框实用方法(附效果图) 在做项目时遇到一个问题,在layui 的数据表格table里面如何做一个下拉框呢?效果图如下: 这样的效果想必是最理想的了 思路分析: 我们可以通过layui ...
- 获取layui表格单元格的数据_Layui数据表格之获取表格中所有的数据方法
数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的JS对象数组用来保存数据表格中的原 ...
- laytpl遍历实体列表_Layui数据表格之获取表格中所有的数据方法
数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的js对象数组用来保存数据表格中的原 ...
最新文章
- 技术走向管理一些思考(1)-性格特质和自我管理
- python在哪里写代码比较适合-适合练习的10个Python项目,每个项目都不到500行代码...
- python提取数据包中的文件_Python-对Pcap文件进行处理,获取指定TCP流
- boost::geometry::util::calculation_type用法的测试程序
- codeblock socket 编译错误_从Linux源码看Socket(TCP)Client端的Connect
- Powercli的一些使用案例
- 查看linux版本的三种常用方法
- 201571030128/201571030118《小学四则运算练习软件软件需求说明》结对项目报告
- 学习easyui疑惑(四)
- 坐拥270亿参数!阿里达摩院发布超大规模语言模型PLUG,上能写诗词歌赋、下能对答如流...
- python 常见的异常类型
- 拓扑排序 Codeforces Round #290 (Div. 2) C. Fox And Names
- linux 命令 — cut
- 在一起计时器_拥有计时器的四个怪兽,一个从杰克身上拿的,一个差点打死赛罗...
- 学习 altera官网 之 timequest
- html 下划线居中,Word里下划线上内容怎么在下划线范围内居中?
- 计算机常用英语单词(带音标)
- tf卡可以自己裁剪成nm卡_手头这多卡—到底哪款TF卡才值得购买?
- 极客公园:正版音乐的前路漫漫
- matlab 超分辨率,matlab超分辨率
热门文章
- ASP.NET页面传值之Server.Transfer
- IP Helper API 简介
- asp.net窗体验证123
- css3弹性盒子+小程序布局
- 仿微信图片上传,带加号,且超过最大数隐藏
- java与python结合使用_Java与Python使用grpc跨平台调用
- .net5项目托管到iis无法访问
- oracle如何创建基表,创建本地基表的物化视图
- 编译OpenJDK8-u332:/bin/sh: 1: [: -a: unexpected operator/line 0: [: too many arguments
- MAC系统上grep使用办法