动态treetable
关键字：tree，table，还有jquery 用的还是jquery插件，以上一系列插件的使用都比较简单――当然前提是这些插件都没有bug，并且人品好。很可惜， 我就遇到了不少问题，不过都解决了。 这次是要显示一个树， 需求如下： ? PDF 报表：名称改为“公告维护”，要求首先对公告的分类进行选择。采用左右两栏式，左边列出已经维护的该上市公司所有公告。一级菜单：公告年度，二级菜单：公告类别。右边为维护页面。公告的分类为：公告年度，公告类别（定期公告、临时公告），确定后刷新左边的目录。维护公告名称。选择 PDF 文档并上传，上传成功后刷新左边目录。
我的实现
?
这棵树由ajax从服务器那头动态生成，每当flash上传一个文件，这里会重载一下。 这棵树的本质是一个table，所有比一般的树多个优点就是树节点可以包含很多元素，呈现较复杂的信息。
源代码也简单：
1 js事件：
?function loadPdfList(){
?? ??? ?$.get(
?? ??? ??? ?"/sdps/reportTable.do?gpdm="+$(':input[name=query.gpdm]').val(),
?? ??? ??? ?{},
?? ??? ??? ?function init(data){
??? ??? ??? ??? ?var table = $("#uploadedPdf");
?? ??? ??? ??? ?table.empty().append($(data)).treeTable({
??? ??? ??? ??? ?? clickableNodeNames:true,
?? ??? ??? ??? ?? initialState:'expanded'
?? ??? ??? ??? ?});
??? ??? ??? ??? ?$("#uploadedPdf tr:first").each(function(){ $(this).addClass("firstRow");? });
?? ??? ??? ?},
?? ??? ??? ?"text"
?? ??? ?);
?? ?}
2 html页面
?<div style='float:left;background: #FFFFDF;'>
?? ??? ??? ?<table id="uploadedPdf" class="pdftable">
?? ??? ??? ? 正在载入公告树...?? ??? ??? ?
?? ??? ??? ?</table>
? </div>
?3 后台action：
?public class SsgsPdfTableAction extends SsgsBaseAction {
???
??
?protected ActionForward doExecute(ActionMapping mapping, ActionForm
form, HttpServletRequest request, HttpServletResponse response) throws
Exception {
?? ??? ?List all = getNsrxxService().queryPdf(request.getParameter("gpdm"));
?? ??? ?Set years = new TreeSet();
?? ??? ?Set dqs = new TreeSet();
?? ??? ?List newList = new ArrayList();
?? ??? ?for (Iterator iterator = all.iterator(); iterator.hasNext();) {
?? ??? ??? ?Ssgs_pdfModel pdf = (Ssgs_pdfModel) iterator.next();
?? ??? ??? ?if( !years.contains(pdf.getYear())){
?? ??? ??? ??? ?ReportPdfInfo p = new ReportPdfInfo();
?? ??? ??? ??? ?p.setReport_name(pdf.getYear()+"年度");
?? ??? ??? ??? ?p.setYear("-");
?? ??? ??? ??? ?p.setDq("-");
?? ??? ??? ??? ?p.setF_size("-");
?? ??? ??? ??? ?p.setM_time("-");
?? ??? ??? ??? ?p.setDqValue("-");
?? ??? ??? ??? ?p.setFile_name("-");
?? ??? ??? ??? ?p.setIdValue("year"+pdf.getYear());
?? ??? ??? ??? ?p.setClassValue("child-of-root");
?? ??? ??? ??? ?newList.add(p);
?? ??? ??? ??? ?years.add(pdf.getYear());
?? ??? ??? ?}
?? ??? ??? ?if( !dqs.contains(pdf.getYear()+pdf.getDq())){
?? ??? ??? ??? ?ReportPdfInfo p = new ReportPdfInfo();
?? ??? ??? ??? ?p.setReport_name("dq".equals(pdf.getDq())?"定期公告":"临时公告");
?? ??? ??? ??? ?p.setYear("-");
?? ??? ??? ??? ?p.setDq("-");
?? ??? ??? ??? ?p.setDqValue("-");
?? ??? ??? ??? ?p.setF_size("-");
?? ??? ??? ??? ?p.setM_time("-");
?? ??? ??? ??? ?p.setFile_name("-");
?? ??? ??? ??? ?p.setIdValue("year"+pdf.getYear()+pdf.getDq());
?? ??? ??? ??? ?p.setClassValue("child-of-"+"year"+pdf.getYear());
?? ??? ??? ??? ?newList.add(p);
?? ??? ??? ??? ?dqs.add(pdf.getYear()+pdf.getDq());
?? ??? ??? ?}
?? ??? ??? ?ReportPdfInfo p = new ReportPdfInfo(pdf);
?? ??? ??? ?p.setIdValue("pdfid"+pdf.getId());
?? ??? ??? ?p.setClassValue("child-of-"+"year"+pdf.getYear()+pdf.getDq());
?? ??? ??? ?p.setF_size(""+Integer.parseInt(p.getF_size())/1024+"KB");
?? ??? ??? ?newList.add(p);
?? ??? ?}
?? ??? ?request.setAttribute("list", newList);
?? ??? ?return mapping.findForward("success");
?? ?}
}
4 对应的jsp页面：
?<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<%
??? response.setHeader("
ragma", "No-cache");
??? response.setHeader("Cache-Control", "no-cache");
??? response.setDateHeader("Expires", 0);
%>
?? ??? ??? ??? ?<tr id="root">
?? ??? ??? ??? ??? ?<td>所有报告</td>
?? ??? ??? ??? ??? ?<td style="text-align: center">所属年度</td>
?? ??? ??? ??? ??? ?<td style="text-align: center">公告性质</td>
?? ??? ??? ??? ??? ?<td style="text-align: center">原文件名称</td>
?? ??? ??? ??? ??? ?<td style="text-align: center">文件大小</td>
?? ??? ??? ??? ??? ?<td style="text-align: center;border-right-width: 0">上传时间</td>
??? ??? ??? ??? ?</tr>
??? ?<logic:iterate id="i" name="list">
???
??? ??? ??? ?<tr id="<bean:write name="i"
property="idValue"/>" class="<bean:write name="i"
property="classValue"/>">
?? ??? ??? ??? ???? <td>
?? ??? ??? ??? ??? ??? ?<logic:notEqual value="0" name="i" property="id">
??
??? ??? ??? ??? ??? ???? <a href="<%=request.getContextPath()
%>/getpdf.do?id=<bean:write name="i" property="id"/>"
target="_blank">
?? ??? ??? ??? ??? ??? ??? ??? ?<bean:write name="i" property="report_name"/>
?? ??? ??? ??? ??? ??? ???? </a>
?? ??? ??? ??? ??? ???? </logic:notEqual>
?? ??? ??? ??? ??? ???? <logic:equal? value="0" name="i" property="id">
?? ??? ??? ??? ??? ??? ??? ?<bean:write name="i" property="report_name"/>
?? ??? ??? ??? ??? ???? </logic:equal>
?? ??? ??? ??? ???? </td>
?? ??? ??? ??? ???? <td style="text-align: center"><bean:write name="i" property="year"/></td>
?? ??? ??? ??? ??? ?<td style="text-align: center"><bean:write name="i" property="dqValue"/></td>
?? ??? ??? ??? ??? ?<td style="text-align: center"><bean:write name="i" property="file_name"/></td>
?? ??? ??? ??? ??? ?<td style="text-align: center"><bean:write name="i" property="f_size"/></td>
??
??? ??? ??? ??? ?<td style="text-align: center;border-right-width:
0"><bean:write name="i" property="m_time"/></td>
?? ??? ??? ??? ?</tr>
??? ?</logic:iterate>
效果图
【2009-8】