- 浏览: 800268 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (480)
- Spring (12)
- Hibernate (8)
- Struts2 (4)
- Java 基础-JDK-类-接口-URI-专题研究 (27)
- 线程、线程池、多线程高并发高可用、Socket通信 (15)
- Oracle数据库 (20)
- 一般-前端js-html-其它 (25)
- JYSK-互联网金融、金融科技、支付、公司、新闻等等 (8)
- Ajax-jQuery开源框架 (7)
- Json-轻量级的数据交换格式 (14)
- JavaScript (15)
- Jsp、Servlet、Servlet+JSP+JavaBean开发模式(MVC) (18)
- Html-JavaScript-前端-调用接口 (12)
- Sql Server 2005 (6)
- 正则表达式 (2)
- Java tools (18)
- 加签与验签、加密与解密 (3)
- Ajax技术核心-xmlHttpRequest(简称XHR) (6)
- xml-数据交换格式 (3)
- 信息采集 (1)
- Http - Https - HttpClient - httpCore-SSL-TLS (10)
- HtmlParser (2)
- 标签库 (1)
- SMS (2)
- jxl-导入导出 (4)
- poi-导入导出 (2)
- 定时器Timer+Quartz (6)
- 工作流引擎JBPM3.2.3 (4)
- 工作流引擎JBPM4 (0)
- 数据源-JNDI (0)
- tomcat、weblogic等应用服务器 (6)
- 工作流引擎jbpm5 (1)
- 搜索引擎Lucene (1)
- ant (1)
- 大数据-HBase (2)
- bigtable (0)
- 数据库设计 (4)
- jquery tab (0)
- mybatis (5)
- jquery ui 1.10.3 (5)
- Jboss7 (1)
- 规则引擎drools (0)
- 工作流引擎Activiti5 (0)
- 数据库-用户自定义函数 (0)
- 数据库-存储过程 (2)
- 数据库-视图 (0)
- 数据库-触发器 (0)
- 数据库-sql (2)
- highcharts-图表工具 (1)
- sql server 2008 (6)
- 诗词-工作室 (2)
- 数据割接 (1)
- GIS-地理信息系统 (2)
- RS-遥感技术 (1)
- GPS-全球定位系统 (1)
- java整合flex_RIA开发 (3)
- C#编程语言 (5)
- webservice_axis2_cxf_soap_wsdl (2)
- sql语句 (3)
- Flex_WebService_GIS (25)
- PHP编程语言 (0)
- ExtJS4.2 (1)
- Spring mvc (5)
- EasyUI1.4.2 (16)
- 日期时间工具类 (4)
- 随机数 (1)
- Arcgis api for js (0)
- Mysql数据库 (9)
- 移动互联网 java html5/flash socket netty (0)
- API接口 (1)
- AndroidStudio (0)
- Git (2)
- Maven (5)
- IDEA (0)
- 大数据-Hadoop (2)
- JPA (0)
- Spring boot (4)
- JSF (0)
- nginx_lua_module_redis (2)
- Activiti (1)
- bootstrap (1)
- AngularJS (10)
- 数据库-索引 (1)
- Linux及其连接工具SSH (4)
- java日志管理 (2)
- islider滑动控件 (1)
- jquery (1)
- 异常处理Exception (1)
- 秒杀与类秒杀系统 (1)
- 连接数据库、数据库连接池 (4)
- 数据库-临时表 (1)
- 软件设计模式-单例、多例、代理、工厂、观察者 (3)
- 集合框架 (5)
- 人工智能--Artificial intelligence、神经网络算法、机器学习 (1)
- 分布式应用 (1)
- SOA服务-Dubbo框架-Thrift框架 (2)
- Zookeeper分布式服务框架 (2)
- intellij idea (1)
- python编程语言 (0)
- 消息队列_MQ (0)
- 消息队列_RabbitMQ (2)
- 消息队列_ActiveMQ (1)
- 消息队列_Kafka (2)
- 缓存_Redis (4)
- 缓存_Memcache (0)
- 缓存_Ehcache (0)
- ivy-ivyde (1)
- google-protocol buffers (1)
- 正向代理-正向代理服务器 (1)
- 反向代理-反向代理服务器 (1)
- JVM内存模型 (0)
- Thunder框架 (1)
- NIO-非阻塞式IO (0)
- 软件测试、性能测试 (1)
- 序列化、Serializable接口、Externalizable接口 (3)
- 线程池-ExecutorService-ThreadPoolExecutor (1)
- web.xml (1)
- java开发-java工具-实用工具网站 (6)
- 医疗 (1)
- Filter-过滤器 (2)
- Unicode码-双字节字符编码 (1)
- OpenResty (1)
- 计算机网络 (1)
- eclipse_myeclipse_intellij idea (3)
- Enum (1)
- 大数据--Big Data (1)
- 云计算--Cloud computing (1)
- Elastic-Job (1)
- Redis (2)
- 文件流-IO操作 (6)
- 计算机基础知识 (1)
- Hessian-二进制RPC协议 (1)
- String类 (3)
- BigDecimal类 (1)
- java重要接口 (1)
- ReactJS (1)
- 跨域问题 (0)
- Map (1)
- 注解 (1)
- ASCII码-单字节字符编码 (1)
- 微服务、微服务架构 (2)
- RPC协议、RPC服务、RPC框架 (0)
- java反射 (1)
- java项目之classpath (1)
- 经典算法-树 (1)
- listener-监听器 (1)
- Interceptor-拦截器 (1)
- pojo javabean (2)
- 计算机科学与技术-进阶 (1)
- 代码规范与文档编写 (1)
- UML-统一建模语言 (1)
- 对接微信、支付宝 (3)
- 压力测试 (1)
- 办公软件-Excel (1)
- 办公软件-PPT (0)
- UTF8、GBK编码 (1)
- 微服务架构:Spring Cloud架构-Dubbo架构 (6)
- Nginx (1)
- 点滴业务 (1)
- form表单-json数据-转换与接口调用 (1)
- Junit单元测试 (1)
- 大数据-Spark (1)
- 大数据-Storm (1)
- 数据库事务-Spring事务 (0)
- elasticsearch (1)
- windows (1)
最新评论
1、效果图
2、代码
js、css
关键代码
3、与activiti editor集成时
4、api
http://wix.github.io/angular-tree-control/
2、代码
js、css
<script type="text/javascript" src="editor-app/libs/angular_tree/angular-tree-control.js"></script> <link rel="stylesheet" type="text/css" href="editor-app/libs/angular_tree/tree-control.css"> <link rel="stylesheet" type="text/css" href="editor-app/libs/angular_tree/tree-control-attribute.css">
关键代码
<script type="text/javascript"> angular.module('app', ['treeControl']).controller('MyCtrl', ['$scope',function($scope){ //treeOptions $scope.treeOptions = { nodeChildren: "children", dirSelectable: true, multiSelection:true, injectClasses: { ul: "a1", li: "a2", liSelected: "a7", iExpanded: "a3", iCollapsed: "a4", iLeaf: "a5", label: "a6", labelSelected: "a8" } } //groupsTreeModel $scope.groupsTreeModel= [ { "name" : "总公司", "age" : "29", "children" : [ { "name" : "市场销售部", "age" : "21", "children" : [ { "name" : "销售部", "age" : "42", "children" : [] }, { "name" : "市场部", "age" : "21", "children" : [ { "name" : "国内市场部", "age" : "23", "children" : [ { "name" : "华东市场", "age" : "32", "children" : [] }, { "name" : "中部市场", "age" : "34", "children" : [] } ]} ]} ]}, { "name" : "财务部", "age" : "33", "children" : [ { "name" : "会计部", "age" : "25", "children" : [] }, { "name" : "出纳部", "age" : "28", "children" : [] } ]}, { "name" : "法务部", "age" : "29", "children" : [] } ] } ]; }]); //item click $scope.onTreeLeafItemClickFunction = function(sel) { //alert(sel.name); $scope.selectedNode = sel; }; //father node expanded $scope.onTreeFatherNodeExpandFunction=function(exp){ //alert('expand'); alert('expand:'+exp.name); } }]); </script> <!-- body #s --> <body ng-controller="MyCtrl"> <div treecontrol class="tree-light" tree-model="groupsTreeModel" on-selection="onTreeLeafItemClickFunction(node)" on-node-toggle="onTreeFatherNodeExpandFunction(node)" options="treeOptions" >{{node.name}}</div> </body> <!-- body #e -->
3、与activiti editor集成时
var activitiModeler = angular.module('activitiModeler', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ngRoute', 'ngDragDrop', 'mgcrea.ngStrap', 'ngGrid', 'ngAnimate', 'pascalprecht.translate', 'duScroll', 'treeControl' ]); /*add tree component: treecontrol*/
angular.module('activitiModeler').controller('myCandidateGroupsController', ['$scope','$http','myCache', function($scope,$http,myCache){ //add your code }]);
4、api
http://wix.github.io/angular-tree-control/
发表评论
-
angularjs项目运行环境 及 常见问题解决
2017-01-09 10:58 1947配置angularjs项目运行环境的几个步骤 1--安装 ... -
运行angularjs项目--安装nodejs,配置项目运行环境
2016-10-10 15:45 785参考资料: http://m.blog.csdn.net/ar ... -
angularJS文本框根据输入字符(文本框值)进行查询ng-keydown ng-keyup
2016-04-05 16:12 2831html: <input ... -
angularjs中My97DatePicker无法通过$scope.ngModel获取值解决
2016-03-24 17:42 11721、写一个angular自定义指令Directive(网上找的 ... -
AngularJs输出字符串换行\n或<br/>不管用时,要用ng-bind-html配合解决
2016-03-24 16:59 134401、controller /*显示条件表达式*/ var m ... -
angularjs select multiple="multiple" ng-repeat
2016-03-10 11:36 1862效果图: <!DOCTYPE html> ... -
angularjs ul li radio span ng-class ng-checked demo
2016-03-01 14:09 385效果图: 点击li中的radio,选中li中的文字; 点击li ... -
AngularJS 学习示例
2016-02-25 10:42 5321、九种提高AngularJS性能 ... -
Angularjs 根据 一个select的值去设置另一个select的值
2016-02-23 14:43 1919html: <div ng-controller=&q ...
相关推荐
在这个名为"前端项目-angular-ui-tree.zip"的压缩包中,我们聚焦于一个特定的AngularJS组件——**Angular UI Tree**。 Angular UI Tree是AngularJS的一个扩展模块,它提供了用于处理**嵌套数据结构**的能力,尤其是...
总的来说,“angular-tree-demo”是一个很好的学习资源,它展示了如何在 AngularJS 应用中集成和使用第三方组件,以及如何处理层级数据和实现自定义交互。如果你对 Angular 开发感兴趣,尤其是处理树形数据,那么...
在这个demo中,dtree(Data Tree)被用来呈现菜单结构。Dtree通常是一个交互式的组件,允许用户展开、折叠节点,以此展示菜单的层级关系。它通常由JavaScript库如jQuery UI、AngularJS的ngTree或者React、Vue等前端...
比如`angular-tree-control.html`页面中使用了`<treecontrol>`指令,显示了一个树形控件,这个指令依赖于`angular-tree-control.js`模块;`default.html`页面则是展示了一个简单的文本数据,显示了页面加载并正确...
3. 树形结构(tree):树形组件适用于展现层级关系的数据,支持展开、折叠、拖拽等操作,常用于组织结构或目录结构的展示。 三、实例应用 在实际项目中,我们可以结合这些组件,创建出丰富的交互体验。例如,可以...
https://github.com/dashnowords/blogs/tree/master/Demo/rebuild-angularjs-controller 一. 结构拆分 小型项目 通过子路由实现拆分分层,父级控制器控制共享模块,提供公共能力,子级分管自己的模块,父子级之间...
综上所述,`jhipster4-demo` 应用程序是一个全面展示JHipster 4 功能的示例,融合了Java、Spring Boot、AngularJS、TypeScript、Webpack 和Maven 等技术,为开发者提供了一个高效的全栈开发环境。通过学习和分析这个...
$.fn.zTree.init($("#treeDemo"), setting, zNodes); }); ``` 六、拓展应用 zTree不仅适用于静态展示,还可以结合后台动态交互,如权限管理、文件管理系统、组织架构展示等。通过与其他前端框架(如AngularJS、...
$.fn.zTree.init($("#treeDemo"), setting, zNodes); }); ``` ### 5. 自定义配置 zTree允许通过配置项对象`setting`来自定义其行为,例如: - `data`:数据相关配置,如`key`用于设置节点键值,`simpleData`...
相比于Bootstrap、AngularJS等其他前端框架,jEasyUI专注于UI组件的开发,更适用于需要快速构建界面的项目。其组件功能强大,但社区支持相对较小,对于大型复杂项目,可能需要结合其他框架如Vue.js或React来增强动态...
- **AngularJS**:ng-grid、ui-grid提供了树形数据的支持。 - **React**:react-table、ag-Grid等库支持树形数据展示。 - **Vue.js**:Element UI、Vuetify等框架包含了树形Grid组件。 - **JavaScript原生**:通过...
具体实现可以参考所提供的 GitHub 地址:https://github.com/justforuse/Pro_Angular-demo/tree/master/draggable-list。 总之,`angular-ui-sortable` 提供了一个方便的方式来实现 AngularJS 应用中的可拖拽排序...
* AngularJS * [2.0+](https://github.com/SortableJS/angular-sortablejs) * [1.*](https://github.com/SortableJS/angular-legacy-sortablejs) * React * [ES2015+]...