<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<div id="breadcrumb">
    <a href="#" title="Go to Home" class="tip-bottom"><i
            class="icon-home"></i> Home</a> <a href="#" class="current">Tables</a>
</div>

<div class="container-fluid">
    <div class="widget-box">
        <div class="widget-title">

            <h5>Dynamic table</h5>
        </div>
        <!-- 树 -->
        <div style="margin-top: 45px; float: left;margin-top: 54px;border: dashed;width: 300px;color: #D3D3D3;height: 580px;">
        <div class="widget-title">

            <h5>Tree Title</h5>
        </div>
	        	<ul class="ui-widget ui-helper-clearfix" id="icons" style="float: left;margin-left: 165px;">
	            	<li title=".ui-icon-plusthick" class="ui-state-default ui-corner-all" onclick="deletebtn()"><span class="ui-icon ui-icon-plusthick"></span></li>
	            </ul>
	            <ul class="ui-widget ui-helper-clearfix" id="icons" style="margin-right: 12px;">
	            	<li title=".ui-icon-minusthick" class="ui-state-default ui-corner-all" onclick="editbtn()"><span class="ui-icon ui-icon-minusthick"></span></li>
	            </ul>
        	<div id="continer" ></div>
        </div>
		<!-- 列表 -->
        <div class="widget-content nopadding" style="margin-left: 300px;">
            <div class="widget-title" style="height: 53px;">
                <div>
                    <div class="form-inline" role="form" id="inBoxQueryDiv" style=" margin-top: 12px;margin-left: 25px;float: left;">
                        <div class="input-group" style="float: left;">
                            <span class="input-group-addon">IP：</span>
                            <input type="text" id="" class="form-control" placeholder=""/>
                        </div>
                        <div class="input-group" style="float: left;">
                            <span class="input-group-addon">IP：</span>
                            <input type="text" id="" class="form-control" placeholder=""/>
                        </div>
                        <button id="submit" class="btn btn-default">搜索</button>
                    </div>
                    <button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 500px;">新增</button>
                </div>
                <div class="widget-box">
								<div class="widget-title">
									<h5>Modal dialogs</h5>
								</div>
								<div class="widget-content">
									<a href="#myModal" data-toggle="modal" class="btn btn-primary">Modal dialog</a>
									<a href="#myAlert" data-toggle="modal" class="btn btn-danger">Alert</a>
									
									<div id="myModal" class="modal hide">
										<div class="modal-header">
											<button data-dismiss="modal" class="close" type="button">×</button>
											<h3>Modal header</h3>
										</div>
										<div class="modal-body">
											<p>One fine body…</p>
										</div>
									</div>
									<div id="myAlert" class="modal hide">
										<div class="modal-header">
											<button data-dismiss="modal" class="close" type="button">×</button>
											<h3>Alert modal</h3>
										</div>
										<div class="modal-body">
											<p>Lorem ipsum dolor sit amet...</p>
										</div>
										<div class="modal-footer">
											<a data-dismiss="modal" class="btn btn-primary" href="#">Confirm</a>
											<a data-dismiss="modal" class="btn" href="#">Cancel</a>
										</div>
									</div>
								</div>
							</div>
            </div>
            <div id="table"></div>
        </div>
    </div>
</div>
<script>
    $(function () {
        var data = [];
        for (var i = 0; i < 20; i++) {
            data.push({
                moName: i,
                moHostIp: "用户" + i,
                moType: i % 3 == 0 ? 0 : 1,
                moStatus: "normal"
            });
        }
        $("#table").table({
            striped: true,
            panelClass: "panel-success",
            pagination: true,
            columns: [{
                title: "监控网元",
                field: "moName"
            }, {
                title: "主机地址",
                field: "moHostIp"
            }, {
                title: "网元类型",
                field: "moType"
            },{
                title: "网元状态",
                field: "moStatus"
            }, {
                title: "操作",
                formatter : function(value, rowData, rowIndex) {
					var div = $("<div>");
					var editBtn = $("<button>").addClass("btn btn-inverse btn-mini").html("修改").appendTo(div);
					//修改
					editBtn.click(function() {
						editTemplate(rowData.inboxTemplateId);
					});
					div.append("&nbsp;");
					var delBtn = $("<button>").addClass("btn btn-danger btn-mini").html("删除").appendTo(div);
					delBtn.click(function() {
						
					});
					return div;
				}
            }],
            data: data
        });
        
    });
    
  //模拟数据
    var jsonData = [
        {"id":"1","name":"父节点1","url":"www.baidu.com","pid":"0"},
            {"id":"4","name":"父节点11","url":"","pid":"1"},
              
                {"id":"14","name":"父节点112","url":"","pid":"4"},
            {"id":"5","name":"父节点12","url":"","pid":"1"},
            {"id":"6","name":"父节点13","url":"","pid":"1"},
        {"id":"2","name":"父节点4","url":"","pid":"0"},
            {"id":"7","name":"父节点41","url":"","pid":"2"},
            {"id":"8","name":"父节点42","url":"","pid":"2"},
            {"id":"9","name":"父节点43","url":"","pid":"2"},
        {"id":"3","name":"父节点5","url":"","pid":"0"},
            {"id":"10","name":"父节点51","url":"","pid":"3"},
            {"id":"13","name":"父节点111","url":"","pid":"4"},
            {"id":"11","name":"父节点52","url":"","pid":"3"},
            {"id":"12","name":"父节点53","url":"","pid":"3"}
    ] ;
    
    
    //主方法，运用递归实现
    function createTree(jsons,pid){
        if(jsons != null){
            var ul = '<ul class="" style="width: 120px;" >' ;
            for(var i=0;i<jsons.length;i++){
                if(jsons[i].pid == pid){
                    ul += '<input type="checkbox" name="checkBox" value='+jsons[i].id+' style="float: left;margin-top: 6px;width:10px;height:10px;"><li class="tree" value='+jsons[i].id+'><a href="#">' + jsons[i].name + "</a></li>" ;
                    ul += createTree(jsons,jsons[i].id);
                }
            }
            ul += "</ul>" ;
       }
        return ul ;
    }
    
    $(function(){
        var ul = createTree(jsonData,0) ;
        $("#continer").append(ul) ;
        //控制菜单的隐藏显示
        $("ul[class] li").each(function(){
            $(this).click(function(){
                $(this).next().toggle();
            }) ;
        }) ;

    }) ;
    
    var dom = document.getElementById("icons");
    var str = dom.getAttribute("style");
    str = str.replace(/height\b\s*\:\s*\d+\px;?/ig, "");
    dom.setAttribute("style",str);
    function deletebtn(){
    	alert(1);
    }
    
    function editbtn(){
    	alert(2);
    }
</script>