ry之新建表單內嵌表格

先來一張效果圖

仔細閱讀代碼！！！

js代碼

<script th:inline="javascript">
    /*
    * data-search 是否顯示搜索框
    * data-show-refresh 是否像是刷新按鈕,注：刷新操做會從新請求數據，並帶着請求參數
    * data-show-toggle 是否顯示面板切換按鈕
    * data-show-columns 是否顯示列控制按鈕
    */
    var bannerType = [[${@dict.getType('banner_type')}]];
    var priceType = [[${@dict.getType('price_type')}]];

    var columns = [
        {
            field: 'id',
            title: '',
            visible: false
        },
        {
            field: 'bannerSort',
            title: '序號'
        },
        {
            field: 'bannerType',
            title: '所屬',
            formatter: function (value, row, index) {
                return $.table.selectDictLabel(bannerType, value);
            }
        },
        {
            field: 'name',
            title: '名稱'
        },
        {
            field: 'num',
            title: '數量',
            formatter: function (value, row, index) {
                var key = "num";
                return "<div><input type='text' class=\"form-control\" style=\"width:80px;\" maxlength=\"80\"  placeholder=\"數量\" value=\"" + value + "\" " +
                    "onchange='reloadRowData($(this), " + JSON.stringify(row) + ", \"" + key + "\", " + index + ")' /></div>"
                //return '<input class="form-control" style="width:80px;" type="text" maxlength="80" placeholder="數量"/>';
            }
        },
        {
            field: 'price',
            title: '成交價格',
            formatter: function (value, row, index) {
                var key = "price";
                return "<div><input type='text'  class=\"form-control\" style=\"width:80px;\" maxlength=\"80\"  placeholder=\"成交價\" value=\"" + value + "\" " +
                    "onchange='reloadRowData($(this), " + JSON.stringify(row) + ", \"" + key + "\", " + index + ")' /></div>"
            }
        },
        {
            field: 'img',
            title: '圖片來源',
            formatter: function (value, row, index) {
                var html = '<select class="form-control" style="width:80px;" >';
                $.each(priceType, function (index, dict) {
                    html += '<option value="' + dict.dictValue + '">' + dict.dictLabel + '</option>'
                });
                html += '</select>';
                return html;
            }
        },
        {
            field: 'linkUrl',
            title: '跳轉連接',
            formatter: function (value, row, index) {
                if ($.common.isNotEmpty(value)) {
                    return "<a href='" + value + "'>" + value + "</a>";
                }
                return "-";
            }
        },
        {
        title: '操做',
        align: 'center',
        formatter: function (value, row, index) {
        var actions = [];
        actions.push('<a class="btn btn-danger btn-xs " href="#" onclick="remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>刪除</a> ');
        return actions.join('');
        }
        }];

    $('#table1').bootstrapTable({
        // queryParams: {pageNum:1,pageSize:3},
        columns: columns,
        //   url: prefix + "/list",
        // 請求獲取數據後處理回調函數
        /*responseHandler: function(res) {
            if (res.code == 0) {
                return res.rows;
            } else {
                $.modal.alertWarning(res.msg);
                return { rows: [], total: 0 };
            }
        },*/
        formatNoMatches: function () {
            return "暫未選擇產品";
        }
    });


    var index = 0;

    //靜態加載數據 能夠作成添加按鈕
    function loadBootstrapTable() {
        index++;
        //注意id 不能重複
        $('#table1').bootstrapTable('insertRow', {index:index,row:{
            "img": "banner/2018/12/08/cf131e0619104d16bb52f181c4ce46a1.png",
            "bannerType": "1",
            "price9": 90,
            "bannerSort": "2",
            "price0": 0,
            "serialVersionUID": "1",
            "createTime": "Sat Dec 08 16:34:10 CST 2018",
            "name": "shilvfei",
            "linkUrl": "http://www.w3school.com.cn/tags/tag_a.asp",
            "num":"",//必須得初始化
            "price":"",//必須得初始化
            "price7": 70,
            "price8": 80,
            "price5": 50,
            "id": index,
            "price6": 60,
            "price3": 30,
            "price4": 40,
            "price1": 10,
            "status": "1",
            "price2": 20
        }});
    }

   //更新表格消息
    function reloadRowData(obj, row, key, index){
        row[key] = obj.val();
        $("#table1").bootstrapTable('updateRow', {
            index: index,
            row: row
        });
    }


    //靜態移除數據
    function remove(id) {
        ///  alert(parseInt(id));
        id = parseInt(id);
        var ids = new Array();
        ids.push(id);
        $('#table1').bootstrapTable('remove', {
            field: 'id',
            values: ids
        });
    }

    // 獲取表格信息    
    function getBootstrapTable() {
        var abc = $("#table1").bootstrapTable('getData');
    }

</script>

html代碼

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-banner-edit" th:object="${banner}">
        <input name="id" type="hidden" th:field="*{id}"/>
        <div class="form-group">
            <div class="form-group">
                <label class="col-sm-3 control-label">所屬</label>
                <div class="col-sm-8">
                    <select id="bannerType" name="bannerType" class="form-control m-b"
                            th:with="type=${@dict.getType('banner_type')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                                th:field="*{bannerType}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">排序：</label>
                <div class="col-sm-8">
                    <input class="form-control" placeholder="請填寫合法數字" type="text" name="bannerSort" id="bannerSort"
                           th:field="*{bannerSort}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">名稱：</label>
                <div class="col-sm-5">
                    <div class="row">
                        <div class="col-md-3">
                            <input class="form-control" type="text" name="name" id="name" th:field="*{name}"
                                   maxlength="80"
                                   placeholder="請輸入1~80之內字符"/>
                        </div>
                         <div class="col-md-4">
                             <a class="btn btn-danger btn-del" onclick="loadBootstrapTable()">
                                 <i></i> 添加產品
                             </a>
                         </div>
                        <div class="col-md-4">
                            <a class="btn btn-danger btn-del" onclick="getBootstrapTable()">
                                <i></i> 獲取產品
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-group ui-layout-center">
                <label class="col-sm-3 control-label">表格小青</label>
                <div class="col-sm-8">
                    <table id="table1" class="table table-bordered " data-toggle="dropdown"></table>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">跳轉連接</label>
                <div class="col-sm-8">
                    <input class="form-control" type="text" name="linkUrl" id="linkUrl" th:field="*{linkUrl}"
                           maxlength="80" placeholder="請輸入1~80之內字符">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">狀態</label>
                <div class="col-sm-8">
                    <select id="status" name="status" class="form-control m-b"
                            th:with="type=${@dict.getType('banner_status')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                                th:field="*{status}"></option>
                    </select>
                </div>
            </div>
    </form>
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/ajax/libs/select/select2.js}"></script>
<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>

有問題請留言！！！謝謝