先交代一下背景吧,作为一个初学者刚接触js,在公司写了个小demo,要求把数据库中的数据以TreeView的形式展现出来。
首先介绍一下EasyUI Tree 树,主要是使用它的JavaScript功能生成一棵树
EasyUI Tree 树
用法:
1.url指向一个外部的json格式的文件
$('#tt').tree({
url:'tree_data.json'
});
2. data表示一个json对象
$("#tree").tree({
//url: "/ChapterList/JsonTreeTest",
//checkbox:true
data: pp
});
关于实例大家可以参考https://www.cnblogs.com/yonex/p/3379362.html
更多的参数介绍http://www.jeasyui.net/demo/408.html
我主要遇到的一些问题:
1、开始没有注意到后台返回的数据是一个Json格式的字符串 return Content(json);关于MVC中的content方法MSDN上面有详细的介绍https://msdn.microsoft.com/zh-cn/library/system.web.mvc.controller.content(v=vs.108).aspx,所以在前台接收到这个值的时候需要调用jQuery中的另一个方法jQuery.parseJSON()将这个返回的json字符串转换为json对象。因为$().tree中的data参数是一个json对象。
2、再使用EasyUI之前需要引用外部文件
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
如果是使用MVC中的cshtml文件一定要检查layout文件是否已经引用了jquery,因为重复引用是无法使用的。