easyui datagrid 三层嵌套

代码:

function local(role,region,ip){
    $("#roleList").datagrid({
//        title:'服务器监控列表',
        height:($(window).height())-35,
         iconCls : 'icon-ok',
         "100%",
          pageSize : 15,//默认选择的分页是每页5行数据
          pageList : [ 15,50,100,150 ],//可以选择的分页集合
          nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取
          striped : true,//设置为true将交替显示行背景。
          collapsible : true,//显示可折叠按钮
          toolbar:"#tb",//在添加 增添、删除、修改操作的按钮要用到这个
          url:'config/getRoleList.action',//url调用Action方法
          loadMsg : '数据装载中......',
          singleSelect:true,//为true时只能选择单行
          fitColumns:true,//允许表格自动缩放,以适应父容器
          //sortName : 'xh',//当数据表格初始化时以哪一列来排序
          //sortOrder : 'desc',//定义排序顺序,可以是'asc'或者'desc'(正序或者倒序)。
          remoteSort : false, 
          pagination : true,//分页
          rownumbers : true,//行数
          queryParams:{'role_id':role,'region':region,'ip':ip},
          onLoad:function(index,row){
              $('#roleList').datagrid('fixDetailRowHeight',index);
              $('#roleList').datagrid('selectRow',index);
              $('#roleList').datagrid('getRowDetail',index).find('form').form('load',row);
              $('#roleList').datagrid('fixDetailRowHeight',index);
              $('#roleList').datagrid('fixRowHeight', index);  
          },
          onLoadSuccess:function(index,row){
              setTimeout(function(){
            $('#roleList').datagrid('fixRowHeight',index);
            $('#roleList').datagrid('fixDetailRowHeight',index); 
              },0)
          },
          onResize:function(index,row){//严重注意喔 
                 $('#roleList').datagrid('fixDetailRowHeight',index); 
                 }, 
          rowStyler:function(index,row){
                
          },
          view: detailview, 
          detailFormatter:function(index,row){//严重注意喔 
          return '<div"><table id="ddv-' + index + '" ></table></div>'; 
          }, 
          onExpandRow: function(index,row){//嵌套第一层,严重注意喔 
              var ddv = $(this).datagrid('getRowDetail',index).find('#ddv-'+index);//严重注意喔 
              ddv.datagrid({ 
//                   view: detailview, 
                   url:'report/getAlarmSystem.action', 
                   autoRowHeight:true, 
                   fitColumns:true,//改变横向滚动条 
                   singleSelect:false,//去掉选中效果 
                   rownumbers:true, 
                   loadMsg:'', 
                   queryParams:{'role_id':row.id,'region':region,'ip':ip},
                   height:'auto', 
                   columns:[[ 
                       {field:'XXX',title:'XXX',70,align:'center',}, 
                       {field:'XXX',title:'XXX',70,align:'center',}, 
                       {field:'XXX',title:'XXX',50,align:'center',}, 
                   ]],
                   onLoad:function(){
                       $('#roleList').datagrid('fixDetailRowHeight',index);
                       $('#roleList').datagrid('selectRow',index);
                       $('#roleList').datagrid('getRowDetail',index).find('form').form('load',row);
                       $('#roleList').datagrid('fixDetailRowHeight',index);
                       $('#roleList').datagrid('fixRowHeight', index);  
                   },
                onResize:function(){
                    $('#roleList').datagrid('fixDetailRowHeight',index);
                },
                rowStyler:function(index1,row1){
                    if (row1.mstatus=='2'){
                        return 'background-color:#FF6347;';
                    }else if(row1.mstatus=='1'){
                        return 'background-color:#FFF68F;';//黄色
                    }else if(row1.mstatus=='0'){
                        return 'background-color:#98FB98;';
                    }
              },
                onLoadSuccess:function(){
                    setTimeout(function(){
                        $('#roleList').datagrid('fixDetailRowHeight',index);
                        $('#roleList').datagrid('fixRowHeight',index);//防止出现滑动条 
                    },0);
                },
              view: detailview, 
              detailFormatter:function(index,row){//严重注意喔 
              return '<div"><table id="ddvv-' + index + '" ></table></div>'; 
              }, 
              onExpandRow: function(index,row){//嵌套第一层,严重注意喔 
              var ddvv = $(this).datagrid('getRowDetail',index).find('#ddvv-'+index);//严重注意喔 
              ddvv.datagrid({ 
//                   view: detailview, 
                   url:'report/getSystemMonitor.action', 
                   autoRowHeight:true, 
                   fitColumns:true,//改变横向滚动条 
                   singleSelect:false,//去掉选中效果 
                   rownumbers:true, 
                   loadMsg:'', 
                   queryParams:{'ip':row.ip},
                   height:'auto', 
                   columns:[[ 
                      {field:'XXX',title:'XXX',80,align:'center',}, 
                       {field:'XXX',title:'XXX',100,align:'center',}, 
                       {field:'XXX',title:'XXX',200,align:'center',}, 
                       {field:'XXX',title:'XXX',50,formatter:setAlarm,align:'center',}, 
                       {field:'XXX',title:'XXX',150,align:'center',}, 
                       {field:'XXX',title:'XXX',100,align:'center',} 
                   ]],
                   onLoad:function(){
                       $('#roleList').datagrid('fixDetailRowHeight',index);
                       $('#roleList').datagrid('selectRow',index);
                       $('#roleList').datagrid('getRowDetail',index).find('form').form('load',row);
                       $('#roleList').datagrid('fixDetailRowHeight',index);
                       $('#roleList').datagrid('fixRowHeight', index);  
                   },
                onResize:function(){
                    $('#roleList').datagrid('fixDetailRowHeight',index);
                },
                rowStyler:function(index1,row1){
                    if (row1.alarm_level=='2'){
                        return 'background-color:#FF6347;';
                    }else if(row1.alarm_level=='1'){
                        return 'background-color:#FFF68F;';//黄色
                    }else if(row1.alarm_level=='0'){
                        return 'background-color:#98FB98;';
                    }
              },
                onLoadSuccess:function(){
                    setTimeout(function(){
                        $('#roleList').datagrid('fixDetailRowHeight',index);
                        $('#roleList').datagrid('fixRowHeight',index);//防止出现滑动条 
                    },0);
                }
              });
              }
              });
              }
    });
}
原文地址:https://www.cnblogs.com/raitorei/p/10038249.html