zoukankan      html  css  js  c++  java
  • easy_UI

    引入js/css样式

    <link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="<%=path%>/easyUI/css/demo.css">
        <script src="<%=path%>/js/jquery-1.8.3.js"></script>
        <!--jquery.easyui.min.js包含了easyUI中的所有插件-->
        <script src="<%=path%>/js/jquery.easyui.min.js"></script>

    编写script

    <script>
            $(function(){
                $('#tree').tree({
                    url:'basic_tree_data.json',        //远程加载tree数据的url路径
                    animate:true,                 //是否开启动画效果
                    checkbox:true,                 //是否显示复选框
                    cascadeCheck:false,         //是否开启级联选中,checkbox属性为true时才生效
                    onlyLeafCheck:true,         //是否只在叶节点前显示复选框,checkbox属性为true时才生效
                    dnd:true,                     //是否启用拖拽功能
                    onDblClick:function(node){     //鼠标双击事件
                        $(this).tree("toggle",node.target); //改变当前节点状态
                    }
                });
            });
        </script>

    编写body

    <body>
        <h2>easy UI Tree</h2>
        <ul id="tree"></ul>
    </body>

    编写basic_tree_data.json

    [{
        "id":1,
        "text":"功能菜单",
        "children":[{
            "id":11,
            "text":"投票管理",
            "children":[{
                "id":111,
                "text":"所有投票",
                "attributes":{
                    "url":"findAll"
                },
                "iconCls":"icon-search"
            },{
                "id":112,
                "text":"发起投票",
                "iconCls":"icon-add"
            }]
        },
        {
            "id":12,
            "text":"用户管理",
            "state":"open",
            "children":[{
                "id":121,
                "text":"个人信息"
            },{
                "id":122,
                "text":"参与投票记录",
                "iconCls":"icon-search"
            },{
                "id":123,
                "text":"发起投票记录",
                "iconCls":"icon-search"
            }]
        },{
            "id":13,
            "text":"系统管理",
            "state":"open",
            "children":[{
                "id":131,
                "text":"系统日志"
            },{
                "id":132,
                "text":"数据字典"
            }]
        }]
    }]

    实现效果

  • 相关阅读:
    查看当前系统的shell
    xargs命令,作用雷同|
    shell 行末尾的&含义
    apt-get 安装及卸载,dpkg查询安装文件
    Linux: mv and cp 拷贝不包含目录
    windows下远程连接ubunut
    Linux 清空屏幕
    PageHelper的一些属性设置
    HttpServletRequest
    铁电RAM为何比串行SRAM更好
  • 原文地址:https://www.cnblogs.com/baixingqiang/p/5967135.html
Copyright © 2011-2022 走看看