video.html 2.08 KB
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

<script>

    $(document).ready(function (){
        $.get("/video/tree1",function (data){
            $('#video_tree').jstree({ 'core' : {
                    'data' :$.parseJSON(data)
                } });
        });
    });

    function  combinationNodes(nodes){
        var html="";
        if(nodes){
            html = html+"<ul>";
            $.each(nodes,function (index,node){
                html = html+combinationNode(node);
                if(node.children){
                    html=html+combinationNodes(node.children)
                }
            });
            html = html+"</ul>";
        }
        return html;
    }
    function  combinationNode(node){
        return "<li nodeId='"+node.id+"' nodeType='"+node.type+"' nodeSourceId='"+node.sourceId+"'>"+node.text+"</li>";
    }

</script>

<div class="page-head">
    <div class="page-title">
        <h1>视频管理</h1>
    </div>
</div>

<ul class="page-breadcrumb breadcrumb">
    <li><a href="/pages/home.html" data-pjax>首页</a> <i class="fa fa-circle"></i></li>
    <li><span class="active">视频管理</span> <i class="fa fa-circle"></i></li>
</ul>


<div class="row">
    <div class="col-md-4" style="padding-right: 0px;">
        <div class="portlet light bordered" style="min-height: 520px;">
            <div class="portlet-body">
                <div id="video_tree" ></div>
            </div>
        </div>
    </div>

    <div class="col-md-6" style="padding-left: 0px;">
        <div class="portlet light bordered" style="height: 520px;">
            <div class="portlet-body" style="min-height: 200px;">
                <div class="text-info" style="text-align: center;line-height: 200px;">
                    <i class="fa fa-info"></i> 单击节点查看详细
                </div>
            </div>
        </div>
    </div>
</div>