记录一下初次使用EasyUI Tree遇到的一些问题

本文链接：https://blog.youkuaiyun.com/guard_hao/article/details/81777963

本文介绍了如何使用EasyUI框架中的TreeView组件展示数据库中的数据。包括配置JSON数据源、前端引用必要的JS和CSS文件等内容，并解决了一些常见问题。

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

先交代一下背景吧，作为一个初学者刚接触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,因为重复引用是无法使用的。