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

最新文章

热门文章