Jquery LigerUI框架学习（一）Tree数据整理

浏览数：88 / 时间：2015年06月09日

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
    <style type="text/css">
        .box
        {
            float: left;
        }
        .tree
        {
            width: 230px;
            height: 200px;
            margin: 10px;
            border: 1px solid #ccc;
            overflow: auto;
        }
        h4
        {
            margin: 10px;
        }
    </style>
    <script type="text/javascript">

        var manager=null;
        $(function () {

            $("#tree1").ligerTree({
                nodeWidth: 200, //Tree控件宽度
                data: createData(), //Tree数据源
                checkbox: true, //是否使用Checkbox
                idFieldName: ‘id‘, //绑定id
                isExpand: 2, //是否展开节点 FALSE为不展开 TRUE展示所有节点 指定数字为展开指定节点
                slide: false, //节点展开效果False无效果 TRUE缓慢展开效果
                parentIDFieldName: ‘pid‘//绑定夫ID
            });
            manager = $("#tree1").ligerGetTreeManager();

        });

        //数据输出
        function createData() {
            var data = [];

            data.push({ id: 1, pid: 0, text: ‘1‘, url: "www.baidu.com",ischecked: true});//设置节点ID 夫ID 节点内容 节点链接 选中状态
            data.push({ id: 2, pid: 1, text: ‘1.1‘ });
            data.push({ id: 4, pid: 2, text: ‘1.1.2‘ });
            data.push({ id: 5, pid: 2, text: ‘1.1.2‘ });

            data.push({ id: 10, pid: 8, text: ‘wefwfwfe‘ });
            data.push({ id: 11, pid: 8, text: ‘wgegwgwg‘ });
            data.push({ id: 12, pid: 8, text: ‘gwegwg‘ });

            data.push({ id: 6, pid: 2, text: ‘1.1.3‘, ischecked: true });
            data.push({ id: 7, pid: 2, text: ‘1.1.4‘ });
            data.push({ id: 8, pid: 7, text: ‘1.1.5‘ });
            data.push({ id: 9, pid: 7, text: ‘1.1.6‘ });

            data.push({ id: 20, pid: 0, text: ‘1‘, url: "www.baidu.com" });
            data.push({ id: 21, pid: 20, text: ‘12‘, url: "www.baidu.com" });
            return data;
        }
        function getSelected() {
            var note = manager.getSelected(); //获取选中节点的内容 非选中chechbox
            alert(‘选择的是:‘ + note.data.url);
        }
       
        function getChecked() {
            var notes = manager.getChecked(); //获取选中Chechebox内容
            var text = "";
            for (var i = 0; i < notes.length; i++) {

                text += notes[i].data.text + ",";
            }
            alert(‘选择的节点数：‘ + text);
        }
        function collapseAll() {
            manager.collapseAll();//全选
        }
        function expandAll() {
            manager.expandAll();//取消全选
        }
    </script>
</head>
<body style="padding: 10px">
<input value="全选" onclick="collapseAll()" type="button" />
<input value="取消全选" onclick="collapseAll()" type="button" />
<input value="获取选中内容" onclick="getSelected()" type="button" />
<input value="获取选中Chechebox内容" onclick="getChecked()" type="button" />

    <div class="box">
        <h4>
            不展开节点</h4>
        <div class="tree">
            <ul id="tree1">
            </ul>
        </div>
    </div>
    <div class="l-clear">
    </div>
</body>
</html>