树型菜单可以说是项目中应用最为广泛的运用。以前无论使用微软控件的树型,还是比较优秀的阿赖树型,都是将数据全部读出,然后再分级显示。这样如果数据量大,那么第 一次显示将需要客户等待很长一段时间,降低了客户的体验度。如今使用ajax,事情变得简单了。
此运用参考了《征服web2.0开发技术详解》的例子。
我使用的平台是struts+spring+hibernate,但与ajax打交道的也就是struts。我无法将整个代码贴出来,因此把重要的前台ajax代码贴出来,至于后台的代码就看你自己所使用的技术了。
1、jsp页面
<% @ page language = " java " contentType = " text/html; charset=GB2312 " import = " java.util.*,com.wehave.oa.cecontract.model.TbJyhtflb " %>
< html >
< head >
< title > Insert title here >
< link rel = " stylesheet " href = " ../css/tree.css " >
2、tree_htfl.js 代码
function showHide( id )
{
填写下面表单即可预约申请免费试听java课程!害怕学不会?助教陪读,随时解惑!担心就业?一地学习,可全国推荐就业!
var el= document.getElementById( id );
var bExpand = true;
var images = el.getElementsByTagName("IMG");
if (images[0].src.indexOf("tree_minus.gif")!=-1)
{
bExpand = false;
images[0].src="../images/tree_plus.gif";
}else{
images[0].src="../images/tree_minus.gif";
}
var subs=el.lastChild;
if(bExpand)
subs.style.display="block";
else
subs.style.display="none";
}
function getSubTree( id ,submitURL)
{
var submitURL=submitURL
postXmlHttp( submitURL, 'parseSubTree("'+id+'")' ,'load("'+id+'")');
}
function parseSubTree(id)
{
var el= document.getElementById( id );
var ulElmt= document.createElement("UL");
ulElmt.innerHTML=_xmlHttpRequestObj.responseText;
el.appendChild(ulElmt);
var images = el.getElementsByTagName("IMG");
images[0].setAttribute("src", "../images/tree_minus.gif");
images[0].setAttribute("onclick", new Function("showHide('"+id+"')"));
var aTag = el.getElementsByTagName("A");
aTag[0].setAttribute("onclick", new Function("showHide('"+id+"')"));
var loadDiv= document.getElementById( "load" );
loadDiv.style.display="none";
}
function load(id)
{
var loadDiv= document.getElementById( "load" );
loadDiv.style.display="block";
}
var _postXmlHttpProcessPostChangeCallBack;
var _xmlHttpRequestObj;
var _loadingFunction;
function postXmlHttp( submitUrl, callbackFunc ,loadFunc)
{
_postXmlHttpProcessPostChangeCallBack = callbackFunc;
_loadingFunction = loadFunc;
if(window.createRequest)
{
try{
_xmlHttpRequestObj=window.createRequest();
_xmlHttpRequestObj.open('POST',submitUrl,true);
_xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;
_xmlHttpRequestObj.send();
}
catch(ee){}
}
else if(window.XMLHttpRequest)
{
_xmlHttpRequestObj=new XMLHttpRequest();
_xmlHttpRequestObj.overrideMimeType('text/xml');
_xmlHttpRequestObj.open('POST',submitUrl,true);
_xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;
_xmlHttpRequestObj.send("");
}
else if(window.ActiveXObject)
{
_xmlHttpRequestObj=new ActiveXObject("Microsoft.XMLHTTP");
_xmlHttpRequestObj.open('POST',submitUrl,true);
_xmlHttpRequestObj.onreadystatechange=postXmlHttpProcessPostChange;
_xmlHttpRequestObj.send();
}
};
function postXmlHttpProcessPostChange( )
{
if( _xmlHttpRequestObj.readyState==4)
{
if(_xmlHttpRequestObj.status==200){
setTimeout( _postXmlHttpProcessPostChangeCallBack, 2 );
}else{
alert(_xmlHttpRequestObj.status);
}
}
if ( _xmlHttpRequestObj.readyState==1 )
{
setTimeout( _loadingFunction, 2 );
}
}
3、action代码
/**
* 展开第 一层目录
*/
public ActionForward doGetFolderList(
ActionMapping mapping,
ActionForm form,
HttpServletRequest req,
HttpServletResponse res){
List list = treeCatalogService.getChildren("0");
List TreeFolder=new ArrayList();
Iterator it=list.iterator();
while(it.hasNext()){
TbJyhtflb htfl=(TbJyhtflb)it.next();
String s=treeCatalogService.renderTreeViewAjax(htfl);
TreeFolder.add(s);
}
req.setAttribute("treefolder",TreeFolder);
return mapping.findForward("foldertree");
}
/**
* 展开下级目录
*/
public ActionForward doGetSubFolderList(
ActionMapping mapping,
ActionForm form,
HttpServletRequest req,
HttpServletResponse res){
String parentID = req.getParameter("parentID"); //获得id的值
if (parentID!=null&&!parentID.equals("")){ //如果不为null和空
res.setContentType("text/html;charset=GB2312");
List list = treeCatalogService.getChildren(parentID);
Iterator it=list.iterator();
try {
PrintWriter out= res.getWriter();
while(it.hasNext()){
TbJyhtflb htfl=(TbJyhtflb)it.next();
out.println(treeCatalogService.renderTreeViewAjax(htfl));
}
out.close();
}catch(Exception e){
e.printStackTrace();
}
}
return null;
}
4、service层代码
/**
* 函数说明:展开目录
* 参数说明: 目录对象
* 返回值:展开目录的HTML代码
*/
public String renderTreeViewAjax(TbJyhtflb htfl) {
StringBuffer content = new StringBuffer();
String ID=htfl.getTbJyhtflbZlId();
String NAME=htfl.getTbJyhtflbMc();
String FLAG=htfl.getTbJyhtflbLb();
content.append("
if (treeCatalogDAO.canExpand(ID))
content.append("");
else
content.append("");
content.append("
");return content.toString();
}
5、tree.css代码:
p{
font-family:arial;
}
a{
color:#000;
font-family:arial;
font-size:0.8em;
}
.tree{
margin:0px;
padding:0px;
}
.tree ul{ /*子结点*/
margin-left:20px; /* Left spacing */
padding-left:0px;
}
.tree li{ /* 结点 */
list-style-type:none;
vertical-align:middle;
}
.tree li a{ /* 结点连接 */
color:#000;
text-decoration:none;
font-family:arial;
font-size:0.8em;
padding-left:2px;
}
代码基本就是这样了,希望对大家有用。
上一篇:今天讲一讲web一些概念
下一篇: 没有了
一级建造师二级建造师消防工程师造价工程师土建职称房地产经纪人公路检测工程师建筑八大员注册建筑师二级造价师监理工程师咨询工程师房地产估价师 城乡规划师结构工程师岩土工程师安全工程师设备监理师环境影响评价土地登记代理公路造价师公路监理师化工工程师暖通工程师给排水工程师计量工程师
执业药师执业医师卫生资格考试卫生高级职称护士资格证初级护师主管护师住院医师临床执业医师临床助理医师中医执业医师中医助理医师中西医医师中西医助理口腔执业医师口腔助理医师公共卫生医师公卫助理医师实践技能内科主治医师外科主治医师中医内科主治儿科主治医师妇产科医师西药士/师中药士/师临床检验技师临床医学理论中医理论