layui table 行添加

效果图

<title>主页</title>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">发单</a>
        <a><cite>新建</cite></a>
        <a><cite>采购</cite></a>
    </div>
</div>
<div class="layui-fluid">
    <style>
        .layui-table-cell {
            overflow: visible;
        }

        .layui-table-box {
            overflow: visible;
        }

        .layui-table-body {
            overflow: visible;
        }
        /* 设置下拉框的高度与表格单元相同 */
        td .layui-form-select {
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
        }
    </style>
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" id="fromId" action="#">

                <fieldset class="layui-elem-field">

                    <div style="padding-top:25px;" class="layui-field-box">

                        <div class="layui-form-item">
                            <label class="layui-form-label">入库单编号</label>
                            <div class="layui-input-inline" style="width:13%">
                                <input type="text" name="order" placeholder="请输入" class="layui-input" lay-verify="required">
                            </div>

                            <label class="layui-form-label">客户姓名</label>
                            <div class="layui-input-inline" style="width:13%">
                                <input type="text" name="username" placeholder="请输入" class="layui-input" lay-verify="required">
                            </div>

                            <label class="layui-form-label">地址</label>
                            <div class="layui-input-inline" style="width:13%">
                                <input type="text" name="projectadd" placeholder="请输入" class="layui-input" lay-verify="required">
                            </div>

                            <label class="layui-form-label">设计师</label>
                            <div class="layui-input-inline" style="width:13%">
                                <input type="text" name="stylist" placeholder="请输入" class="layui-input" lay-verify="required">
                            </div>

                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">客户要求发货日期</label>
                            <div class="layui-input-inline" style="width:13%">
                                <input type="text" name="goods_time" placeholder="请选择" class="layui-input" id="date" lay-verify="required">
                            </div>

                            <label class="layui-form-label">下单日期</label>
                            <div class="layui-input-inline" style="width:13%">
                                <input type="text" name="place_order_time" placeholder="请选择" class="layui-input" id="place_order_time" lay-verify="required">
                            </div>

                            <label class="layui-form-label">产品系列</label>
                            <div class="layui-input-inline" style="width:13%">
                                <input type="text" name="Product_Line" placeholder="请输入" class="layui-input" lay-verify="required">
                            </div>

                        </div>
                    </div>
                </fieldset>

                <script type="text/html" id="selectTool">
                    <select name="selectDemo" lay-filter="selectDemo" lay-search>


                        <option value="请选择或输入">请选择或输入</option>

                    </select>
                </script>

                <script type="text/html" id="toolbarDemo">
                    <div align="right" class="layui-btn-container">
                        <button id="addTable" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">添加行</button>
                    </div>
                </script>
                <script type="text/html" id="bar">
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
                </script>

                <table id="demo" lay-filter="tableFilter"></table>
                <div class="layui-form-item" style="margin-top: 30px;text-align: center;">
                    <button class="layui-btn" lay-submit="" lay-filter="*">保存</button>
                </div>
                <!--送货方式-->
            </form>
        </div>
    </div>
</div>



<script>
    layui.use(['jquery', 'table', 'layer', 'laydate','form'], function () {
        var $ = layui.jquery,
            table = layui.table,
            form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate;
        //时间控件
        laydate.render({
            elem: '#date' //指定元素
        });
        //下拉框监听事件
       

        //第一个实例 加载表格
        var tableIns = table.render({
            elem: '#demo'
            , toolbar: '#toolbarDemo'
            , defaultToolbar: []
            , limit: 100
            , cols: [[ //表头
               { field: 'ordername', title: '物料名称', edit: 'text', templet: "#selecta" }
                , { field: 'hz_factoryname', title: '供应商', edit: 'text' }
                , { field: 'Scheduled_purchase_time', title: '计划采购日期', edit: 'text', event: 'dateti', data_field: "dBeginDate" }
                , { field: 'parameter_Add', title: '采购人', edit: 'text' }
                , { field: 'Required_time', title: '要求送达时间', edit: 'text', event:'Required_time'}
                , { field: 'Required_place', title: '要求送达地点', edit: 'text' }
                , { field: 'Shipping', title: '送货方式', edit: 'text', event:'selecta' }
                , { title: '操作', align: 'center', toolbar: '#bar' }
            ]]
            , data: [{
                "ordername": ""
                , "hz_factoryname": ""
                , "Scheduled_purchase_time": ""
                , "parameter_Add": ""
                , "Required_time": ""
                , "Required_place": ""
                , "Shipping": ""
            }]  

            , done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                tabledata = res.data;
                //去掉下拉框的失焦事件 否则在下拉框里输入值 失焦后变回下拉选项里的值了 没有需要的同学忽略掉即可
                $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible'); 
                //这里是表格重载的时候 回显下拉框的数据
                //$('tr').each(function (e) {
                //    var $cr = $(this);
                //    var dataindex = $cr.attr("data-index");

                //    $.each(tabledata, function (index, value) {

                //        console.log(value);
                //        if (value.LAY_TABLE_INDEX == dataindex) {
                //            $cr.find('input').val(value.materialcode);
                //        }

                //    });

                //});

                //这里是下拉框输入值改变时触发 给表格缓存赋值 没有需要的同学忽略掉即可
                //$('.layui-form-select').find('input').on("change", function (e) {

                //    var $cr = $(e.target);
                //    console.log($cr);
                //    var dataindex = $cr.parents('tr').attr("data-index");
                //    var selectdata = $cr.val();
                //    $.each(tabledata, function (index, value) {
                //        if (value.LAY_TABLE_INDEX == dataindex) {
                //            value.materialcode = selectdata;
                //        }
                //    });

                //});
                

            }
        });
        var tabledata;
        //监听工具条删除按钮
        table.on('tool(tableFilter)', function (obj) {
            console.log("a")
            if (obj.event === 'del') {
                obj.del();
            };
        }
        );
        //头工具栏添加按钮事件
        table.on('toolbar(tableFilter)', function (obj) {
            if (obj.event === 'add') {

                tabledata.push({
                    "ordername": ""
                    , "hz_factoryname": ""
                    , "Scheduled_purchase_time": ""
                    , "parameter_Add": ""
                    , "Required_time": ""
                    , "Required_place": ""
                    , "Shipping": ""
                })

                table.reload('demo', {
                    data: tabledata
                });

            };
            
        });
        //框内事件
        table.on('tool(tableFilter)', function (obj) {

            var data = obj.data,
                event = obj.event,
                tr = obj.tr; //获得当前行 tr 的DOM对象;
            switch (event) {
                case "dateti":
                    console.log("a");
                    var newdata = {};
                    var field = $(this).data('field');
                    laydate.render({
                        elem: this.firstChild
                        , show: true //直接显示
                        , closeStop: this
                        , type: 'datetime'
                        , format: "yyyy-MM-dd"
                        , done: function (value, date) {
                            newdata[field] = value;
                            obj.update(newdata);
                        }
                    });
                    break;
                case "Required_time":
                    var newdata = {};






                    var field = $(this).data('field');

                    laydate.render({
                        elem: this.firstChild
                        , show: true //直接显示
                        , closeStop: this
                        , type: 'datetime'
                        , format: "yyyy-MM-dd"
                        , done: function (value, date) {
                            newdata[field] = value;
                            obj.update(newdata);
                        }
                    });
                    break;
                case "selecta":
                    console.log("a");
                    //渲染下拉搜索框
                    $(function () {
                        $.post('/sys/ashx/Dichandler.ashx?action=defaultlayui&CategoryId=12', {}, function (data) {
                            //console.log(data);
                            var a = JSON.parse(data);
                            var aa = a.data;
                            for (var k in aa) {
                                $("#selecta").append("<option value='" + aa[k].Title + "'>" + aa[k].Title + "</option>")
                            }
                            layui.use('form', function () {
                                var form = layui.form;
                                form.render();
                            })

                        });
                    });


                    break;

            }
        })


        //提交数据到后台保存
        form.on('submit(*)', function (data) {
            // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象


            // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            //  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //  console.log(tabledata) //当前容器的全部表单字段，名值对形式：{name: value}
            //  要将tabledata json这样传到后台就可以json序列化循环数据库事物插入
            $.ajax({
                url: "/ashx/ajax.ashx?action=order",
                async: true,
                type: "post",
                data: $(data.form).serialize() + '&tabledata=' + JSON.stringify(tabledata),
                success: function (data) {
                    if (typeof (data) == 'string') {
                        data = JSON.parse(data)
                    }
                    if (data.code == 0) {
                        layer.msg(data.msg);
                    } else {
                        layer.msg(data.msg);
                    }
                }
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    })
</script>
<script src="../src/views/order/jquery.min.js"></script>