一、功能描述
树形菜单形式展示源代码目录,选择一个文件即展示该文件的内容
比如点击IndexController.java文件:
右边就会展示出该文件的详细内容：
工程目录截图：
二、代码实现
1.页面：
<body>
<div class="container">
<div class="row">
<div class="col-md-6" class="panel-body" style="height: 400px; overflow:scroll">
<div class="innerUl" style="border: 1px #000000; width: 70%; margin: 0 auto;">
</div>
</div>
<div class="col-md-4">
<div>
<xmp id="pContent">这里显示节点内容</xmp>
</div>
</div>
</div>
</div>
</body>
<script src="${pageContext.request.contextPath}/static/bootstrap3/js/jquery-1.11.2.min.js"></script>
<!-- <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> -->
<script type="text/javascript" src="js_tree/proTree.js" ></script>
<script type="text/javascript">
var d1="java/cn/edu/neu/controller/";
var d2="java/cn/edu/neu/controller/admin/";
var d3="java/cn/edu/neu/controller/converter/";
var d4="resources/cn/edu/neu/mappers/";
var d5="webapp/";
var d6="webapp/admin/";
var d7="webapp/foreground/";
//后台传入的 标题列表
var arr = [
{
id: 1,
name: "java/cn/edu/neu/",
pid: 0
},
{
id: 2,
name: "resources/",
pid: 0
},
{
id: 3,
name: "resources/"+"applicationContext.xml",
pid: 2
},
{
id: 6,
name: d1,
pid: 1
},
{
id: 7,
name: d1+"IndexController.java",
pid: 6
},
{
id: 13,
name: d1+"NoteController.java",
pid: 6
},
{
id: 14,
name: d1+"CommentController.java",
pid: 6
},
{
id: 15,
name: d1+"WriterController.java",
pid: 6
},
{
id: 8,
name: "三级标题",
pid: 0
},
//admin目录下
{
id: 9,
name: d2,
pid: 6
},
{
id: 10,
name: d2+"CommentAdminController.java",
pid: 9
},
{
id: 11,
name: d2+"NoteAdminController.java",
pid: 9
},
{
id: 12,
name: d2+"NoteTypeAdminController.java",
pid: 9
}
];
//标题的图标是集成bootstrap 的图标 更改 请参考bootstrap的字体图标替换自己想要的图标
$(".innerUl").ProTree({
arr: arr,
close:true,
simIcon: "fa fa-file-o",//单个标题字体图标 不传默认glyphicon-file
mouIconOpen: "fa fa-folder-open-o",//含多个标题的打开字体图标 不传默认glyphicon-folder-open
mouIconClose:"fa fa-folder-o",//含多个标题的关闭的字体图标 不传默认glyphicon-folder-close
callback: function(id,name) {
var prefix="E:/SpringProject/Note/src/main/";
alert("你选择的id是" + id + "，名字是" +prefix+name);
$.post("${pageContext.request.contextPath}/showContent.do",
{'directoryStr':prefix+name},
function(result){
var p=document.getElementById('pContent');
p.innerHTML=result.content;
//alert(result.content);
/* if(result.content){
alert("操作成功!");
}else{
//alert("操作失败!");
} */
},"json");
}
});
</script>
2.Controller:
/*
* 接收 查看 节点内容的请求
*/
@RequestMapping("/showContent")
public ModelAndView showContent(String directoryStr,
HttpServletResponse response) throws Exception{
ModelAndView mav=new ModelAndView();
String content=FileReadUtil.fileRead(directoryStr);
System.out.println(content);
JSONObject result=new JSONObject();
if(!content.isEmpty()) {
//mav.addObject("content", content);
result.put("content", content);
}else {
//result.put("success", false);
}
//服务器向客户端反馈的时候需要用流向客户端输出数据
ResponseUtil.write(response, result);
mav.setViewName("treeDirectory");
return mav;
}
参考资源链接
https://www.lanrenzhijia.com/js/4691.html
807
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
