动态treetable-jquery插件应用
动态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】