EasyUi subgrid 三级列表实现
工作中用到了EasyUi的subgrid，需做三级列表，由于easyui的demo只支持到两级，故三级扩展如下(备注:最新easyui1.4.1中，提供一个新的Nested SubGrid,本身api就支持多级列表，大家若觉得subgrid实现麻烦且业务不复杂，可试下用Nested SubGrid)：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>Subgrid 3 level List</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.1/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.1/demo/demo.css">
<script type="text/javascript" src="../js/jquery-1.6.4.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/datagrid-detailview.js"></script><!--该js必须引用-->
</head>
<body>
<table id="dg" style="width:1280px;height:500px" > </table>
<script type="text/javascript">
var fatherinternalTimer;
var soninternalTimer;
$(function(){
//加载grid
$('#dg').datagrid({
url: "${pageContext.request.contextPath}/yeyeurl.json",
title: "demo",
height: 525,
singleSelect: false,
checkOnSelect: true,
selectOnCheck: true,
fitColumns: false,
view: detailview,
toolbar: "#tb",//这样展示出来的时候比较灵活
rownumbers:true,//行号
pagination:true,//分页
columns:[[
{field:'ck1',width:30,checkbox:true},
{field:'action',title:'操作',width:80,align:'center',
formatter:function(value,rowData,rowindex){
var viewMenu = '<a href="javascript:;" onclick="alert('view grid');"></a>';
return viewMenu;
}
},
{field:'id',title:'爷爷级ID',width:80}
]],
view: detailview,
detailFormatter:function(index,yeyerow){
return '<div style="padding:0px"><table class="'+yeyerow.id+'ddv"></table></div>';
},
onExpandRow: function(index,yeyerow){
$('.'+yeyerow.id+'ddv').datagrid({
url:'${pageContext.request.contextPath}/babaurl.json?yeyeid='+yeyerow.id,
singleSelect:true,
fitColumns: true,
rownumbers:false,
loadMsg:'加载中...',
height:'auto',
columns:[[
{field:'id',title:'爸爸级ID',width:80}
]],
onResize:function(){
$.each($('#dg').datagrid('getRows'), function (i, row) {
$('#dg').datagrid('fixRowHeight', i);
});
$('#dg').datagrid('fixDetailRowHeight',index);
},
onLoadSuccess:function(){
clearTimeout(fatherinternalTimer);
fatherinternalTimer =
setInterval(function(){
$.each($('#dg').datagrid('getRows'), function (i, row) {
$('#dg').datagrid('fixRowHeight', i);
});
$('#dg').datagrid('fixDetailRowHeight',index);
},10);
},
view: detailview,
detailFormatter:function(index_child,babarow){
return '<div style="padding:0px"><table class="'+babarow.id+'ddvv"></table></div>';
},
onExpandRow: function(index_child,babarow){
$('.'+babarow.id+'ddvv').datagrid({
url:'${pageContext.request.contextPath}/erziurl?babaid='+babarow.id,
singleSelect:true,
fitColumns: false,
rownumbers:false,
loadMsg:'加载中...',
height:'auto',
columns:[[
{field:'id',title:'儿子级ID',width:80}
]],
onResize: function(){
$.each($('.'+yeyerow.id+'ddv').datagrid('getRows'), function (i, row) {
$('.'+yeyerow.id+'ddv').datagrid('fixRowHeight', i);
});
$.each($('#dg').datagrid('getRows'), function (i, row) {
$('#dg').datagrid('fixRowHeight', i);
$('#dg').datagrid('fixDetailRowHeight', i);
});
//父表格改变大小
$('.'+yeyerow.id+'ddv').datagrid('fixDetailRowHeight', index_child);
//爷爷表格改变大小
$('#dg').datagrid('fixDetailRowHeight', index);
},
onLoadSuccess: function(){
$.each($('.'+yeyerow.id+'ddv').datagrid('getRows'), function (i, row) {
$('.'+yeyerow.id+'ddv').datagrid('fixRowHeight', i);
});
$.each($('#dg').datagrid('getRows'), function (i, row) {
$('#dg').datagrid('fixRowHeight', i);
});
$('.'+yeyerow.id+'ddv').datagrid('fixDetailRowHeight', index_child);
$('#dg').datagrid('fixDetailRowHeight', index);
//延迟执行一次后，点击缩进的话不能恢复原形,所以不用延迟函数，而是使用间隔函数
clearTimeout(soninternalTimer);
soninternalTimer =
setInterval(function(){
$.each($('.'+yeyerow.id+'ddv').datagrid('getRows'), function (i, row) {
$('.'+yeyerow.id+'ddv').datagrid('fixRowHeight', i);
});
$.each($('#dg').datagrid('getRows'), function (i, row) {
$('#dg').datagrid('fixRowHeight', i);
$('#dg').datagrid('fixDetailRowHeight', i);
});
$('.'+yeyerow.id+'ddv').datagrid('fixDetailRowHeight', index_child);
$('#dg').datagrid('fixDetailRowHeight', index);
},5);
}
});
}
});
}
});
});
</script>
</body>
</html>