【EasyUI DataGrid DetailView】表格嵌套子表格

一、功能描述

在做项目的时候，要求能够对某一行的数据进行折叠显示，用来查看该行的详细信息。拟通过采用easyui的detailview创建表格分组，大致的效果图如下所示：

二、使用方法

     本篇博客承接以前的一篇博客：https://blog.csdn.net/wilson_m/article/details/81334583

     即所要实现的功能为：点击柱状图显示该数据的详细信息，折叠打开某一行，显示该行的详细数据信息。

该功能依赖于datagrid-detailview.js文件，网上下载便可。

注意：引入该js的时候，该js的位置一定要在jquery.easyui.min.js的下方，不然在detailview.js中会报以下错误：

属性

名称	类型	描述	默认值
detailFormatter	function(index,row)	返回行明细内容的格式化函数

事件

名称	参数	描述
onExpandRow	index,row	当展开一行时触发。
onCollapseRow	index,row	当折叠一行时触发。

方法

名称	参数	描述
fixDetailRowHeight	index	固定明细行的高度。
getExpander	index	获取行扩展对象。
getRowDetail	index	获取行明细容器。
expandRow	index	展开一行。
collapseRow	index	折叠一行。

2.1 表格嵌套js代码如下

myChart.on('click', function (params) {
   
            if (params.componentType === 'series') {
                if (params.seriesType === 'bar') {
                    var selectItemValueRec=params.name;
                    $('#dg1').datagrid({
                        url: '/getStatisticDataGridList',
                        method: 'get',
                        queryParams: {
                            sourceItemValue: sourceItemValue,
                            groupItemValue: groupItemValue,
                            selectItemValueRec: selectItemValueRec
                        },
                        border: false,
                        singleSelect: false,
                        fit: true,
                        collapsible: false,
                        pagination: true,
                        pageSize:30,
                        pageList:[10,30,50,70,100],
                        fitColumns: true,
                        view: detailview,
                        detailFormatter:function(index,row){
   
                            return '<div style="padding:2px"><table class="ddv"></table></div>';
                        },
                        onExpandRow: function(index,row){
   
                            var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
                            ddv.datagrid({
                                url:'getEchartsDetailInfo',
                                queryParams:{
                                    traintype:row.traintype,
                                    trainNo:row.trainNo
                                },
                                method: 'get',
                                border: true,
                                fitColumns:true,
                                singleSelect:true,
                                rownumbers:true,
                                loadMsg:'加载中，请稍后...',
                                height:'auto',
                                columns:[[
                                    {field:'traintype',title:'培训类型',width:200},
                                    {field:'trainNo',title:'培训编号',width:200},
                                    {field:'teacherNo',title:'教师工号',width:200},
                                    {field:'teacherName',title:'教师姓名',width:200},
                                    {field:'workUnit',title:'工作单位',width:200},
                                    {field:'teacherAge',title:'教师年龄',width:200}
                                ]],
                                onResize:function(){
   
                                    $('#dg1').datagrid('fixDetailRowHeight',index);
                                },
                                onLoadSuccess:function(){
   
                                    $('#dg1').datagrid('fixDetailRowHeight',index);
                                }
                            });
                            $('#dg1').datagrid('fixDetailRowHeight',index);
                        }
                    });
                    $('#window1').window('open');
                }
            }
        });

2.2 后台代码如下

//mapper层
    @Select("select * from v_all where traintype = #{traintype} and  trainNo = #{trainNo}")
    public List<All> getEchartsDetailInfo(@Param( "traintype" ) String traintype,@Param( "trainNo" ) String trainNo);

//service层
    public List<All> getEchartsDetailInfo(String traintype,String trainNo){
        return integratedQueryMapper.getEchartsDetailInfo(traintype, trainNo);
    }

//controller层
    @RequestMapping(value = "/getEchartsDetailInfo",method = {RequestMethod.GET, RequestMethod.POST})
    @ResponseBody
    public Map getEchartsDetailInfo(@RequestParam("traintype") String traintype, @RequestParam("trainNo") String trainNo, HttpSession session,HttpServletRequest request){

        List<All>  getEchartsDetailInfo = integratedQueryService.getEchartsDetailInfo(traintype,trainNo);
        Map resultMap=new HashMap();
        resultMap.put("rows",getEchartsDetailInfo);
        return resultMap;
    }

2.4 datagrid-detailview.js代码如下

$.extend($.fn.datagrid.defaults, {
    autoUpdateDetail: true  // Define if update the row detail content when update a row
});

var detailview = $.extend({}, $.fn.datagrid.defaults.view, {
    render: function(target, container, frozen){
   
        var state = $.data(target, 'datagrid');
        var opts = state.options;
        if (frozen){
            if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))){
                return;
            }
        }

        var rows = state.data.rows;
        var fields = $(target).datagrid('getColumnFields', frozen);