文档章节

JS 无限长form表单提交

o
 osc_y8yehimr
发布于 2019/03/20 16:14
字数 818
阅读 24
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

1 简介

  开发时候,总会遇到根据后台传的变量{组件数}来动态渲染组件的情况,比如后台传命令要绑定10个父子关系,则前台展开十个input组件,后台决定绑定5个福字关系,则前台展开5个input组件.再比如,每个门店可以针对每个商品类型设置安全库存,那么随着厂家生产的商品类别增加,则前端动态增加form->input组件.

  思路:借用smarty魔板(没有smarty则需要js源生一个个添加组件),根据商品类别变量{$count} ,foreach渲染出表格;表格的每一行有input框.给每一行 <tr> 设置以固定字符串str+key的id,点击确定提交时,获取从str0到str{$count}的input值,集合到一个数组当中,ajax提交到api.

   

2 源码讲解

  2.1 html部分

    

<table class="layui-table">
    <thead>
    <tr>
        <th>产品ID</th>
        <th>产品型号</th>
        <th>产品名称</th>
        <th>当前库存</th>
        <th style="width: 15%; ">满库存值</th>
        <th style="width: 15%; ">低库存值</th>
    </tr>
    </thead>
    <tbody>
    {foreach $have_inventories as $key =>$vo}
    <tr id = "tb1tr{$key}">
        <td>{$vo.product_id}</td>
        <td>{$vo.product.type}</td>
        <td>{$vo.product.name}</td>
        <td>{$vo.now_inventory}</td>
        <td><input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="layui-input" placeholder="请输入" name="max_inventory" value="{$vo.max_inventory}"></td>
        <td><input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="layui-input" placeholder="请输入" name="min_inventory" value="{$vo.min_inventory}"></td>
    </tr>
    {/foreach}
    {foreach $nohave_products as $key => $vo}
    <tr id = "tb2tr{$key}">
        <td>{$vo.id}</td>
        <td>{$vo.type}</td>
        <td>{$vo.name}</td>
        <td>{$vo.now_inventory}</td>
        <td><input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="layui-input" placeholder="请输入" name="max_inventory" value=""></td>
        <td><input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="layui-input" placeholder="请输入" name="min_inventory" value=""></td>
    </tr>
    {/foreach} </tbody> </table>

 

     2.2 js部分 (onclick事件)

 

    

    var gettr1,id1,max1,min1   //初始化变量:tr1部分的节点,节点id->child值,节点id->input值
        var gettr2,id2,max2,min2
        var newdata = new Array(); //初始化数组
        for(var i = 0;i<"{$have_count}";i++){
            var itemobj = {
                wid : 0,wtype : 0,prid : 0,max : 0,min : 0,
            }
            itemobj.wid = "{$warehouse_id}";
            itemobj.wtype = "{$warehouse_type}";
            gettr1 = document.getElementById('tb1tr'+i)
            id1 = gettr1.children[0].innerHTML;
            max1 = gettr1.children[4].children[0].value;
            min1 = gettr1.children[5].children[0].value;
            max1 = (max1 == ''||max1 == undefined)? 0:max1;
            min1 = (min1 == ''||min1 == undefined)? 0:min1;
            itemobj.prid = id1;
            itemobj.max = max1;
            itemobj.min = min1;
            newdata.push(itemobj);
        }
        for(var i = 0;i<"{$nohave_count}";i++){
            var itemobj = {
                wid : 0,wtype : 0,prid : 0,max : 0,min : 0,
            }
            itemobj.wid = "{$warehouse_id}";
            itemobj.wtype = "{$warehouse_type}";
            gettr2 = document.getElementById('tb2tr'+i)
            id2 = gettr2.children[0].innerHTML;
            max2 = gettr2.children[4].children[0].value;
            min2 = gettr2.children[5].children[0].value;
            max2 = (max2 == ''||max2 == undefined)? 0:max2;
            min2 = (min2 == ''||min2 == undefined)? 0:min2;
            itemobj.prid = id2;
            itemobj.max = max2;
            itemobj.min = min2;
            newdata.push(itemobj);
        }
        if(newdata.length == "{$have_count + $nohave_count}"){
            $.ajax({
                url: '{$action}',
                type: 'POST',
                dataType : "TEXT",
                data: {
                    newdata:newdata,
                    do:'edit'
                },
                success:function(data){
                    data = eval("("+ data+ ")");
                    if(data.code === 0) {
                        layer.msg(data.msg, {icon: 1}, function(){
                            // 关闭本iframe层
                            // 父页面刷新
                        });
                    } else {
                        //报错
                    }
                }
            })
        }else{
            //报错
        }

 

 

 

3 结尾

      ① 每个<tr>中有两个input,说明要用二维数组来提交(当然分成两个数组提交也可以,但没必要).js中,二维数组可以传入对象,每个对象存储一个<tr>的两个input值.

      ② 每次给数组添加对象时,需要重新生成一个新的对象,不然数组中所有一维数组都相同(因为是同一个对象,这个地方在下踩到了坑,为了简化代码,将对象初始化放到了全局)

      ③ 可以不选择id赋str+key的形式,可以直接遍历页面所有tr获取,只是个人觉得加了id将使得思路更清晰

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
表单验证插件--Jquery表单验证插件

目前支持对以下格式的值进行验证: cnum-(纯数字), char-(纯字母), zwen-(中文), bysc-(字母开头), mail(邮箱), yzbm(邮政编码) 其中的‘’表示长度,比如“zwen1-5”表示中文1-5位的长度。同...

huanganiu
2013/01/23
4.4K
0
Javascript图元绘制库--ternlight

基于HTML CANVAS API的Javascript库,提供在HTML页面上绘制图元——如流程图的能力。 目前已支持简单的矩形图元和图元间的连线(直线、直角连线两种),拖拽图元等能力。 该javascript librar...

fancimage1
2013/02/07
6.2K
1
JavaScript 服务器页--JSSP

JSSP (JavaScript Server Pages) 可以让你在 Java 的应用服务器上使用 JavaScript 生成网页。支持已有的 Java 包和嵌入式 SQL 命令。包含 Dervish 这个 JavaScript 交互操作包用于简化 Ajax...

匿名
2013/02/11
3.8K
0
Promises/A 和 when() 实现--When.js

When.js 是 cujojs 的轻量级的 Promises/A 和 when() 实现,从 wire.js 的异步核心和 cujojs 的 IOC 容器派生而来。包含很多其他有用的 Promiss 相关概念,例如联合多个 promiss、mapping 和...

匿名
2013/02/15
7.4K
0
数据库表单生成器--SQLScreens

SQLScreens 是一个使用 Tcl/TK 编写的简单关系型数据库表单生成工具。可让你快速创建查询界面,并指定相应的表和字段。支持多种数据库,包括:MySQL, SQLite, and INFORMIX, and ODBC for o...

匿名
2013/02/17
890
0

没有更多内容

加载失败,请刷新页面

加载更多

算法与数据结构体系课

算法与数据结构体系课【超清原画】 下载地址:百度云盘 从0到工作5年,面试、进大厂、搭建知识体系、拓展技术上限 你不再需要其它算法与数据结构课程了 为什么学算法已经是一个不应该问的问题...

1930133570
58分钟前
21
0
如何停止跟踪并忽略对Git中文件的更改? - How to stop tracking and ignore changes to a file in Git?

问题: I have cloned a project that includes some .csproj files. 我已经克隆了一个包含一些.csproj文件的项目。 I don't need/like my local csproj files being tracked by Git (or bei......

富含淀粉
今天
25
0
Redis阻塞

可能存在问题 内在原因:API或数据结构使用不合理、CPU饱和、持久化阻塞等 外在原因:CPU竞争、内存交换、网络问题等 问题处理: API或数据结构使用不合理,可能存在慢查询或者大对象: 发现...

游泳鸟
今天
17
0
OSChina 周五乱弹 —— 来人,上幼儿园老师跳舞的图!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 小小编辑:《奇跡の海》- 坂本真綾 《奇跡の海》- 坂本真綾 手机党少年们想听歌,请使劲儿戳(这里) 巴蜀(@巴拉迪维)最近有点闹心了, @巴...

小小编辑
今天
64
1
IO plan命令备忘

本文为基于ICCII的IO plan的备忘录 创建bump array 使用命令create_bump_array IO ring + corner cell 其实,直接用create cell然后手工挪过去也不费事,反正也就一次。后面通过读def的方式读...

白山头
今天
25
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部