aceadmin1.4框架treeview多选改造

有部分内容参考以下地址进行改造：

https://www.cnblogs.com/louis80/p/5093901.html

效果

改造前：

改造后：

tree.js文件

selectTreeNode: function selectItem(clickedElement, nodeType) {中的

if (nodeType === 'folder') {
               // make the clicked.$element the container branch
               clicked.$element = clicked.$element.closest('.tree-branch');
               clicked.$icon = clicked.$element.find('.icon-item');
}

改为：

function styleNodeSelected (self, $element, $icon) {//ACE方法最后加入：

if ( $element.data('type') === 'folder' && $icon.hasClass(self.options['unselected-icon']) ) {
$icon.removeClass(self.options['unselected-icon']).addClass(self.options['selected-icon']); //ACE
$element.find("li").addClass("tree-selected");
}

function styleNodeDeselected (self, $element, $icon) {//ACE方法最后加入：

if ( $element.data('type') === 'folder' && $icon.hasClass(self.options['selected-icon']) ) {
       $icon.removeClass(self.options['selected-icon']).addClass(self.options['unselected-icon']).removeClass("tree-selected"); //ACE
       $element.find("li").removeClass("tree-selected");
   }

elements.treeview.js文件

$.fn.aceTree = $.fn.ace_tree = function(options) {　下的

<div class="tree-branch-header">\
                   <span class="tree-branch-name">\
                       <i class="icon-folder '+$options['close-icon']+'"></i>\
                       <span class="tree-label"></span>\
                   </span>\
               </div>\

改为：

<div class="tree-branch-header">\
                   <span class="tree-branch-name">\
                       <i class="icon-folder '+$options['close-icon']+'"></i>\
                       '+($options['folderSelect'] ? ($options['unselected-icon'] == null ? '' : '<i class="icon-item '+$options['unselected-icon']+'"></i>') : '')+'\
                       <span class="tree-label"></span>\
                   </span>\
               </div>\

ace.css文件：

.tree .icon-caret {
vertical-align: baseline !important;
}

注释，改为：

.tree .icon-caret {
/* vertical-align: baseline !important; */
}

在下面这段之后

.tree-container .tree::before {
margin-left: -1px;
}

插入：

.tree .tree-branch > .tree-branch-header > .tree-branch-name > .icon-item {
   color: #F9E8CE;
   width: 13px;
   height: 13px;
   line-height: 13px;
   font-size: 11px;
   text-align: center;
   border-radius: 3px;
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   background-color: #FAFAFA;
   border: 1px solid #CCC;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

效果页：treeview.html文件：

$('#tree1').ace_tree({
       dataSource: sampleData['dataSource1'],
       multiSelect: true,
       cacheItems: true,
       'open-icon' : 'ace-icon tree-minus',
       'close-icon' : 'ace-icon tree-plus',
       'itemSelect' : true,
       'folderSelect': false,
       'selected-icon' : 'ace-icon fa fa-check',
       'unselected-icon' : 'ace-icon fa fa-times',
       loadingHTML : '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>'
   });

改为：

$('#tree1').ace_tree({
       dataSource: sampleData['dataSource1'],
      multiSelect: true,
   cacheItems: true,
   'open-icon' : 'ace-icon tree-minus hide',
   'close-icon' : 'ace-icon tree-plus hide',
   'folderSelect': true,
   'selectable' : true,
   'selected-icon' : 'ace-icon fa fa-check',
   'unselected-icon' : 'ace-icon fa fa-times',
   'folder-open-icon' : 'ace-icon tree-plus',
   'folder-close-icon' : 'ace-icon tree-minus',
   loadingHTML: '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>'
   });

到此结束。

完整aceadmin1.4代码请移步：https://download.csdn.net/download/ohaozy/10583828

放一张我项目里的效果图：实现了自动展开、自动勾选已选择项，是不是挺漂亮？

aceadmin1.4框架treeview多选改造相关推荐

TreeView复选框选择逻辑判断
在mobile里使用TreeView控件时,控件本身没有提供节点复选框选择判断逻辑. 如选中父节点,所有子节点全部选中: 取消父节点,同时也取消所有子节点: 或者选中所有子节点,父节点自动选中等等. ...
实战 | UI 自动化测试框架设计与 PageObject 改造
本文节选自霍格沃兹<测试开发实战进阶>课程教学内容,进阶学习文末加群. 在 UI 自动化测试过程中,面对复杂的业务场景,经常会遇到这样的挑战: 简单的录制/回放速度快,但无法适应复杂场景: ...
python毕业设计作品基于django框架电影院购票选座系统毕设成品（7）中期检查报告
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术主要python技术介绍:框 ...
python毕业设计作品基于django框架电影院购票选座系统毕设成品（8）毕业设计论文模板
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术主要python技术介绍:框 ...
python毕业设计作品基于django框架电影院购票选座系统毕设成品（4）开题报告
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术主要python技术介绍:框 ...
python毕业设计作品基于django框架电影院购票选座系统毕设成品（6）开题答辩PPT
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术主要python技术介绍:框 ...
php 如何实现全选,如何用thinkphp框架实现全选，反选，全不选功能?
天涯尽头无女友 !function ($) {//全选反选全不选$("#selAll").click(function () {$(".lists :checkbox ...
前端框架你究竟选什么
在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...
11个开源测试自动化框架，如何选？
以下为作者观点: 如果你正在考虑建立你自己的测试自动化框架,请再想一想.在大多数情况下,你最好可以考虑一个或多个可用的开源选项. 这是因为,一般来说,框架是一套可以跨团队使用的最佳实践.假设.通用工具 ...
利用easyUI实现tree叶子节点横向展示以及checkbox联级勾选改造
1.tree的叶子节点横向展示 2.(a) 勾选根节点时,子节点全部联级选中,取消时同理: (b) 勾选非根节点时,该节点的所有父节点以及子节点全部选中 (c) 取消非根节点时,该节点的所有子节点取消 ...

aceadmin1.4框架treeview多选改造

aceadmin1.4框架treeview多选改造相关推荐

最新文章

热门文章