springboot 架构集成layui实现主从结构数据维护UI篇

上一节描述了实现主从结构数据维护时，后台的代码注意事项。本节着重介绍前端基于layui怎么实现数据维护功能。

主要描述怎么实现数据表格维护及表格数据提交功能。

layui表格编辑功能

首先定义一个变量，用于接收controller层传递过来的对象数据。

<script data-th-inline="javascript">
    productinStorage = [[${productinStorage}]];
</script>

注意data-th-inline="javascript"这个。而且是单独的一个script块，不然会跟layui的table的属性有冲突。主要是[[]]这个方括号。

配置layui的table属性

<div id="toolbar">
   <div>
      <button type="button" class="layui-btn layui-btn-sm" id="addRow"  title="添加一行">
        <i class="layui-icon layui-icon-add-1"></i> 添加一行
      </button>
    </div>
</div>
<div id="tableRes" class="table-overlay">
    <table id="dataTable" lay-filter="dataTable" class="layui-hide"></table>
</div>

定义一个table标签，用于渲染数据。

//数据表格实例化
        var tbWidth = $("#tableRes").width();
        var layTableId = "layTable";
        var tableIns = table.render({
            elem: '#dataTable',
            id: layTableId,
            data: productinStorage.storageDetails,
            width: tbWidth,
            page: true,
            loading: true,
            even: false, //不开启隔行背景
            cols: [
                [
                    {
                        field: 'fproductName', title: '商品名称'
                    },
                    {
                        field: 'fmodelName', title: '所属品牌'
                    },
                    {
                        field: 'fstorageNum', title: '入库数量', edit: 'text'
                    },
                    {field: 'fstoragePrice', title: '入库单价', edit: 'text'},
                    {
                        field: 'fstorageBatch', tit