↑
↓

ligerTree简单例子

效果图，如上

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/ligerUi/ligerui.min.js"></script>
<link rel="stylesheet" href="../css/skins/Aqua/css/ligerui-all.css" />
<script>
var treeData = [{
    'name': '节点1',
    'no': 0,
    'text': '哈哈',
    'children': [{
        'name': '节点1.1',
        'no': 1
    },
    {
        'name': '节点1.2',
        'no': 2
    },
    {
        'name': '节点1.3',
        'children': [{
            'name': '节点1.3.1'
        },
        {
            'name': '节点1.3.2'
        }]
    },
    {
        'name': '节点1.4'
    }]
},
{
    'name': '节点2',
    'no': 'yes'
}];
$(function() {
    $("#tree").ligerTree({
        checkbox: false,
        parentIcon: null,
        childIcon: null,
        slide: false,
        //是否显示动画 
        nodeWidth: 100,
        idFieldName: 'id',
        textFieldName: 'name',
        //指定数据中要显示的属性名，默认为"text"
        data: treeData,
        onSelect: function(node) {
            if (!node.data.name) {
                return
            };
            //处理导航树的点击事件TODO
            alert(node.data.no);
        }
    });
    //var tree = $("#tree").ligerGetTreeManager();
    //tree.setData(treeData) ; //或者这样设值
});
</script>
</head>

<body>
<ul id="tree"></ul>
</body>

</html>

 

posted @ 2019-06-18 17:27  爱跳舞的程序员  阅读(380)  评论(0)  编辑  收藏  举报