单表单嵌套多个数据源并显示记录，行内编辑（layui）

最新推荐文章于 2024-07-17 15:36:21 发布

好给定性

最新推荐文章于 2024-07-17 15:36:21 发布

阅读量1.8k

点赞数

分类专栏： layui java js 文章标签： html js layer layui

本文链接：https://blog.csdn.net/t1012665655/article/details/89675589

版权

java 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

4 篇文章 1 订阅

订阅专栏

layui

3 篇文章 0 订阅

订阅专栏

layer表格官方 https://www.layui.com/doc/modules/table.html

前后端数据格式以对象数组，其他方式同理

@RequestMapping(value="/show/info",method = RequestMethod.POST)
    @ResponseBody
    public Page show(HttpServletRequest request) {   
        int page = Integer.parseInt(request.getParameter("page"));
        int limit = Integer.parseInt(request.getParameter("limit"));
        
        //总数
        int start = (page-1)*limit;
        int size = limit;
        int count = uploadPicMapper.count(start,size);              
        List<UploadPic> pList = uploadPicMapper.get(start,size);     
        Page pag = new Page();
        pag.setCode(0);
        pag.setCount(count);
        pag.setMsg("");
        pag.setData(pList);

        return pag;  
    }
    
    
    @RequestMapping(value="/add/jinK/info",method = RequestMethod.POST)
    public ModelAndView saveJinK(@RequestBody UploadPic[] uploadPic) {
        int len = uploadPic.length;
        for(int i =0;i<len;i++) {
            UploadPic upload = new UploadPic();
            upload.setId(uploadPic[i].getId());
            upload.setName(uploadPic[i].getName());
            upload.setUrl("");
            uploadPicMapper.insert(upload);
        }
        
        return new ModelAndView(new MappingJackson2JsonView(), new HashMap<String, Object>() {{
            put("success", true);
            put("message", "完成");
        }}); 
    }

数据格式：

[{
	"id": 16,
	"name": "50",
	"url": "",
	"LAY_TABLE_INDEX": 0
}, {
	"id": 17,
	"name": "35",
	"url": "",
	"LAY_TABLE_INDEX": 1
}, {
	"id": 18,
	"name": "8",
	"url": "",
	"LAY_TABLE_INDEX": 2
}]

只根据layer文档，实现基础操作，做参考

<html>
<head>
<title>表单</title>
<style>
#bothForm{
 min-height:680px;
 overflow:hidden;
}

#jinK{
 min-height:300px;
}

#yuanL{
 min-height:300px;
}

#tieG{
 min-height:50px;
}

#jinZ{
 min-height:180px;
}
.tg{
  margin-top:20px;
  float:right;
  padding-right:5px;
}
.jz_class{
  float:left;
  width:49%;
  min-height:80px;
}
.footer_qm{
  min-height:150px;
}
</style>
</head>
<body>
 <p>日期:1</p>
 <div id="bothForm" style="width:805px;border:1px solid black;margin:10px auto;">
    <div id="jinK" style="width:400px;border-right:1px solid black;float:left;">
    <span>进库</span>    
      <table id="jinK_F" lay-filter="test1">
      </table>
      <button class="layui-btn layui-btn-primary layui-btn-fluid" id="addJinK">新增</button>
    </div>
    <div id="yuanL" style="width:400px;float:left;">
    <span>原料</span>    
      <table id="yuanL_F" lay-filter="test2"></table>
      <button class="layui-btn layui-btn-primary layui-btn-fluid" id="addYuanL">新增</button>
    </div>
    <div id="tieG" style="width:100%;border-top:1px solid black;border-bottom:1px solid black;margin-top:5px;float:left;">
        <span class="tg">铁管数(支):<input type="text" /></span>
        <span class="tg">总重(KG):<input type="text" /></span>
    </div>
    <div id="jinZ" style="width:100%;border-bottom:1px solid black;float:left;">    
        <div class="jz_class">
            <span class="tg">型号:<input type="text" style="width:50px;"/>/自重:<input type="text" style="width:50px;"/>/总重:<input type="text" style="width:50px;"/></span>
        </div>
        <div class="jz_class">
           <span class="tg">型号:<input type="text" style="width:50px;"/>/自重:<input type="text" style="width:50px;"/>/总重:<input type="text" style="width:50px;"/></span>
        </div>
        <hr style="color:black;"/>
        <div class="jz_class"]>
           <span class="tg">型号:<input type="text" style="width:50px;"/>/自重:<input type="text" style="width:50px;"/>/总重:<input type="text" style="width:50px;"/></span>
        </div>
        <div class="jz_class">
           <span class="tg">型号:<input type="text" style="width:50px;"/>/自重:<input type="text" style="width:50px;"/>/总重:<input type="text" style="width:50px;"/></span>
        </div>
    </div>
    <div class="footer_qm" style="width:100%;float:left;">
     <button class="layui-btn layui-btn-primary layui-btn-fluid" id="submit" style="margin-top:115px;">保存</button>
    </div>
 </div>
 <script>
    
    
    layui.use('table', function(){
        var table = layui.table;
        
        table.render({
          elem: '#jinK_F',
          width:400,
          url: '${ctx}/layui/show/info',
          page: false,
          limit:20,
          method:'post',
          cols: [[ 
            {field: 'id', title: '货品类型', width:250,edit:true},
            {field: 'name', title: '重量(KG)', width:145,edit:true}
          ]],
          parseData: function(res){ //res 即为原始返回的数据
              return {
                "code": res.code, 
                "msg": res.msg, 
                "count": res.count, 
                "data": res.data 
              };
            }
        });
        
        table.on('row(test1)', function(obj){
            
            console.log(obj.tr) //得到当前行元素对象
            console.log(obj.data) //得到当前行数据
          });
        
        $("#addJinK").click(function(){
            var dataBak = [];   //定义一个空数组,用来存储之前编辑过的数据已经存放新数据

            var tableBak = table.cache.jinK_F; 
            //获取之前编辑过的全部数据，前提是编辑数据是要更新缓存，stock_add_table 为表格的id

            for (var i = 0; i < tableBak.length; i++) {
                dataBak.push(tableBak[i]);      //将之前的数组备份
            }

            dataBak.push({   
                "id": "",
                "name": "",
                "url":""
            });
            
            table.reload("jinK_F",{
                url:'',
                data:dataBak   // 将新数据重新载入表格
            })

        });
        
        
        table.render({
            elem: '#yuanL_F',
            width:400,
            url: '${ctx}/layui/show/info',
            page: false,
            limit:20,
            method:'post',
            cols: [[ 
              {field: 'id', title: '货品类型', width:250,edit:true},
              {field: 'name', title: '重量(KG)', width:145,edit:true}
            ]],
            parseData: function(res){ 
                return {
                  "code": res.code, 
                  "msg": res.msg, 
                  "count": res.count, 
                  "data": res.data 
                };
              }
          });
          
          $("#addYuanL").click(function(){
              var dataBak = [];   //定义一个空数组,用来存储之前编辑过的数据已经存放新数据

              var tableBak = table.cache.yuanL_F; 
              //获取之前编辑过的全部数据，前提是编辑数据是要更新缓存，stock_add_table 为表格的id

              for (var i = 0; i < tableBak.length; i++) {
                  dataBak.push(tableBak[i]);      //将之前的数组备份
              }

              dataBak.push({   
                  "id": "",
                  "name": "",
                  "url":""
              });
              
              table.reload("yuanL_F",{
                  url:'',
                  data:dataBak   // 将新数据重新载入表格
              })

          });
          
          //提交
          $("#submit").click(function(){
              $.ajax({
                  type:'post',
                  url:'${ctx}/layui/add/jinK/info',
                  dataType:"json",
                  contentType:"application/json", 
                  data:JSON.stringify(layui.table.cache.jinK_F),
                  success:function(data){
                      if (data.success == true) {
                          $.messager.alert("操作提示", data.message);
                      } else {
                          $.messager.alert("操作提示", data.message);
                      }
                  }
              });
          })
         
        
    });
    
  
    
    
</script>
</body>
</html>

备注：

table.render({
elem: ‘#demp’
,url: ‘’
,parseData: function(res){ //res 即为原始返回的数据
return {
“code”: res.status, //解析接口状态
“msg”: res.message, //解析提示文本
“count”: res.total, //解析数据长度
“data”: res.data.item //解析数据列表
};
}
//,…… //其他参数
});

该参数非常实用，为 layui 2.4.0 开始新增（官方提示），该参数比较容易与数据绑定，推荐使用

好给定性

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
单表单嵌套多个数据源并显示记录，行内编辑（layui）

layer表格官方 https://www.layui.com/doc/modules/table.html前后端数据格式以对象数组，其他方式同理@RequestMapping(value="/show/info",method = RequestMethod.POST) @ResponseBody public Page show(HttpServletRequest r...
复制链接

扫一扫

专栏目录