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

本文介绍了如何使用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,因为重复引用是无法使用的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值