easyui datagrid 三層巢狀
阿新 • • 發佈：2018-11-29
程式碼：
function local(role,region,ip){ $("#roleList").datagrid({ // title:'伺服器監控列表', height:($(window).height())-35, iconCls : 'icon-ok', width:"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',width:70,align:'center',}, {field:'XXX',title:'XXX',width:70,align:'center',}, {field:'XXX',title:'XXX',width: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',width:80,align:'center',}, {field:'XXX',title:'XXX',width:100,align:'center',}, {field:'XXX',title:'XXX',width:200,align:'center',}, {field:'XXX',title:'XXX',width:50,formatter:setAlarm,align:'center',}, {field:'XXX',title:'XXX',width:150,align:'center',}, {field:'XXX',title:'XXX',width: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); } }); } }); } }); }