热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

在NetMVC中应用JsTree

先实现个基本用法1-引入js和css2-html


先实现个基本用法


1 - 引入js和css


2 -  html



"list_left" class="col-md-2 pre-scrollable">
class="list_wrap">

class="lead">数据列表


"jstree">




3 - js






//初始化jstree控件
function init_jstree() {
$(
"#jstree").jstree({
"core": {
'data': {
'url': '/Home/GetTreeData',
'dataType': 'json',
success:
function () {
//alert('ok');
}
},
'themes': {
'name': 'proton',
'responsive': true,
"dots": true,
"icons": true
}
}
});
};


View Code

4 - cs






public JsonResult GetTreeData()
{
IBaseBll
tableBll = new BaseBll();
var treeNodes = tableBll.QueryAll().Select(m => new
{
id
= m.Id,
parent
= m.ParentId.ToString() == "0" ? "#" : m.ParentId.ToString(),
text
= m.NameCh,
icon
= m.TreeIcon
});
return Json(treeNodes, JsonRequestBehavior.AllowGet);
}


View Code

5 - 说明


  • js中themes是选择的皮肤
  • 后台代码中的treeNodes 是封装符合jstree中的,还有其他属性 详见http://www.cnblogs.com/wuhuacong/p/4759564.html
  • 表设计 详见 http://www.cnblogs.com/jeffwongishandsome/archive/2010/10/26/1861633.html 评论里有更加方案



jstree的两个基本事件


1 - changed.jstree






$('#jstree').on("changed.jstree", function (e, data) {
//data.node是点击的节点信息,点击节点之后的逻辑都在这里处理
init_TableInfo(data.node.id);
var param = { TableId: data.node.id }
table.settings()[
0].ajax.data = param;
table.ajax.reload();
$(
".introWrap").css("display", "none");
});


View Code

2 - ready.jstree






$("#jstree").on("ready.jstree", function (event, data) {
data.instance.open_node(
1); // 展开root节点
//// 隐藏根节点 http://stackoverflow.com/questions/10429876/how-to-hide-root-node-from-jstree
$("#1_anchor").css("visibility", "hidden");
$(
"li#1").css("position", "relative");
$(
"li#1").css("top", "-20px");
$(
"li#1").css("left", "-20px");
$(
".jstree-last .jstree-icon").first().hide();
});


View Code

3 - 说明


  • changed中可以获取到所点击节点的所有信息,可以做逻辑判断
  • ready是所有节点加载完成后触发的,在这里我隐藏了根目录
  • jstree官网 https://www.jstree.com/
  • 借鉴 https://www.cnblogs.com/ibgo/p/4025036.html

转载于:https://www.cnblogs.com/tanfuchao/p/10547665.html



推荐阅读
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • 使用Tkinter构建51Ape无损音乐爬虫UI
    本文介绍了如何使用Python的内置模块Tkinter来构建一个简单的用户界面,用于爬取51Ape网站上的无损音乐百度云链接。虽然Tkinter入门相对简单,但在实际开发过程中由于文档不足可能会带来一些不便。 ... [详细]
  • 深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例 ... [详细]
  • iOS snow animation
    CTSnowAnimationView.hCTMyCtripCreatedbyalexon1614.Copyright©2016年ctrip.Allrightsreserved.# ... [详细]
  • WPF项目学习.一
    WPF项目搭建版权声明:本文为博主初学经验,未经博主允许不得转载。一、前言记录在学习与制作WPF过程中遇到的解决方案。使用MVVM的优点是数据和视图分离,双向绑定,低耦合,可重用行 ... [详细]
  • 本文介绍了 Go 语言中的高性能、可扩展、轻量级 Web 框架 Echo。Echo 框架简单易用,仅需几行代码即可启动一个高性能 HTTP 服务。 ... [详细]
  • 自然语言处理(NLP)——LDA模型:对电商购物评论进行情感分析
    目录一、2020数学建模美赛C题简介需求评价内容提供数据二、解题思路三、LDA简介四、代码实现1.数据预处理1.1剔除无用信息1.1.1剔除掉不需要的列1.1.2找出无效评论并剔除 ... [详细]
  • 一个建表一个执行crud操作建表代码importandroid.content.Context;importandroid.database.sqlite.SQLiteDat ... [详细]
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • Ext JS MVC系列一:环境搭建与框架概览
    本文主要介绍了如何在项目中使用Ext JS 4作为前端框架,并详细讲解了Ext JS 4的MVC开发模式。文章将从项目目录结构、相关CSS和JS文件的引用以及MVC框架的整体认识三个方面进行总结。 ... [详细]
  • 装饰者模式(Decorator):一种灵活的对象结构设计模式
    装饰者模式(Decorator)是一种灵活的对象结构设计模式,旨在为单个对象动态地添加功能,而无需修改原有类的结构。通过封装对象并提供额外的行为,装饰者模式比传统的继承方式更加灵活和可扩展。例如,可以在运行时为特定对象添加边框或滚动条等特性,而不会影响其他对象。这种模式特别适用于需要在不同情况下动态组合功能的场景。 ... [详细]
  • 在Android开发中,当TextView的高度固定且内容超出时,可以通过设置其内置的滚动条属性来实现垂直滚动功能。具体来说,可以通过配置`android:scrollbars="vertical"`来启用垂直滚动,确保用户能够查看完整的内容。此外,为了优化用户体验,建议结合`setMovementMethod(ScrollerMovementMethod.getInstance())`方法,使滚动操作更加流畅和自然。 ... [详细]
  • 使用 ListView 浏览安卓系统中的回收站文件 ... [详细]
  • 在探讨Hibernate框架的高级特性时,缓存机制和懒加载策略是提升数据操作效率的关键要素。缓存策略能够显著减少数据库访问次数,从而提高应用性能,特别是在处理频繁访问的数据时。Hibernate提供了多层次的缓存支持,包括一级缓存和二级缓存,以满足不同场景下的需求。懒加载策略则通过按需加载关联对象,进一步优化了资源利用和响应时间。本文将深入分析这些机制的实现原理及其最佳实践。 ... [详细]
  • 在JavaWeb开发中,文件上传是一个常见的需求。无论是通过表单还是其他方式上传文件,都必须使用POST请求。前端部分通常采用HTML表单来实现文件选择和提交功能。后端则利用Apache Commons FileUpload库来处理上传的文件,该库提供了强大的文件解析和存储能力,能够高效地处理各种文件类型。此外,为了提高系统的安全性和稳定性,还需要对上传文件的大小、格式等进行严格的校验和限制。 ... [详细]
author-avatar
longyuyuyu
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有