easy_UI

Posted 晨曦-荒微凉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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":"数据字典"
        }]
    }]
}]

实现效果

 

以上是关于easy_UI的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序代码片段

VSCode自定义代码片段——CSS选择器

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

片段和活动之间的核心区别是啥?哪些代码可以写成片段?

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段6——CSS选择器