若依父子视图

️*

已于 2023-05-11 21:06:15 修改

阅读量612

点赞数 1

分类专栏：若依文章标签： javascript

于 2023-05-11 20:58:14 首次发布

本文链接：https://blog.csdn.net/qq_66408543/article/details/130629895

版权

若依专栏收录该内容

1 篇文章 0 订阅

订阅专栏

若依前后端不分离子视图显示的数据由父视图的商品编号决定

实现效果

参考若依官方的父子视图

代码在demo/table/child 可以参考学习

在实现页面加入

detailView: true,
onExpandRow:function(index,row,$detail){
                    initChildTable(index,row,$detail);
                    },

然后实现子视图的列表，columns里面的内容可以改成自己需要的

initChildTable = function(index, row, $detail) {
			var childTable = $detail.html('<table style="table-layout:fixed"></table>').find('table');
    	    $(childTable).bootstrapTable({
    	       // url: prefix1 + "/list?row.itemId="+row.itemId,
    	        url:prefix1+"/list1?id="+row.itemId,
    	        
    	        method: 'get',
    	        sidePagination: "server",
    	        contentType: "application/x-www-form-urlencoded",
    	        
    	        columns: [
    	        	{
                        field: 'id',
                        title: '商品编号',
                        visible: true
                    },
                    {
                        field: 'name',
                        title: '商品名称'
                    },
                    {
                        field: 'price',
                        title: '商品价格/斤'
                    },
                    {
                        field: 'info',
                        title: '详细介绍'
                    },
                    {
                        field: 'type',
                        title: '商品时节',
                        formatter:function(value,row){
                            switch (value){
                            case '1':
                               return '春季'
                            case '2':
                                return '夏季'
                            case '3':
                                return '秋季'
                            case '4':
                                return '冬季'    
                          }}
                    },
                    {
                        field: 'state',
                        title: '商品状态',
                        formatter: function(value, row, index) {
    		            	return $.table.selectDictLabel(datas1, value);
                        
    		            }
                    },
                    {
                        field: 'bId',
                        title: '商家编号'
                    },
                    {
                        field: 'num',
                        title: '销量'
                    },
                    {
                        field: 'picture',
                        title: '图片',
                        formatter: function (value, row, index) {
    						return '<img src="' + value + '" width="75" height="75">';
    					}
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
                            actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
                            return actions.join('');
                        },
                        visible: false
                }]
    	    });
		};

将父视图的商品编号传给子视图controller的list1方法

var prefix1 = ctx + "system/item";
url:prefix1+"/list1?id="+row.itemId,

创建子视图数据的controller层的list1方法。这里用@RequestParam("id")接收？传过来的参数，

因为返回的是TableDataInfo数据，所以需要利用BeanUtils.copyProperties将数据进行转化，不然会报错。

 @GetMapping("/list1")
    @ResponseBody
    public TableDataInfo list1(@RequestParam("id") Long id) throws Exception, Exception

    {
        //startPage();
        System.out.println(id);
        HnistItem list1 = hnistItemService.selectHnistItemById(id);
        List<HnistItem>list=new ArrayList<>();
        BeanUtils.copyProperties(list1,list);
        list.add(list1);
      
       return  getDataTable(list);
    }

最后返回对应商品编号的那条数据