六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 26|回复: 0

struts2 + jquery ajax simpleTree

[复制链接]

升级  34.67%

26

主题

26

主题

26

主题

秀才

Rank: 2

积分
102
 楼主| 发表于 2013-1-29 11:37:47 | 显示全部楼层 |阅读模式
<%@ page language="java" contentType="text/html; charset=utf-8" %><%@taglib uri="/struts-tags" prefix="s"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>    <head>        <title>欢迎登录</title>        <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page">    <style>body{font: normal 12px arial, tahoma, helvetica, sans-serif;margin:0;padding:20px;}.simpleTree{margin:0;padding:0;/*overflow:auto;width: 250px;height:350px;overflow:auto;border: 1px solid #444444;*/}.simpleTree li{list-style: none;margin:0;padding:0 0 0 34px;line-height: 14px;}.simpleTree li span{display:inline;clear: left;white-space: nowrap;}.simpleTree ul{margin:0; padding:0;}.simpleTree .root{margin-left:-16px;background: url(simpleTree/images/root.gif) no-repeat 16px 0 #ffffff;}.simpleTree .line{margin:0 0 0 -16px;padding:0;line-height: 3px;height:3px;font-size:3px;background: url(simpleTree/images/line_bg.gif) 0 0 no-repeat transparent;}.simpleTree .line-last{margin:0 0 0 -16px;padding:0;line-height: 3px;height:3px;font-size:3px;background: url(simpleTree/images/spacer.gif) 0 0 no-repeat transparent;}.simpleTree .line-over{margin:0 0 0 -16px;padding:0;line-height: 3px;height:3px;font-size:3px;background: url(simpleTree/images/line_bg_over.gif) 0 0 no-repeat transparent;}.simpleTree .line-over-last{margin:0 0 0 -16px;padding:0;line-height: 3px;height:3px;font-size:3px;background: url(simpleTree/images/line_bg_over_last.gif) 0 0 no-repeat transparent;}.simpleTree .folder-open{margin-left:-16px;background: url(simpleTree/images/collapsable.gif) 0 -2px no-repeat #fff;}.simpleTree .folder-open-last{margin-left:-16px;background: url(simpleTree/images/collapsable-last.gif) 0 -2px no-repeat #fff;}.simpleTree .folder-close{margin-left:-16px;background: url(simpleTree/images/expandable.gif) 0 -2px no-repeat #fff;}.simpleTree .folder-close-last{margin-left:-16px;background: url(simpleTree/images/expandable-last.gif) 0 -2px no-repeat #fff;}.simpleTree .doc{margin-left:-16px;background: url(simpleTree/images/leaf.gif) 0 -1px no-repeat #fff;}.simpleTree .doc-last{margin-left:-16px;background: url(simpleTree/images/leaf-last.gif) 0 -1px no-repeat #fff;}.simpleTree .ajax{background: url(simpleTree/images/spinner.gif) no-repeat 0 0 #ffffff;height: 16px;display:none;}.simpleTree .ajax li{display:none;margin:0; padding:0;}.simpleTree .trigger{display:inline;margin-left:-32px;width: 28px;height: 11px;cursor:pointer;}.simpleTree .text{cursor: default;}.simpleTree .active{cursor: default;background-color:#F7BE77;padding:0px 2px;border: 1px dashed #444;}#drag_container{background:#ffffff;color:#000;font: normal 11px arial, tahoma, helvetica, sans-serif;border: 1px dashed #767676;}#drag_container ul{list-style: none;padding:0;margin:0;}#drag_container li{list-style: none;background-color:#ffffff;line-height:18px;white-space: nowrap;padding:1px 1px 0px 16px;margin:0;}#drag_container li span{padding:0;}#drag_container li.doc, #drag_container li.doc-last{background: url(simpleTree/images/leaf.gif) no-repeat -17px 0 #ffffff;}#drag_container .folder-close, #drag_container .folder-close-last{background: url(simpleTree/images/expandable.gif) no-repeat -17px 0 #ffffff;}#drag_container .folder-open, #drag_container .folder-open-last{background: url(simpleTree/images/collapsable.gif) no-repeat -17px 0 #ffffff;}.contextMenu{display:none;}</style><script type="text/javascript" src="<%=basePath %>simpleTree/js/jquery.js"></script><script type="text/javascript" src="<%=basePath %>simpleTree/js/jquery.simple.tree.js"></script><script type="text/javascript">var simpleTreeCollection;$(document).ready(function(){simpleTreeCollection = $('.simpleTree').simpleTree({autoclose: true,afterClick:function(node){//alert("id-"+node.attr('id')+"text-"+$('span:first',node).text());var treeId=node.attr('id');$.ajax({                        type: "post",                        dataType: "json",                        data: {treeId: treeId},                        url: "treeAjax!loadTree.do",                        success: function(data){                        if(data.treeInfo.treeInfo.treeId==1)                        {                            $('#afartherId').val(data.treeInfo.treeId);                            $('#treeName').val("");   $('#description').val("");                        }                        else                        {        $('#afartherId').val(data.treeInfo.treeInfo.treeId);   $('#treeName').val(data.treeInfo.treeName);   $('#description').val(data.treeInfo.descripe);}}          }); },/*afterDblClick:function(node){//alert("text-"+$('span:first',node).text());},afterMove:function(destination, source, pos){//alert("destination-"+destination.attr('id')+" source-"+source.attr('id')+" pos-"+pos);},*/afterAjax:function(){//alert('Loaded');},animate:true//,docToFolderConvert:true});/*$.ajax({                        type: "post",                        dataType: "json",                        data: {},                        url: "treeAjax!load.do",                        success: function(data){                        alert(data);                        $("#simTree").html(data);                        //$('.simpleTree').simpleTree();   }}); */$("#addTree").click(function(){var fartherId=$("#afartherId").val();var treeName=$("#treeName").val();var description=$("#description").val();$("#"+fartherId).html("");//$("#simTree").html("");//alert($("#simTree").html());$.ajax({                        type: "post",                        dataType: "json",                        data: {fartherId: fartherId,treeName:treeName,description:description},                        url: "treeAjax!addTree.do",                        success: function(data){                       // alert("添加成功!"+fartherId+"-"+data);                        $("#"+fartherId).html(data);                        //$("#simTree").html(data);                        $('.simpleTree').simpleTree({autoclose: true,afterClick:function(node){//alert("id-"+node.attr('id')+"text-"+$('span:first',node).text());var treeId=node.attr('id');$.ajax({                        type: "post",                        dataType: "json",                        data: {treeId: treeId},                        url: "treeAjax!loadTree.do",                        success: function(data){                        if(data.treeInfo.treeInfo.treeId==1)                        {                            $('#afartherId').val(data.treeInfo.treeId);                            $('#treeName').val("");   $('#description').val("");                        }                        else                        {        $('#afartherId').val(data.treeInfo.treeInfo.treeId);   $('#treeName').val(data.treeInfo.treeName);   $('#description').val(data.treeInfo.descripe);}}          }); },/*afterDblClick:function(node){//alert("text-"+$('span:first',node).text());},afterMove:function(destination, source, pos){//alert("destination-"+destination.attr('id')+" source-"+source.attr('id')+" pos-"+pos);},*/afterAjax:function(){//alert('Loaded');},animate:true//,docToFolderConvert:true});   }}); });});</script>        </head>    <body>             <s:form action="tree.do" method="post">         <div class="div_table"><table class="table_query" border="1" cellspacing="0"cellpadding="0"><tr ><td class="td_query"  align="left" valign="middle" style="width: 240px"><div style="overflow: auto;height:300px;"><ul class="simpleTree" id="simTree"><s:property value="treeString" escape="false"/>    </ul></div></td><td class="td_query" valign="top" align="left" >              <table align="center">                <h1>添加treeNode</h1>                <tr>                    <td>父节点Id:<s:textfield  name="afartherId" id="afartherId" readonly="true"/></td>                </tr>                <tr>                    <td>节点名称:<s:textfield  name="treeName" id="treeName"/></td>                </tr>                <tr>                    <td>描述:<s:textfield name="description" id="description"/></td>                </tr>                <tr align="center">                    <td colspan="2">                       <input type="button" value="添加" id="addTree" />                    </td>                </tr>                <tr style="text-align: center; font-color:red">                    <td colspan="2">                        <s:fielderror cssClass="error"/><s:actionerror cssClass="error"/><s:actionmessage cssClass="error"/>                    </td>                </tr>            </table></td></tr></table></div>         </s:form>    </body></html>
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表