动态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】

评论

1 楼 zzzczx 2011-07-29  

treetable默认是关闭的，你这是点开后的图么