jquery treeview最搞笑的实现方法。

最新推荐文章于 2020-02-19 21:43:48 发布

原创最新推荐文章于 2020-02-19 21:43:48 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #json #CSS #HTML #ViewUI

web 开发专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一个利用jQuery及其插件实现异步加载树状结构的方法。通过发送AJAX请求获取JSON数据，然后解析这些数据并构建出一个具有文件夹和员工列表的树形结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <!-- tree view -->
    <link rel="stylesheet" href="/plugin/jquery-treeview/jquery.treeview.css" type="text/css">
    <link rel="stylesheet" href="/plugin/jquery-treeview/demo/screen.css" />
    <script type="text/javascript" src="/plugin/jquery-treeview/jquery.treeview.async.js"></script>
    <script type="text/javascript" src="/plugin/jquery-treeview/jquery.treeview.js"></script>
    <script type="text/javascript" src="/plugin/jquery-treeview/lib/jquery.cookie.js"></script>
<script type="text/javascript">
    	$(document).ready(function(){
			$.post('/web/module/send_and_register/sendAndRegisterAction.do?method=test,function(responseText){
				var treeData=eval(responseText);
				alert(responseText);
				var html='';
				for(var i=0;i<treeData.length;i++){
					var temp=treeData[i];
					html=html+'<li><span class="folder">'+temp.name+'</span>';
					if(temp.employee.length>0){
						html=html+'<ul>';
						for(var j=0;j<temp.employee.length;j++){
							html=html+'<li><span class="file">'+temp.employee[j].name+'</span></li>';
						}
						html=html+'</ul>';
					}else{
						html=html+'</li>';
					}
				}
				$("#browser").html(html);
				alert(html);
				$("#browser").treeview();
			});
		 });   
    </script>
  </head>
  
  <body>
  	<ul id="browser" class="filetree">
		
	</ul>
  </body>
</html>

@Controller
@RequestMapping("/web/module/send_and_register/sendAndRegisterAction.do")
public class SendAndRegisterAction extends BasicAction {
	
	@RequestMapping(params="method=test")
	public void test(HttpServletRequest request,
			HttpServletResponse response){
		String json="[{name:'中国1队',id:'11',employee:[{name:'李三',id:'123654'}]}]";
		this.outJsonString(response, json);
	}

其实也没有什么可笑的了。呵呵只是把json对象反回前台然后再处理了。