Bootstrap Tree View,简单而优雅的树结构组件(2)-阿里云开发者社区

开发者社区> 沉默王二> 正文

Bootstrap Tree View,简单而优雅的树结构组件(2)

简介: Bootstrap Tree View,简单而优雅的树结构组件
+关注继续查看

####④、拿到数据之后,就可以对treeview进行初始化了。


这里,我们讲一点更复杂的应用,如下图。

image.png


如果用户已经保存过一部分节点,那么初次展示的时候就需要通过treeview展示出来了。

我们定一些规则:


节点全部选中时color为red,check框选中。

节点未全部选中时color为red,check框未选中。

节点一个也没选中时color为默认,check框未选中。

为此,我们需要增加一点css。


/* 树形省市 */
.treeview .list-group-item.node-checked {
    color: red;
}
.treeview .list-group-item.node-selected {
    color: red;
}


有了这个规则,我们在初次展开treeview的时候,就需要重新制定以下数据规则。

// 省市级数据
var procityTreeData = YUNM._set.procityTreeData;
// 用户已经选中的城市,比如河南洛阳。
var init_code = $this.next("input[name=area]").val();

// 如果用户有选中项,则对选中项进行规则展示
if (init_code) {
    // 初始化选中项目
    $.each(procityTreeData, function(index, value) {
        // 通过i和省级的节点length进行对比,判断是否全选、未全选、全未选三种状态
        var i = 0;
        $.each(value.nodes, function(index1, value1) {
            if (init_code.indexOf(value1.code) != -1) {
                // 选中时先初始化state,再把state.checked设为true
                value1["state"] = {};
                value1["state"]["checked"] = true;
                i++;
            } else {
                // 否则重置state,保证procityTreeData数据的不被更改
                // 这个地方其实有待优化,由于js我还不算精通,所以不知道怎么把数组复制到一个新数组里,保证原始属于不被更改
                value1["state"] = {};
            }
        });
        
        value["state"] = {};
        // 市级节点有选中,那么省级节点的状态需要变化,根据上面制定的规则来
        if (i > 0) {
            // 市级全选,那么此时省级节点打钩
            if (value.nodes.length == i) {
                value["state"]["checked"] = true;
            }
            // 根据selected来设定颜色
            value["state"]["selected"] = true;
        } else {
            value["state"]["selected"] = false;
        }
    });
}


让treeview和我们打个招呼吧!


$("#procitytree").treeview({
    data : procityTreeData,// 赋值
    highlightSelected : false,// 选中项不高亮,避免和上述制定的颜色变化规则冲突
    multiSelect : false,// 不允许多选,因为我们要通过check框来控制
    showCheckbox : true,// 展示checkbox
    }).treeview('collapseAll', {// 节点展开
    silent : true
});


####⑤、节点onNodeChecked、onNodeUnchecked的应用

不要⑤就够了吗?

不够,我们还要控制节点选择框的变化。

就像效果图中那样。

image.png

image.png

onNodeChecked : function(event, node) {
    YUNM.debug("选中项目为:" + node);
    
    // 省级节点被选中,那么市级节点都要选中
    if (node.nodes != null) {
        $.each(node.nodes, function(index, value) {
            $this.treeview('checkNode', value.nodeId, {
                silent : true
            });
        });
    } else {
        // 市级节点选中的时候,要根据情况判断父节点是否要全部选中

        // 父节点
        var parentNode = $this.treeview('getParent', node.nodeId);

        var isAllchecked = true; // 是否全部选中

        // 当前市级节点的所有兄弟节点,也就是获取省下面的所有市
        var siblings = $this.treeview('getSiblings', node.nodeId);
        for ( var i in siblings) {
            // 有一个没选中,则不是全选
            if (!siblings[i].state.checked) {
                isAllchecked = false;
                break;
            }
        }

        // 全选,则打钩
        if (isAllchecked) {
            $this.treeview('checkNode', parentNode.nodeId, {
                silent : true
            });
        } else {// 非全选,则变红
            $this.treeview('selectNode', parentNode.nodeId, {
                silent : true
            });
        }
    }
},
onNodeUnchecked : function(event, node) {
    YUNM.debug("取消选中项目为:" + node);

    // 选中的是省级节点
    if (node.nodes != null) {
        // 这里需要控制,判断是否是因为市级节点引起的父节点被取消选中
        // 如果是,则只管取消父节点就行了
        // 如果不是,则子节点需要被取消选中
        if (silentByChild) {
            $.each(node.nodes, function(index, value) {
                $this.treeview('uncheckNode', value.nodeId, {
                    silent : true
                });
            });
        }
    } else {
        // 市级节点被取消选中

        var parentNode = $this.treeview('getParent', node.nodeId);

        var isAllUnchecked = true; // 是否全部取消选中

        // 市级节点有一个选中,那么就不是全部取消选中
        var siblings = $this.treeview('getSiblings', node.nodeId);
        for ( var i in siblings) {
            if (siblings[i].state.checked) {
                isAllUnchecked = false;
                break;
            }
        }

        // 全部取消选中,那么省级节点恢复到默认状态
        if (isAllUnchecked) {
            $this.treeview('unselectNode', parentNode.nodeId, {
                silent : true,
            });
            $this.treeview('uncheckNode', parentNode.nodeId, {
                silent : true,
            });
        } else {
            silentByChild = false;
            $this.treeview('selectNode', parentNode.nodeId, {
                silent : true,
            });
            $this.treeview('uncheckNode', parentNode.nodeId, {
                silent : true,
            });
        }
    }
    silentByChild = true;
},

到这里,treeview的应用已经算是非常全面了,我想你一定也会应用了,不会的话,再来找我啊!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java 设计模式
Java 设计模式
17 0
一篇文章带你入门K8S二次开发
我们经常会在网上看到K8S和周边工具的教程,例如HELM的使用,droneCI的使用,但是很少有文章写,如何基于K8S进行二次开发,本篇文章将使用python和vue进行K8S的二次开发,实现一个简单的查询k8s的pod和node信息的页面
23 0
最好用的 7 款 Vue admin 后台管理系统测评
Vue admin 后台管理系统作为每个项目必备的管理后台,对大家来说十分重要。选不好,配不好,不仅现在用着抓狂,未来迭代升级也困难重重,步步是坑。所以在技术选型阶段,就要对市面上主流的 Vue admin 做到全面了解,知道他们的优缺点,再根据自己项目的需求,有针对性的选择。我试用了市面上所有主流 Vue admin 都 npm 到本地测了一遍,筛掉长期不更新,bug 明显,社区活跃度低,功能单一的 admin 后台,把最好、最有特点的 7 款 Vue admin 挑出来,分享给大家。这些后台各有各的特点,有些功能多样,但整体很重;有些虽然稳定,但上线年头久远,含有大量陈旧功能;有些功能
15 0
Java 设计模式
Java 设计模式
9 0
给B类设计师:服务好合作伙伴,掌握新的营收密码
作者:达摩院设计-砥七刚开始做B类产品的设计师,可能会遇到这样的情况:基于前人的基础控件疯狂拼装B类产品功能,搭建出无数个功能,然后……设计师拼着拼着就累了。B类产品大多PaaS化(以服务器平台作为一种服务提供的商业模式)输出,提供开发接口给客户,然后……设计师对“开发接口”做不了事情。B类产品往往看营收,看商业模式,围绕B类产品的设计,好像和“营收”这件事很远,然后……设计师看营收就跟望天一样。
6 0
小程序的开发之使用SVG
昨天突然提出要在小程序中使用SVG,因为我们的小程序项目是有主题色的。不同的主题色时有些图片一直是固定的,显的有些格格不入,所以打算使用SVG来实现根据主题色的颜色进行变化。
17 0
工程设计论——如何写好工程代码
内容概述:从抽象的工程设计论角度阐述了如何写好一份代码。阐述了设计模式和设计原则的底层原理。解释了设计模式与设计原则适用的场景及局限性。工程设计论是在有限设计能力下对被设计对象进行的认知和进行逆运算的过程。在不符合这一条件的领域,不应当死扣设计模式与设计原则。在软件领域,一个显而易见的例子就是不要在极度追求性能的代码中死扣设计模式与设计原则。解释了设计原则中的单一职责原则为何难以掌握和运用。面向接
57 0
「开发者说」实验室上钉钉--南大研究生的数字化校园故事
钉钉应用开发不仅完成了实验室数字化运营的定制需求,这段落地的应用开发经验也丰富了我的实践经历,成为我的实习面试宝典。
28 0
API 接口的安全设计验证:ticket,签名,时间戳
概述 与前端对接的API接口,如果被第三方抓包并进行恶意篡改参数,可能会导致数据泄露,甚至会被篡改数据,我主要围绕时间戳,token,签名三个部分来保证API接口的安全性
15 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载