bootstrap-动态表单

最新推荐文章于 2023-08-25 16:00:37 发布

gu_ywei

最新推荐文章于 2023-08-25 16:00:37 发布

阅读量3.8k

点赞数 2

分类专栏： bootstrap 前端

本文链接：https://blog.csdn.net/gu_ywei/article/details/72842485

版权

bootstrap 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

二话不说，直接上代码

html部分


                    <!-- The template for adding new field -->
                    <div class="form-group hide" id="bookTemplate">
                        <label class="col-sm-3 control-label">承包商</label>
                        <div class="col-sm-2">
                            <form:input path="names" cssClass="form-control" name="names" placeholder="名称"/>
                        </div>
                        <div class="col-sm-2">
                            <form:input path="merchantIds" cssClass="form-control" name="merchantIds" placeholder="ID"/>
                        </div>
                        <div class="col-sm-2">
                            <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>

js部分

<script src="${context}/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="${context}/plugins/datatables/dataTables.bootstrap.min.js"></script>
    <script src="${context}/plugins/datatables/dataTables.bootstrap.js"></script>
    <script src="${context}/js/public.js"></script>
    <script>
 $(document).ready(function () {
            var index = 0;
            $('#form')
            // Add button click handler
                    .on('click', '.addButton', function () {
                        if (this.name > 0 && index == 0) {
                            index = this.name;
                        }
                        index++;
                        var $template = $('#bookTemplate'),
                                $clone = $template
                                        .clone()
                                        .removeClass('hide')
                                        .removeAttr('id')
                                        .attr('data-book-index', index)
                                        .insertBefore($template);

                        // Update the name attributes
                        $clone
                                .find('[name="names"]').attr('path', 'contractor[' + index + '].names').attr('name', 'contractor[' + index + '].names').end()
                                .find('[name="merchantIds"]').attr('path', 'contractor[' + index + '].merchantIds').attr('name', 'contractor[' + index + '].merchantIds').end();

                        // Add new fields
                        // Note that we also pass the validator rules for new field as the third parameter

                    })

                    // Remove button click handler
                    .on('click', '.removeButton', function () {
                        var $row = $(this).parents('.form-group'),
                                index = $row.attr('data-book-index');

                        // Remove fields

                        // Remove element containing the fields
                        $row.remove();
                    });
</script>