如何给miniui的树形设置点击事件

瑞晟技术服务中心-耿瑞

已于 2023-06-21 18:42:33 修改

阅读量2.8k

点赞数 2

文章标签： javascript html 前端

于 2019-12-24 16:34:05 首次发布

本文链接：https://blog.csdn.net/weixin_45966674/article/details/103684904

版权

如何给miniui的树形设置点击事件

小伙伴们有没有被miniui耍的团团转呢？其实我觉得miniui本身是有一些不合理性的，导致他在项目中经常引发一下没必要的问题，但项目用什么框架也不是我们能决定的不是吗？
miniui的树形是通过div相互嵌套为结构的，外观还是挺精美的，就是问题有点多
在这里插入图片描述
可是树形主要是一种导航控件，但官方文档对选中节点的叙述相当模糊，如果用户选中节点而不能触发效果，这个树形写出来就没什么意义了。
其实也很简单:miniui树形结构如下

<ul id="carrier" class="mini-tree" expandOnLoad="true" imgPath="images/" ></ul>

不知道大家还记不记得js里有一个绑定元素的标签属性 : onnodeclick
用法 onnodeclick=“自定义名称”
我们只需要在树形的主体上加上onnodeclick属性再在js代码中写明方法就可以了
html代码如下:

<ul id="carrier" class="mini-tree" expandOnLoad="true" imgPath="images/" onnodeclick="gitName">
        </ul>

js代码如下:

function gitName(e){
       //要做的事
}

这样用户点击任何一个节点都会触发gitName方法，如果有判断具体点的是哪一个节点那括号里的参数(e)就好了
需要注意的是onnodeclick绑定的js方法如果写在$(function(){}里就会没有效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel = "stylesheet" href = "css/miniui.css">
        <script src = "js/jquery-1.8.3.js"></script>
        <script src = "js/miniui.js"></script>
        <script src = "js/lodash.min.js"></script>
        <style>
            input#condition
            {
                text-align:center;
            }
        </style>
        <script>
            $(function(){
                let rootNodes = [];
                mini.parse();
                var list = [
                    { guid: "2787947a-ee0e-e711-80e8-a55521da1859", text: "深圳市" ,parent:"#", img: 'Modular.png'},            
                    { guid: "4d21faf2-2ec5-e711-80ed-8d7103722f3e", text: "龙岗区", parent: "2787947a-ee0e-e711-80e8-a55521da1859" , img: 'nothing.png'}, 
                    { guid: "a066f158-f00e-e711-80e8-a55521da1859", text: "南山区", parent: "2787947a-ee0e-e711-80e8-a55521da1859" , img: 'nothing.png'},
                    { guid: "3fc82c32-f00e-e711-80e8-a55521da1859", text: "宝安区", parent: "2787947a-ee0e-e711-80e8-a55521da1859" ,img: 'nothing.png'},
                    { guid: "2b0a6bcc-c116-e711-80ea-c979862ae7cb", text: "北京市" ,parent:"#",img: 'Modular.png'},            
                    { guid: "f271a740-f00e-e711-80e8-a55521da1859", text: "朝阳区", parent: "2b0a6bcc-c116-e711-80ea-c979862ae7cb" , img: 'nothing.png'}, 
                    { guid: "1aeeef35-1466-e711-80ed-8d7103722f3e", text: "丰台区", parent: "2b0a6bcc-c116-e711-80ea-c979862ae7cb" , img: 'nothing.png'}
                ]
                list =_.filter(list,(v)=>{
                    v.id = v.guid;
                    v.pid = v.parent;
                    return v
                })
                var tree = mini.get("carrier");
                tree.loadList(list);
                tree.selectNode(list[0]);
                $("p").html(list[0].text)
                $("input").focus(function(){
                    $(this).attr("placeholder","");
                });
                $("input").blur(function(){
                    if(rootNodes.length == 0){
                        if($(this).val() != ""){
                            alert("没有匹配数据");
                            tree.loadList(list);
                            tree.selectNode(list[0]);
                            $("p").html(list[0].text)
                            $(this).val("");
                        }
                    }
                    $(this).attr("placeholder","请输入关键字");
                });
                $('input#condition').on("input propertychange", function (e) {
                    if($(this).val() != ""){
                        this.treeNodes = list;
                        rootNodes = _.filter(this.treeNodes, a => a.text.indexOf($(this).val())>-1);
                        if(rootNodes.length > 0){
                            tree.loadList(rootNodes);
                            tree.selectNode(rootNodes[0]);
                            $("p").html(rootNodes[0].text)
                        }
                    }else{
                        tree.loadList(list);
                        tree.selectNode(list[0]);
                        $("p").html(list[0].text)
                    }
                })
                $("button").on('click',function(e){
                    var list = mini.get("carrier");
                    var node = list.getSelectedNode();
                    $("p").html(node.text)
                })
            })
        </script>
    </head>
    <body>
        <input  id="condition" placeholder = "请输入关键字"/>
        <ul id="carrier" class="mini-tree" expandOnLoad="true" imgPath="images/" onnodeclick="gitName">
        </ul>
        <button type='button' >确认当前节点</button>
        <p></p>
        <script>
            function gitName(e){
                $("p").html(e.node.text)
            }
        </script>
    </body>
</html>