j-ui树形列表的显示问题

[qq_27917221]

请教各位大神，有谁做过这样的列表显示呢？如有麻烦贴个代码供参考下谢谢！

[qq_27917221]

自己结了，供参考 $(function() { $('#dg').datagrid({//爷爷级列表 url:sy.contextPath + '/base/customer!grid.sy', fitColumns:true, singleSelect:true, autoRowHeight:true, idField : 'id', pageSize : 50, queryParams:{'QUERY_t#type_I_EQ':'7'}, pageList : [ 10, 20, 30, 40, 50, 100, 200, 300, 400, 500 ], frozenColumns : [ [ { width : '100', title : '名字', field : 'name', sortable : true }, { width : '100', title : '联系号码', field : 'phone', sortable : true } ] ], columns : [ [{ width : '260', title : '社区委', field : 'community', sortable : true }, { width : '160', title : '地址', field : 'address', sortable : true }, { width : '100', title : '用户类型', field : 'type', sortable : true, formatter : function(value, row) { var str = ''; if(row.type==1){ str='普通客户'; }else if(row.type==2){ str='安康宝客户'; }else if(row.type==3){ str='残联客户'; }else if(row.type==4){ str='老干部客户'; }else if(row.type==5){ str='计生委客户'; }else if(row.type==6){ str='政府援助客户'; }else if(row.type==7){ str='特殊客户' } return str; } }, { title : '操作', field : 'action', width : '100', formatter : function(value, row) { var str = ''; <%if (securityUtil.havePermission("/base/customer!getById")) {%> str += sy.formatString('<img class="iconImg ext-icon-note" title="查看" onclick="showFun(\'{0}\');"/>', row.id); <%}%> <%if (securityUtil.havePermission("/base/customer!update")) {%> str += sy.formatString('<img class="iconImg ext-icon-note_edit" title="编辑" onclick="editFun(\'{0}\');"/>', row.id); <%}%> <%if (securityUtil.havePermission("/base/customer!delete")) {%> str += sy.formatString('<img class="iconImg ext-icon-note_delete" title="删除" onclick="removeFun(\'{0}\');"/>', row.id); <%}%> return str; } } ] ], toolbar : '#toolbar', pagination: true, view: detailview, detailFormatter:function(index,row){ return '<div style="padding:2px"><table class="ddv"></table></div>'; }, onExpandRow: function(index,row){//父亲级列表，注意此时行索引为index var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv'); ddv.datagrid({ url:sy.contextPath + '/base/customer!grid.sy', fitColumns:true, singleSelect:true, loadMsg:'', //height:'auto', autoRowHeight:true, idField : 'id', pageSize : 10, queryParams:{'QUERY_t#type_I_EQ':'7'}, pageList : [ 10, 20, 30, 40, 50, 100, 200, 300, 400, 500 ], frozenColumns : [ [ { width : '100', title : '名字', field : 'name', sortable : true }, { width : '100', title : '联系号码', field : 'phone', sortable : true } ] ], columns : [ [{ width : '260', title : '社区委', field : 'community', sortable : true }, { width : '160', title : '地址', field : 'address', sortable : true } ] ], view: detailview, detailFormatter:function(index,r){ return '<div style="padding:2px"><table class="dddv"></table></div>'; }, onExpandRow: function(index1,r){//子列表，此时行索引为index1 var dddv = $(this).datagrid('getRowDetail',index1).find('table.dddv'); dddv.datagrid({ url:sy.contextPath + '/base/customer!grid.sy', fitColumns:true, nowrap:false, singleSelect:true, loadMsg:'', height:'auto', autoRowHeight:true, idField : 'id', pageSize : 10, queryParams:{'QUERY_t#type_I_EQ':'7'}, pageList : [ 10, 20, 30, 40, 50, 100, 200, 300, 400, 500 ], frozenColumns : [ [ { width : '100', title : '名字', field : 'name', sortable : true }, { width : '100', title : '联系号码', field : 'phone', sortable : true } ] ], columns : [ [{ width : '260', title : '社区委', field : 'community', sortable : true }, { width : '160', title : '地址', field : 'address', sortable : true } ] ], onResize:function(){ ddv.datagrid('fixDetailRowHeight',index1); $('#dg').datagrid('fixDetailRowHeight',index); }, onLoadSuccess:function(){ setTimeout(function(){ ddv.datagrid('fixDetailRowHeight',index1);//在加载成功时，获取父列表的明细高度，使其适应明显点开后的高度，注意此时的行索引为index1 ddv.datagrid('fixRowHeight',index1);//在加载成功时，获取子明细点开后父列表的列高，防止在超过加载成功前的高度时，出现垂直方向的滑动条 $('#dg').datagrid('fixDetailRowHeight',index);//在加载成功时，获取爷爷列表的明细高度，使其适应前面父列表和子列表的高度变化，注意此时的行索引为index $('#dg').datagrid('fixRowHeight',index);//在加载成功时，获取父列表的明细点开后爷爷列表的高度，防止在超过加载成功前的高度时，出现垂直方向的滑动条 },0); } }); ddv.datagrid('fixDetailRowHeight',index1); ddv.datagrid('fixRowHeight',index1); $('#dg').datagrid('fixDetailRowHeight',index); $('#dg').datagrid('fixRowHeight',index); }, onResize:function(){ $('#dg').datagrid('fixDetailRowHeight',index); }, onLoadSuccess:function(){ setTimeout(function(){ $('#dg').datagrid('fixDetailRowHeight',index);//在加载爷爷列表明细（即：父列表）成功时，获取此时整个列表的高度，使其适应变化后的高度，此时的索引 $('#dg').datagrid('fixRowHeight',index);//防止出现滑动条 },0); } }); $('#dg').datagrid('fixDetailRowHeight',index); } }); })