EasyUI Forum
November 02, 2025, 02:36:51 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Is it possible to achieve multi-level expand in easyui datagrid?  (Read 9149 times)
Alfred
Full Member
***
Posts: 134


-Licensed User-


View Profile
« on: April 13, 2017, 02:41:56 PM »

According to this tutorial https://www.jeasyui.com/tutorial/datagrid/datagrid22.php, we can expand easyui datagrid. Can we expand the expanded datagrid? Please give me practical example.

Code:
$('#dg').datagrid({
        view: detailview,
        detailFormatter:function(index,row){
            return '<div style="padding:2px"><table class="ddv" id="ddv"+index></table></div>';
        },
        onExpandRow: function(index,row){
            var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
            ddv.datagrid({
                url:'datagrid22_getdetail.php?itemid='+row.itemid,
                fitColumns:true,
                singleSelect:true,
                rownumbers:true,
                loadMsg:'',
                height:'auto',
                columns:[[
                    {field:'orderid',title:'Order ID',width:100},
                    {field:'quantity',title:'Quantity',width:100},
                    {field:'unitprice',title:'Unit Price',width:100}
                ]],
                onResize:function(){
                    $('#dg').datagrid('fixDetailRowHeight',index);
                },
                onLoadSuccess:function(){
                    setTimeout(function(){
                        $('#dg').datagrid('fixDetailRowHeight',index);
                    },0);
                   $('#dg').datagrid({
                      view: detailview,
                        detailFormatter:function(index,row){
                          return '<div style="padding:2px"><table class="dds" id="dds"+index></table></div>';
                       },
                       onExpandRow: function(index,row){
                                var dds = $(this).datagrid('getRowDetail',index).find('table.dds');
                                dds.datagrid({
                       url:'datagrid22_getdetail2.php?orderid='+row.itemid,
                       fitColumns:true,
                       singleSelect:true,
                       rownumbers:true,
                       loadMsg:'',
                       height:'auto',
                       columns:[[
                                 {field:'orderid',title:'Order ID',width:100},
                                 {field:'quantity',title:'Quantity',width:100},
                                 {field:'unitprice',title:'Unit Price',width:100}
                       ]],
                       onResize:function(){
                       $('#ddv'+index).datagrid('fixDetailRowHeight',index);
                      },
                }
            });
            $('#dg').datagrid('fixDetailRowHeight',index);
        }
    });

Thanks
Dove
Logged
jarry
Administrator
Hero Member
*****
Posts: 2300


View Profile Email
« Reply #1 on: April 13, 2017, 03:45:23 PM »

Please look at this example http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=Nested%20SubGrid
Logged
Alfred
Full Member
***
Posts: 134


-Licensed User-


View Profile
« Reply #2 on: April 14, 2017, 09:01:43 PM »

Thank you very much Jarry, Now I could do what I want.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!