思路: 先查詢出所有數據的根結點,并對每個根結點檢查是不是有子結點,如果有子結點則在顯示時增加"+"圖片,沒有則不添加.但用戶點擊"+"圖片時,則通過AJAX調用邏輯流查詢觸發結點的所有子結點(采用遞歸方式,以每個子結點的父結點屬性從上向下查詢),并隱藏加載到觸發結點后面(以TR形式添加,并設置每個子元素的paraTaskno屬性為父結點taskno(其實仍是以遞歸方式,從上向下給每個子元素的paraTaskno屬性設置父元素的id)
服務端數據: 僅查詢根結點.
html代碼:
<viewlist id="e587ead4-daa3-431e-a0ed-fac40e013850">
<h:form name="page_form" action="com.bos.mp.taskStatistics.TaskStatistics.flow" method="post">
<input type="hidden" name="_eosFlowAction" value="pageQuery" >
<h:hiddendata property="criteria" />
<h:hidden property="page/begin"/>
<h:hidden property="page/length"/>
<h:hidden property="page/count"/>
<h:hidden property="page/isCount"/>
<w:panel id="list_panel" width="100%" title="任務列表">
<table align="center" border="0" width="100%" class="EOS_table">
<tr id="table_header">
<th>
任務名稱
</th>
<th>
項目名稱
</th>
<th>
項目模塊
</th>
<th>
工作占項目比率
</th>
<th>
負責人
</th>
<th>
審核人
</th>
<th>
計劃開始日
</th>
<th>
計劃完成日
</th>
<th>
任務狀態
</th>
<th>
完成率(%)
</th>
<th>
更新日期
</th>
<th>
原因
</th>
<th>
實際完成率(%)
</th>
<th>
實際完成日
</th>
<th>
提前/滯后完成天數
</th>
</tr>
<w:checkGroup id="group1">
<l:iterate property="mpprojectfollows" id="id1">
<%
long temp = 0;
if(null != ((DataObject)pageContext.getAttribute("id1")).getString("proEndDate")){
DataObject t=(DataObject)pageContext.getAttribute("id1");
String d1 = ((DataObject)pageContext.getAttribute("id1")).getString("comDate") == null ? new SimpleDateFormat("yyyy-MM-dd").format(new Date()):((DataObject)pageContext.getAttribute("id1")).getString("comDate");
String d2 = ((DataObject)pageContext.getAttribute("id1")).getString("proEndDate");
temp = RetOrgInfo.daysDifference(d1,d2);
}
if(temp<0 && !((DataObject)pageContext.getAttribute("id1")).getString("taskStatus").equals("完成")){
out.print("<tr class='EOS_table_row' style='background-color:red;' id='"+((DataObject)pageContext.getAttribute("id1")).getString("taskno")+"'>");
}else if(temp<0 && ((DataObject)pageContext.getAttribute("id1")).getString("taskStatus").equals("完成")){
out.print("<tr class='EOS_table_row' style='background-color:orange;' id='"+((DataObject)pageContext.getAttribute("id1")).getString("taskno")+"'>");
}else if(temp>0 && ((DataObject)pageContext.getAttribute("id1")).getString("taskStatus").equals("完成")){
out.print("<tr class='EOS_table_row' style='background-color:green;' id='"+((DataObject)pageContext.getAttribute("id1")).getString("taskno")+"'>");
}else{
out.print("<tr class='EOS_table_row' id='"+((DataObject)pageContext.getAttribute("id1")).getString("taskno")+"'>");
}
%>
<td align="left" >
<l:present property="childTasks" iterateId="id1">
<img src="<%=request.getContextPath() %>/common/skins/default/images/grouppanel/grouppanel_open.gif" onclick="node_click('<b:write iterateId="id1" property="taskno"/>');"/>
</l:present>
<h:hidden iterateId="id1" property="paraTaskno"/>
<a href="#" onclick="javascript:showTaskDet('<b:write iterateId="id1" property="taskno"/>');"><b:write iterateId="id1" property="taskName"/></a>
</td>
<td align="center">
<b:write iterateId="id1" property="projectName"/>
</td>
<td align="center">
<b:write iterateId="id1" property="modName"/>
</td>
<td align="center">
<b:write iterateId="id1" property="taskRate"/>
<l:notEmpty iterateId="id1" property="taskRate">
%
</l:notEmpty>
</td>
<td align="center">
<b:write iterateId="id1" property="planPres"/>
</td>
<td align="center">
<b:write iterateId="id1" property="auditorName"/>
</td>
<td align="center">
<b:write iterateId="id1" property="proStarDate" formatPattern="yyyy-MM-dd"/>
</td>
<td align="center">
<b:write iterateId="id1" property="proEndDate" formatPattern="yyyy-MM-dd"/>
</td>
<td align="center">
<b:write iterateId="id1" property="taskStatus"/>
</td>
<td align="center">
<b:write iterateId="id1" property="actorRated"/>
</td>
<td align="center">
<b:write iterateId="id1" property="actorDate" formatPattern="yyyy-MM-dd"/>
</td>
<td align="center">
<b:write iterateId="id1" property="reason"/>
</td>
<td align="center">
<b:write iterateId="id1" property="auditRate"/>
</td>
<td align="center">
<b:write iterateId="id1" property="comDate" formatPattern="yyyy-MM-dd"/>
</td>
<td align="center">
<%
if(temp<0){
out.print("滯后"+Math.abs(temp)+"天");
}else if(temp>0 && ((DataObject)pageContext.getAttribute("id1")).getString("taskStatus").equals("完成")){
out.print("提前"+temp+"天");
}
%>
</td>
</tr>
</l:iterate>
</w:checkGroup>
<tr>
<td colspan="16" class="command_sort_area">
<div id="pageroot" align="right">
<l:equal property="page/isCount" targetValue="true">
共
<b:write property="page/count"/>
條記錄 第
<b:write property="page/currentPage"/>
頁/
<b:write property="page/totalPage"/>
頁
</l:equal>
<l:equal property="page/isCount" targetValue="false">
第
<b:write property="page/currentPage"/>
頁
</l:equal>
<input type="button" onclick="firstPage('page', 'pageQuery', null, null, 'page_form');" value="首頁" <l:equal property="page/isFirst" targetValue="true">disabled</l:equal> >
<input type="button" onclick="prevPage('page', 'pageQuery', null, null, 'page_form');" value="上頁" <l:equal property="page/isFirst" targetValue="true">disabled</l:equal> >
<input type="button" onclick="nextPage('page', 'pageQuery', null, null, 'page_form');" value="下頁" <l:equal property="page/isLast" targetValue="true">disabled</l:equal> >
<l:equal property="page/isCount" targetValue="true">
<input type="button" onclick="lastPage('page', 'pageQuery', null, null, 'page_form');" value="尾頁" <l:equal property="page/isLast" targetValue="true">disabled</l:equal> >
</l:equal>
</div>
</td>
</tr>
</table>
</w:panel>
</h:form>
</viewlist>
<script>
var jquery = jQuery.noConflict();
//主結點展開/收起
function node_click(taskid){
var el=jquery("#"+taskid).find("img")[0]//event.srcElement
var path=el.src.substr(el.src.lastIndexOf("/")+1)
var prifix=el.src.substr(0,el.src.lastIndexOf("/"))
if(path=="grouppanel_open.gif"){
//顯示結點
var tr=jquery(el).closest("tr");
if(jquery(el).closest("tr").next().css("display")=="none"){
el.src=prifix+"/grouppanel_close.gif";
tr.nextAll("tr[paraTaskno='"+tr.attr("id")+"']").show();
}else{
readchildnodeByAjax(taskid);
jquery(el).trigger("click");
}
}else{
//隱藏結點
el.src=prifix+"/grouppanel_open.gif";
var tr=jquery(el).closest("tr");
recursion_node(tr,false);
}
}
//ajax讀取子結點
function readchildnodeByAjax(taskid){
var myAjax=new Ajax("com.bos.mp.projectfollow.mpprojectfollowbiz.QueryTask.biz");
myAjax.addParam("criteria/_entity","com.bos.mp.projectfollow.dataset.ProTaskQryEntity");
myAjax.addParam("criteria/_expr[0]/paraTaskno",taskid);
myAjax.submit();
//獲取"root/data/mpprojectfollows"結點數組
var nodes=myAjax.getXMLDom().selectNodes("root/data/mpprojectfollows");
for(var i=0;i<nodes.length;i++){
addElement(jquery("#"+taskid),nodes[i]);
}
}
/**
*動態增加tr結點,以請求的服務端數據來遍歷添加結點
*template:html頁面元素;node:服務端數據子實體
*/
function addElement(template,node){
var xml=jquery(node);
var template=addnode(template,xml)
var childnodes=xml.children("childTasks");
for(var i=0;i<childnodes.length&&jquery(xml.children("childTasks")[i]).text()!="";i++){
addElement(template,xml.children("childTasks")[i]);
}
}
/**
*以服務端的子實體對象(xml)構造一個結點添加到html元素(template)
*/
function addnode(template,xml){
var open_gif='<%=request.getContextPath() %>/common/skins/default/images/grouppanel/grouppanel_open.gif';
var close_gif="<%=request.getContextPath() %>/common/skins/default/images/grouppanel/grouppanel_close.gif"
//從模板結點構造出目標結點tr
var curtr=template.clone().insertAfter(template).hide()
.attr("id",jquery(xml.find("taskno")[0]).text())
.attr("paraTaskno",jquery(xml.find("paraTaskno")[0]).text());
//首個TD結點
var firsttd=jquery(curtr.children("td")[0]);
var td=jquery(curtr.children("td")[0]).css("padding-left",parseInt(firsttd.css("padding-left"))+10+"px")
.empty();
jquery("<a href='#'></a>").text(jquery(xml.find("taskName")[0]).text())
.bind("click",function(){
showTaskDet(jquery(xml.find("taskno")[0]).text());
}).appendTo(td);
var img=jquery("<img/>").prependTo(td);
if(jquery(xml.children("childTasks")[0]).text()!=""){
//非葉子結點,綁定事件
img.attr("src",open_gif);
img.bind("click",function(){
var path=jquery(this).attr("src");
var tr=jquery(this).closest("tr");
if(path==open_gif){
jquery(this).attr("src",close_gif);
recursion_node(tr,true);
}else{
jquery(this).attr("src",open_gif);
recursion_node(tr,false);
}
})
}else{
//葉子結點
img.attr("src",close_gif);
}
td.next().empty()//text(jquery(xml.find("projectName")[0]).text())
.next().empty()//text(jquery(xml.find("modName")[0]).text())
.next().text(jquery(xml.find("taskRate")[0]).text())
.next().text(jquery(xml.find("planPres")[0]).text())
.next().text(jquery(xml.find("auditorName")[0]).text())
.next().text(jquery(xml.find("proStarDate")[0]).text())
.next().text(jquery(xml.find("proEndDate")[0]).text())
.next().text(jquery(xml.find("taskStatus")[0]).text())
.next().text(jquery(xml.find("actorRated")[0]).text())
.next().text(jquery(xml.find("actorDate")[0]).text())
.next().text(jquery(xml.find("reason")[0]).text())
.next().text(jquery(xml.find("auditRate")[0]).text())
.next().text(jquery(xml.find("comDate")[0]).text())
.next().text("");
return curtr;
}
/**
*層疊遞歸方式顯示或隱藏結點
* node:jquery對象;isshow:boolean值
*/
function recursion_node(node,isshow){
var open_gif='<%=request.getContextPath() %>/common/skins/default/images/grouppanel/grouppanel_open.gif';
var close_gif="<%=request.getContextPath() %>/common/skins/default/images/grouppanel/grouppanel_close.gif"
var nodes=node.nextAll("tr[paraTaskno='"+node.attr("id")+"']")
for(var i=0;i<nodes.length;i++){
recursion_node(jquery(nodes[i]),isshow);
if(!isshow){
jquery(nodes[i]).hide();
}else{
jquery(nodes[i]).show();
}
}
if(nodes.length>0){
jquery(node.find("img")[0]).attr("src",!isshow?open_gif:close_gif)
}
}
</script>
posted on 2011-04-01 17:39
紫蝶∏飛揚↗ 閱讀(1382)
評論(0) 編輯 收藏 所屬分類:
div+css+js代碼 、
EOS