easyui（Tree前端工作）

最新推荐文章于 2024-02-26 17:28:00 发布

飓风.

最新推荐文章于 2024-02-26 17:28:00 发布

阅读量94

点赞数

文章标签：前端 easyui javascript

本文链接：https://blog.csdn.net/qq_62981121/article/details/124772063

版权

这篇博客介绍了EasyUI的使用，特别是关于Tree组件的实现。内容包括全局path定义，利用base标签设置路径；页面缓存配置以避免缓存问题；使用Postman进行接口测试；通过JSON数据绑定实现Tree组件；以及动态添加选项卡的方法，详细讲解了树形菜单在前端工作中的应用。

摘要由CSDN通过智能技术生成

1.全局path定义

base标签:base的标签的href属性里面的内容会自动添加到在hread标签里面的引入的路径前面
<base href = "${pageContext.request.servletContext.contextPath}/static/">

var globalPath = "${pageContext.request.servletContext.contextPath}";

2.页面缓存

   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">

3.postman使用

接口测试工具；postman发送请求给服务器，然后从服务器接受响应，最后在postman中展示出来。

4.tree组件实现JSON数据绑定

标签实现——不推荐
JSON实现
   $('#tt').tree({
       url:'tree_data.json'
   });

5.动态添加选项卡

   $(function(){
            //绑定属性菜单绑定数据
            $("#menuTree").tree({    
                //实际开发中这里应该获取的是后台的数据（从servlet中获取）
                url:'tree_data.json',
                //在用户点击一个节点的时候触发。
                onClick: function(node){
                    //alert(node.text);  // 在用户点击的时候提示
                    console.log(node.id,node.text,node.children);
                    if(node.id === "-1"){
                        return;
                    }
                    //判断选项卡是否存在选中
                    var flag = $("#tabs_index").tabs('exists',node.text);
                    //alert(flag);
                    if(flag){
                        $("#tabs_index").tabs('select',node.text);
                        return;
                    }
                    
                    // 添加一个未选中状态的选项卡面板
                    $('#tabs_index').tabs('add',{
                        title: node.text,
                        content:node.text,
                        closable:true,  
                    });
                }
            });  
        });

树形菜单tree的使用

树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。以下显示的元素将被用作树节点嵌套在<ul>元素中。

<ul id="tt" class="easyui-tree">   
    <li>   
        <span>Folder</span>   
        <ul>   
            <li>   
                <span>Sub Folder 1</span>   
                <ul>   
                    <li>   
                        <span><a href="#">File 11</a></span>   
                    </li>   
                    <li>   
                        <span>File 12</span>   
                    </li>   
                    <li>   
                        <span>File 13</span>   
                    </li>   
                </ul>   
            </li>   
            <li>   
                <span>File 2</span>   
            </li>   
            <li>   
                <span>File 3</span>   
            </li>   
        </ul>   
    </li>   
    <li>   
        <span>File21</span>   
    </li>   
</ul>