ace_tree总结。各类问题解决办法汇集
首先讲一下怎么使用,然后讲一下出现的问题的解决办法
1.引用js和css文件 ace-extra.min.js、ace.min.css、fuelux.tree.min.js、ace-elements.min.js、fuelux.tree-sample-demo-data.js(这个js是默认的数据,以及数据格式)
2.初始化ace_tree
<div class="widget-box widget-color-blue2">
<div class="widget-body">
<div class="widget-main padding-8">
<div id="tree1" class="tree"></div>//id为tree1和下面一样 这样才能初始化
</div>
</div>
</div>
$('#tree1').ace_tree({
dataSource: treeDataSource ,//这个是你要传给他的数据,待会后面会讲解这个数据格式
multiSelect:true,
folderSelect:true,
cacheItems: true,
loadingHTML:'<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>',
'open-icon' : 'ace-icon tree-minus',
'close-icon' : 'ace-icon tree-plus',
'selectable' : true,
'selected-icon' : 'ace-icon fa fa-check icon-ok',
'unselected-icon' : 'ace-icon fa fa-times'
});
$('#tree1').on('updated', function(e, result) { //console.log(result.info[0].id);
//result.info >> an array containing selected items
//result.item
//result.eventType >> (selected or unselected)
}).on('selected', function(e,result) {
//选中文件的方法
}).on('unselected', function(e) {
//取消选择的方法
}).on('opened', function(e, result) {
//打开文件夹的方法
}).on('closed', function(e) {
//关闭文件夹的方法
}); //下面是数据格式
var tree_data = {
//'唯一标识':{name:'要展示的名字',type:'folder是文件夹类型,item是文件类型',id:'这条数据的标识,比如点击树后需要用这条数据来查其他数据,在这里定义标识就可以获取'}
'for-sale' : {name: 'For Sale', type: 'folder',id:id} ,
'vehicles' : {name: 'Vehicles', type: 'folder'} ,
'rentals' : {name: 'Rentals', type: 'folder'} ,
'real-estate' : {name: 'Real Estate', type: 'folder'} ,
'pets' : {name: 'Pets', type: 'folder'} ,
'tickets' : {name: 'Tickets', type: 'item'} ,
'services' : {name: 'Services', type: 'item'} ,
'personals' : {name: 'Personals', type: 'item','additionalParameters':{'item-selected': true}}
}
//这个是子集的格式
tree_data['for-sale']['additionalParameters'] = {
'children' : {
'appliances' : {name: 'Appliances', type: 'item','additionalParameters':{'item-selected': true}},
'arts-crafts' : {name: 'Arts & Crafts', type: 'item'},
'clothing' : {name: 'Clothing', type: 'item'},
'computers' : {name: 'Computers', type: 'item'},
'jewelry' : {name: 'Jewelry', type: 'item'},
'office-business' : {name: 'Office & Business', type: 'item'},
'sports-fitness' : {name: 'Sports & Fitness', type: 'item'}
},
'item-selected': true }
var treeDataSource = new DataSourceTree({data: tree_data});//这一步很关键,把数据放进去
//不过我觉得这些数据在前台处理不太好处理,我建议在后台处理,以java为例,可以将这些数据放在实体类里面或者放在map里面 好了,使用的方法已经讲完了。那么讲一下经常出现的问题 1.默认选中文件
tree_data['for-sale']['additionalParameters'] = {
'children' : {
'appliances' : {name: 'Appliances', type: 'item','additionalParameters':{'item-selected': true}},
'arts-crafts' : {name: 'Arts & Crafts', type: 'item'},
},
'item-selected': true
}
这样就会默认选中for-sale文件夹和他下面的appliances文件了 2.打开文件夹事件
如果默认选中了文件夹 他会自动执行
on('opened', function(e, result) {
//打开文件夹的方法
})
所以我建议这个方法里面不要写刷新页面的方法,不然就会陷入死循环
3.选中的样式问题
'open-icon' : 'ace-icon tree-minus',//选中文件夹的样式
'selected-icon' : 'ace-icon fa fa-check icon-ok',//选中文件的样式
ace_tree总结。各类问题解决办法汇集的更多相关文章
- ASP+Access UTF-8 网页乱码问题解决办法
用ACCESS数据库和ASP做网站时用UTF-8编码有时会出现乱码,再者网页出错或者刷新页面后就是乱码,如果数据库取值乱码在开头加上<%@LANGUAGE="VBSCRIPT" ...
- Windows XP系统下添加任务计划常出现问题解决办法
Windows XP系统下添加任务计划常出现问题解决办法 计划任务就是让电脑在指定的时间内执行指定的动作(计划动作),这些动作可以是一个程序,也可以是一个批处理,但是至少是可以运行的(通俗一些就是双击 ...
- Open Sans字体兼容问题解决办法[font-face]
参考:http://www.tantengvip.com/2014/11/open-sans/ 1.font-face使用方法 font-face是CSS3中的一个模块,主要是把自定义的Web字体嵌入 ...
- 易通电脑锁2007V6.3.3.3无法卸载问题解决办法
易通电脑锁2007V6.3.3.3无法卸载问题解决办法把原版文件拷贝回去.bat@echo offcolor 2Fecho 该批处理会把易通电脑锁2007版原文件拷贝回去,解决易通电脑锁卸载时出现的运 ...
- Sublime Text 3 若干问题解决办法
1.在高分屏下中文文件夹名显示异常问题解决办法 新买了个2K的屏,有些中文文件夹名全部变成了“口口”. 在“preferences” - "设置-用户" 添加 "dpi_ ...
- C盘不能新建文件的问题解决办法
C盘不能新建文件的问题解决办法 主要症状: 1.C 盘文件不能修改2.C 盘不能新建文件3.总之就是只能读取不能,写入和修改这样对于平时操作造成了极其的不方便~~~复制文件到C 盘会提示:错误0×80 ...
- iOS常见异常Exec_Bad_Access问题解决办法
iOS常见异常Exec_Bad_Access问题解决办法 在iOS开发中,经常遇到Exec_Bad_Access异常,导致程序奔溃问题,一般这个问题都是因为过早的release对象,然后又对该 ...
- Android Project from Existing Code 生成 R 文件错误、失败等问题解决办法 - 持续更新
Android Project from Existing Code 生成 R 文件错误.失败等问题解决办法 - 持续更新 git 上的项目,pull下来之后用Android Project fro ...
- WPF中不规则窗体与WebBrowser控件的兼容问题解决办法
原文:WPF中不规则窗体与WebBrowser控件的兼容问题解决办法 引言 这几天受委托开发一个网络电视项目,要求初步先使用内嵌网页形式实现视频播放和选单,以后再考虑将网页中的所有功能整合进桌面程序. ...
随机推荐
- CentOS 搭建Graylog集群详解
1. Graylog2 简介 Graylog 是一个简单易用.功能较全面的日志管理工具,相比 ELK 组合, 优点: 部署维护简单,一体化解决方案,不像ELK三个独立系统集成. 查相比ES json语 ...
- 定制自己的vue模版
前言 使用vue这个框架已经陆陆续续做了好几个项目了,不知不觉也已经在公司呆了4个月,转正了.时间如水...(省略一万字)./咳-不瞎扯了,公司是直接用的官方脚手架生成项目,官方模版没有vuex,ax ...
- Cmder 软件中修改λ符号方法
以前的版本 网上都有,我就不介绍了, 只介绍现在的 1. 打开Cmder软件安装位置 2. 打开vendor文件夹 profile.ps1文件 3. 找到第77行 Write-Host " ...
- Python日期时间Date/Time
Python程序可以处理多种方式的日期和时间.日期格式之间的转换是一种常见计算机的杂活. Python的时间和日历模块,能帮助处理日期和时间. Tick是什么? 为时间间隔,以秒为单位的浮点数.从“新 ...
- 将图标LOGO之类的图形图像转换成字体调用方法大全
借鉴百度对此标题的评价: 使用字体图标的优势 字体图标除了图像清晰度之外,比位图还有哪些优势呢. 适用性:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍大小的图像)要小.一旦图标字体加载 ...
- 在ubuntu16.04中一键创建LAMP环境
步骤 1 执行命令apt-get update. 步骤 2 执行命令apt-get install lamp-server^. 步骤 3 在安装过程中会跳出Mysql数据库root用户密码设置窗口,按 ...
- 谦先生的bug日志之hive启动权限问题
上海尚学堂谦先生的bug日志之hive启动权限问题 这几天开始做新老集群的迁移,今天开始对hive的所有数据进行迁移,主要是表的元信息和表数据.表的元信息我们存在mysql中,跟hive的服务器并不在 ...
- interface接口
当一个抽象类中的方法都是抽象的时候,这时可以将该抽象类用另一种形式定义和表示,就是接口 interface. 定义接口使用的关键字不是class,是interface.接口中常见的成员: 这些成员都有 ...
- Nhibernate/Hibernate 使用多参数存儲過程 出現could not execute query,Could not locate named parameter等錯誤解決
<?xml version="1.0" encoding="utf-8" ?> <hibernate-mapping xmlns=" ...
- win10 uwp MVVM 轻量框架
如果在开发过程,遇到多个页面之间,需要传输信息,那么可能遇到设计的问题.如果因为一个页面内包含多个子页面和多个子页面之间的通信问题找不到一个好的解决方法,那么请看本文.如果因为ViewModel代码越 ...