實現動態添加行數據，而且表格顯示，而後批量入庫

時間 2019-11-11
標籤實現動態添加數據而且表格顯示而後批量入庫简体版
原文原文鏈接
前言：前天拿到一個需求，大腦裏大概有一個印象可是發如今百度上，死活都拿不到知足個人要求的源碼，只能本身搞起來javascript
（一）實現的效果

( 二 ) 源碼

<?php
/**
 * Created by PhpStorm.
 * User: jiangshiwen
 * Date: 2019/5/7
 * Time: 16:30
 */?>
<!DOCTYPE HTML>
<html>
<head>
    <style>
        table thead th {
            text-align: center;
            font-weight: 700;
        }

        table {
            background: #ccc;
            margin: 10px auto;
            border-collapse: collapse;
        }

        /*border-collapse:collapse合併內外邊距(去除表格單元格默認的2個像素內外邊距*/
         th, td {
            height: 25px;
            line-height: 25px;
            text-align: center;
            border: 1px solid #ccc;
        }

         th {
            background: #eee;
            font-weight: normal;
        }

         tr {
            background: #fff;
        }

         tr:hover {
            background: #cc0;
        }

         td a {
            color: #06f;
            text-decoration: none;
        }

         td a:hover {
            color: #06f;
            text-decoration: underline;
        }
        input {
            height: 20px;
        }
    </style>
</head>
<body>
<section>
    <div class="Hui-article">
        <article class="cl pl-20">
            <!--請在此處進行內容業務展示-->
            <form class="form form-horizontal cl" id="submitForm" method="post" action="#">
                <table id="tbl-data" class="table-border table-bg table-bordered radius" style="width: 100%;">
                    <thead>
                    <tr>
                        <th>物品名稱</th>
                        <th>規格</th>
                        <th>單位</th>
                        <th>數量</th>
                        <th>購買單價</th>
                        <th>金額</th>
                        <th>供應商名稱</th>
                        <th>客戶名稱</th>
                        <th>用途</th>
                        <th>備註</th>
                        <th>開票狀況</th>
                        <th>供應商結算方式</th>
                        <th>供應商聯繫資料</th>
                        <th>操做</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><input type="text" name="goods_name" placeholder="物品名稱" class="goods_name" style="outline: none;width: 180px;border: none" required /></td>
                        <td><input type="text" name="goods_spe" style="outline: none;width: 50px;border: none" placeholder="可不填"></td>
                        <td><input type="text" name="goods_len" style="outline: none;width: 50px;border: none" placeholder="*必填" required></td>
                        <td><input type="number" name="goods_num" style="outline: none;width: 50px;border: none" min="1" placeholder="正整數" required>
                        </td>
                        <td><input type="text" name="buy_num" style="outline: none;width: 50px;border: none" onblur="cal_money(this)" placeholder="保留2位小數" required pattern="(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)"></td>
                        <td><input type="text" name="money" style="outline: none;width: 90px;border: none"  placeholder="保留2位小數"  required pattern="(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)"></td>
                        <td><input type="text" name="supplier_name"  style="outline: none;width: 80px;border: none" placeholder="沒有可不填"></td>
                        <td><input type="text" name="cust_name" style="outline: none;width: 80px;border: none" placeholder="沒有可不填"></td>
                        <td><input type="text" name="using" style="outline: none;width: 80px;border: none" placeholder="沒有可不填"></td>
                        <td><input type="text" name="comment" style="outline: none;width: 80px;border: none" placeholder="沒有可不填"></td>
                        <td><input type="text" name="invoice_flag" style="outline: none;width: 80px;border: none" placeholder="填是否" required pattern="是|否"></td>
                        <td><input type="text" name="pay_status" style="outline: none;width: 80px;border: none" required placeholder="現款或轉帳" pattern="現款|轉帳"></td>
                        <td><input type="text" name="supplier_info" style="outline: none;width: 80px;border: none" placeholder="沒有可不填"></td>
                        <td style="width: 40px"><a style="text-decoration: none" onclick="addTr(this)" title="新增一行"
                                                   href="#" class="ml-5"><i style="color: red" class="Hui-iconfont">&#xe600;</i></a><a
                                    style="text-decoration: none" onclick="delTr(this)" title="刪除一行" href="#"
                                    class="ml-5"><i style="color: brown" class="Hui-iconfont">&#xe6a1;</i></a></td>
                    </tr>
                    </tbody>
                </table>
                <button class="btn btn-primary radius" onclick="save_obj()">保存</button>
            </form>
        </article>
    </div>
</section>

<?php
require_once($_SERVER["DOCUMENT_ROOT"] . "/ini/_footer.php");
require_once($_SERVER["DOCUMENT_ROOT"] . "/ini/_easyui.php");//easyui框架
?>
<!--請在下方寫此頁面業務相關的腳本主要是hui與datatable初始的操做-->
<script type="text/javascript">
    var mytr = 1;
    //拼接tr數據
    var tableHtml = "";
    tableHtml += '<tr>'
        + '<td><input type="text" name="goods_name" placeholder="物品名稱" class="goods_name" style="outline: none;width: 180px;border: none" required /></td>'
        + '<td><input type="text" name="goods_spe" style="outline: none;width: 50px;border: none" placeholder="可不填"></td>'
        + '<td><input type="text" name="goods_len" style="outline: none;width: 50px;border: none" placeholder="*必填" required></td>'
        + '<td><input type="number" name="goods_num" min="1" style="outline: none;width: 50px;border: none" placeholder="正整數" required></td>'
        + '<td><input type="text" name="buy_num" onblur="cal_money(this)" style="outline: none;width: 50px;border: none" placeholder="保留2位小數" required pattern="(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)"></td>'
        + '<td><input type="text" name="money" style="outline: none;width: 90px;border: none" placeholder="保留2位小數"  required pattern="(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)"></td>'
        + '<td><input type="text" name="supplier_name"  style="outline: none;width: 80px;border: none" placeholder="沒有可不填"></td>'
        + '<td><input type="text" name="cust_name" style="outline: none;width: 80px;border: none" placeholder="沒有可不填"></td>'
        + '<td><input type="text" name="using" style="outline: none;width: 80px;border: none" placeholder="沒有可不填"></td>'
        + '<td><input type="text" name="comment" style="outline: none;width: 80px;border: none" placeholder="沒有可不填"></td>'
        + '<td><input type="text" name="invoice_flag" style="outline: none;width: 80px;border: none" placeholder="填是否" required pattern="是|否"></td>'
        + '<td><input type="text" name="pay_status" style="outline: none;width: 80px;border: none" required placeholder="現款或轉帳" pattern="現款|轉帳"></td>'
        + '<td><input type="text" name="supplier_info" style="outline: none;width: 80px;border: none" placeholder="沒有可不填"></td>'
        + '<td style="width: 40px"><a style="text-decoration: none" onclick="addTr(this)" title="新增一行"href="#" class="ml-5"><i style="color: red" class="Hui-iconfont">&#xe600;</i></a><a style="text-decoration: none" onclick="delTr(this)" title="刪除一行" href="#" class="ml-5"><i style="color: brown" class="Hui-iconfont">&#xe6a1;</i></a></td>'
        + '</tr>';
    //添加一行
    function addTr() {
        if (mytr < 30) {
            $("table tbody:last").append(tableHtml);
            mytr++;
        } else {
            fls_msg("超過了最大行限制", 6);
        }
    }
    //刪除一行
    function delTr(nowTr) {
        if (mytr > 1) {
            $(nowTr).parent().parent().remove();
        } else {
            fls_msg("最後一行了不要刪除了", 6);
        }
    }
    //計算金額
    function cal_money(obj) {
        var b_money = $(obj).val();//獲取當前的值
        var b_num = $(obj).parent().prev().children("input").val();
        var cal_sum = parseInt(b_num)*parseFloat(b_money);
        //把結果寫到下一個兄弟節點
        $(obj).parent().next().children("input").val(cal_sum);
    }
    /* =======================================================================
    * 保存
    * ========================================================================*/
    function save_obj() {
        var msg_old = $("#submitForm").serialize();
        var msg = decodeURIComponent(msg_old,true);//讓中文不轉碼
        var myjson = "[{";
        var msg2 = msg.split("&");   //先以「&」符號進行分割，獲得一個key=value形式的數組
        var t = false;
        for (var i = 0; i < msg2.length; i++) {
            var msg3 = msg2[i].split("=");  //再以「=」進行分割，獲得key，value形式的數組
            for (var j = 0; j < msg3.length; j++) {
                myjson += "\"" + msg3[j] + "\"";
                if (j + 1 != msg3.length) {
                    myjson += ":";
                }
                if (t) {
                    myjson += "}";
                    if (i + 1 != msg2.length) {  //表示是否到了當前行的最後一列
                        myjson += ",{";
                    }
                    t = false;
                }
                if (msg3[j] == "supplier_info") {  //這裏的「canshu5」是你的表格的最後一列的input標籤的name值，表示是否到了當前行的最後一個input
                    t = true;
                }
            }
            if (!msg2[i].match("supplier_info")) {  //同上
                myjson += ",";
            }
        }
        myjson += "]";
        if( !($('#submitForm').form('validate'))){ return false; }
        var res = $('#submitForm')[0].checkValidity();
        if(res){
            //存儲到瀏覽器緩存中
            localStorage.setItem("goods_detail",myjson);
            //獲取瀏覽器中的數據
            var index = parent.layer.getFrameIndex(window.name);
            //這裏後期須要修改combox直接設置值
            parent.$('#purcharse_info').textbox('setText',"添加完成");
            parent.layer.close(index);
        }
    }
    //還原數據
    var goods_dt = localStorage.getItem("goods_detail");
    if(goods_dt){
        //把值顯示到表格input中去
        var new_data = JSON.parse(goods_dt);
        //先添加行
        for (var j in new_data){
            if(j > 0){
                addTr();
            }
        }
        //在把值填入input
        for (var index in new_data){
            var run_index = 1;
            $("table tr:eq("+ (parseInt(index) + run_index) +") input[name='goods_name']").val(new_data[index].goods_name);
            $("table tr:eq("+ (parseInt(index) + run_index) +") input[name='goods_spe']").val(new_data[index].goods_spe);
            $("table tr:eq("+ (parseInt(index) + run_index) +") input[name='goods_len']").val(new_data[index].goods_len);
            $("table tr:eq("+ (parseInt(index) + run_index) +") input[name='goods_num']").val(new_data[index].goods_num);
            $("table tr:eq("+ (parseInt(index) + run_index) +") input[name='buy_num']").val(new_data[index].buy_num);
            $("table tr:eq("+ (parseInt(index) + run_index) +") input[name='money']").val(new_data[index].money);
            $("table tr:eq("+ (parseInt(index) + run_index) +") input[name='supplier_name']").val(new_data[index].supplier_name);
            $("table tr:eq("+ (parseInt(index) + run_index) +") input[name='cust_name']").val(new_data[index].cust_name);
            $("table tr:eq("+ (parseInt(index) + run_index) +") input[name='using']").val(new_data[index].using);
            $("table tr:eq("+ (parseInt(index) + run_index) +") input[name='comment']").val(new_data[index].comment);
            $("table tr:eq("+ (parseInt(index) + run_index) +") input[name='invoice_flag']").val(new_data[index].invoice_flag);
            $("table tr:eq("+ (parseInt(index) + run_index) +") input[name='pay_status']").val(new_data[index].pay_status);
            $("table tr:eq("+ (parseInt(index) + run_index) +") input[name='supplier_info']").val(new_data[index].supplier_info);
        }
    }
    // console.log(localStorage.getItem("goods_detail"))
    // localStorage.clear();//清除
</script>
</body>
</html>