EasyUI DataGrid DetailView（数据表格详细展示带子表格）

最新推荐文章于 2024-03-18 21:27:04 发布

Qssn丶

最新推荐文章于 2024-03-18 21:27:04 发布

阅读量9.4k

点赞数 2

分类专栏：笔记文章标签： DataGrid DetailView EasyUi 详细展示带子表格

本文链接：https://blog.csdn.net/dknightl/article/details/68924741

版权

笔记专栏收录该内容

43 篇文章 0 订阅

订阅专栏

Mark一下EASY UI 的数据表格详细展示使用记录。

第一步：创建页面布局

这一步主要是引用Easy UI的JS，除了easyui.min.js还有datagrid-detailview.js

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="datagrid-detailview.js">
<script type="text/javascript" src="datagrid-detailview.js"></script> 
</head>
<body>
<table id="categorytt"></table>
</body>
</html>

第二步：JQuery动态加载父子表格

思路是：

1.先载入父类表格 detailFormatter：function(rowIndex, rowData){｝先定义一个空表格
2.用数据表格详细展示自带的onExpandRow：function(index,row){｝加载子类

注意：

-加载子类成功后要调用$(‘#categorytt’).datagrid(‘fixDetailRowHeight’,index);修饰父类表格的行高

<script type="text/javascript"> 
    //显示父表格
    $(function(){
        $('#categorytt').datagrid({ 
            title:'类别列表', 
            remoteSort:false, 
            singleSelect:true,
            height:'auto',
            loadMsg:'加载中，请稍后...',
            nowrap:false, 
            fitColumns:true, 
            url:'${pageContext.request.contextPath}/back/front_manage/categoryAction_getBackCategory', //查询父类的URL
            columns:[[              
                {field:'categoryName',title:'类别名称',width:250,align:'right',sortable:true}, 
                {field:'categorySn',title:'类别Sn',width:100,sortable:true}, 
            ]], 
            view: detailview, 
            detailFormatter: function(rowIndex, rowData){ 
                return '<table class="subCategory"></table>'; 
            },
            onExpandRow: function(index,row){
                var subCategory = $(this).datagrid('getRowDetail',index).find('table.subCategory');//找到该父类Formatter的子类表格
                subCategory.datagrid({
                    url:'${pageContext.request.contextPath}/back/front_manage/categoryAction_getBackCategory?categorySn='+row.categorySn,//查询子类的URL，我这里是根据父行的Sn查询
                    fitColumns:true,
                    singleSelect:true,
                    rownumbers:true,
                    loadMsg:'加载中，请稍后...',
                    height:'auto',
                    columns:[[
                        {field:'subCategoryName',title:'子类名称',width:250,align:'right',sortable:true}, 
                        {field:'subCategorySn',title:'子类Sn',width:100,sortable:true}, 

                    ]],
                    onResize:function(){
                        $('#categorytt').datagrid('fixDetailRowHeight',index);
                    },
                    onLoadSuccess:function(){
                        $('#categorytt').datagrid('fixDetailRowHeight',index);
                    }
                });

                    $('#categorytt').datagrid('fixDetailRowHeight',index);
                }
        }); 
    })

</script>

Qssn丶

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
EasyUI DataGrid DetailView（数据表格详细展示带子表格）

Mark一下EASY UI 的数据表格详细展示使用记录。第一步：创建页面布局这一步主要是引用Easy UI的JS，除了easyui.min.js还有datagrid-detailview.js
复制链接

扫一扫