loading菊花 、table滚动条 、dynatree树形插件（包括搜索）、div布局

 

#InitVmVar

<style type="text/css">

.form-item-column-three .form-item {

width: 33.33333%;

}

 

.form-horizontal .form-item-colspan-two {

    width: 66.66666%;

}

 

.date-error-explain {

display: none;

color: #b94a48;

}

 

.code-generating {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

display: none;

}

 

.code-generating-mask {

background-color: #fff;

opacity: 0.7;

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

}

 

.code-generating-img {

width: 170px;

height: 64px;

position: absolute;

left: 50%;

top: 50%;

margin-top: -32px;

margin-left: -85px;

border: 1px solid #ccc;

border-radius: 3px;

text-align: center;

background:#fafafa url("$!assets/public/images/icons_32_32/icon-loading.gif") no-repeat center 5px;

}

 

.code-generating-text {

margin: 32px 0 0;

height: 32px;

line-height: 32px;

}

 

<!--

#scroll-table {

width:196px;

height:198px;

z-index:1;

overflow-x:hidden;

overflow-y:scroll

}

-->

</style>

#set($pageTitle="代码生成器")

<div>

    <div class='col-sm-7' style="width:65%">

        <form id="baseInfoForm" name="baseInfoForm" class="form-horizontal">

            <div class='box box-transparent' style="width:100%;">

                <div class='box-content'>

 

<form id="dbInfoForm" name="dbInfoForm">

                    <div class="form-item  form-item-row">

                        <label class="form-labeler control-label">DB Url</label>

                        <div class="form-content">

                            <input type="text" id="driverUrl" name="driverUrl" placeholder="jdbc:mysql://da.aqc.alipay.net:3306/aqc-defect?useUnicode=true&characterEncoding=UTF-8" style="width:650px;" minlength="2" maxlength="500" class="form-text required"/>

<label id="driverUrlError" for="driverUrl" class="date-error-explain">*必选</label>

</div>

                    </div>

 

                    <div class="clearfix"></div>

                    <hr class="hr-none"/>

 

<div class="form-item-column-three">

                        <div class="form-item" style="width:40%">

                            <label class="form-labeler control-label">用户名</label>

                            <div class="form-content">

                                <input type="text" id="userName" name="userName" value="aqc_admin" style="width:240px;" minlength="2" maxlength="200" class="form-text required"/>

<label id="userNameError" for="userName" class="date-error-explain">*必选</label>

</div>

                        </div>

                    

<div class="form-item" style="width:40%">

                            <label class="form-labeler control-label">密码</label>

                            <div class="form-content">

                                <input type="password" id="password" name="password" value="123456" style="width:240px;" minlength="2" maxlength="200" class="form-text required"/>

<label id="passwordError" for="password" class="date-error-explain">*必选</label>

</div>

                        </div>

 

                        <div class="form-item" style="width:20%">

                            <div class="form-content">

<input id="fetchTablesBtn" type="button" onclick="fetchTables();" class="btn btn-primary" value="获取"/>

                            </div>

                        </div>

                    </div>

</form>

 

<div class="clearfix"></div>

                    <hr class="hr-none"/>

 

<div class="form-item-column-three">

<div id="scroll-table" style="margin-left:40px;text-align:center;width:95%;height:410px;border:1px solid #EEEEEE">

#parse("/WEB-INF/views/code/_tables.vm")

</div>

                    </div>

 

<div class="clearfix"></div>

                    <hr class="hr-none"/>

 

<div class="form-item-column-three">

                        <div class="form-item"  style="width:40%">

                            <label class="form-labeler control-label">工程名</label>

                            <div class="form-content">

                                <input type="text" id="projectName" name="projectName" placeholder="aqc-myproject" style="width:240px;" minlength="2" maxlength="200" class="form-text required"/>

                            </div>

                        </div>

                    

<div class="form-item"  style="width:40%">

                            <label class="form-labeler control-label">应用名</label>

                            <div class="form-content">

                                <input type="text" id="appName" name="appName" placeholder="myapp" style="width:240px;" minlength="2" maxlength="200" class="form-text required"/>

                            </div>

                        </div>

 

                        <div class="form-item"  style="width:20%">

                            <div class="form-content">

<input id="baseInfoSubmit" type="button" class="btn btn-primary" value="提交" disabled/>

                            </div>

                        </div>

                    </div>

 

<div class="clearfix"></div>

                    <hr class="hr-none"/>

 

                </div>

            </div>

        </form>

    </div>

    <div class='col-sm-5' style="width:35%">

        <div style="padding-top:10px;margin-bottom:15px;">

<div class='title' style="padding-left:10px;">

                <i class="icon-download-alt"></i> 下载: &nbsp;&nbsp;<span id="auto_code_result"></span>

            </div>

            <img src="${assets}/public/images/ajax-loaders/2.gif" style="display:none;" class="loading"/>

        </div>

        <div class="form-group">

            <div class="col-sm-10">

                <div style="padding: 0 0 5px;">

                    <input id="J_treeSearchInput" class="form-control" type="text" placeholder="请输入类名进行查询..." value="" />

                </div>

                <div id="project-tree" style="height:450px;border: 1px solid #EEEEEE; margin-bottom: 20px;"></div>

            </div>

        </div>

    </div>

<div id="J_CodeGenerating" class="code-generating">

<div class="code-generating-mask"></div>

<div class="code-generating-img">

    <div class="code-generating-text">代码生成中，请稍候...</div>

</div>

</div>

<div id="J_TablesLoading" class="code-generating">

 <div class="code-generating-mask"></div>

 <div class="code-generating-img">

     <div class="code-generating-text">数据正在同步中，请稍候...</div>

 </div>

 </div>

</div>

<input id="filePath" name="filePath" type="hidden" value=""/>

<a id="sourceCodeTrigger" style="display:none" data-toggle="modal" data-target="#sourceCodeDetail" />

<script type="text/javascript">

    $("#baseInfoSubmit").on('click', function(){

    if($("#baseInfoForm").valid()){

    submitBaseInfo();

    }

    });

 

    var submitBaseInfo = function(){

$("#J_CodeGenerating").show();

    jQuery.ajax({

    url: "generateCode.htm",

    data: $("#baseInfoForm").serialize(),

    success: function(data){

    if(data.status == 'success'){

    var html = '<a href="$!appType/downloadCode.htm?fileName='+data.fileName+'&filePath=' + data.filePath + '" >' + data.fileName + '</a>';

    $("#auto_code_result").html(html);

$("#filePath").val(data.filePath);

initTree(data.projectTree.project);

$("#J_CodeGenerating").hide();

    }else{

    alertMsg("生成源码失败");

    }

    }

    });

    }

 

    var downloadCode = function(fileName, filePath){

    jQuery.ajax({

    url: "downloadCode.htm",

    data: "fileName="+fileName+"&filePath=" + filePath,

    success: function(data){

    }

    });

    }

 

var initTree = function(data){

$("#project-tree").dynatree({

    children:data,

    syncSearch:false,

onClick: function(node, event) {

var title = new String(node.data.title);

if(title.indexOf(".java") != -1 || title.indexOf(".xml") != -1){

viewSourceCode($("#filePath").val(), node.data.key);

}

      }

    });

}

 

var viewSourceCode = function(filePath, key){

var href = "sourceCode.htm?key=" + key + "&filePath=" + filePath;

$("#sourceCodeTrigger").attr("href", href);

$("#sourceCodeTrigger").trigger("click");

}

 

    var searchTree = function(keyword){

        $("#project-tree").dynatree("getRoot").search({value:jQuery.trim(keyword)});

    };

    $("#J_treeSearchInput").bind("keyup",function(){

        var that = this;

        if(that.cacheValue == jQuery.trim(that.value)){return;}

        that.cacheValue = jQuery.trim(that.value);

        clearTimeout(that.timer);

        that.timer = setTimeout(function(){

            searchTree(that.cacheValue);

        },400);

    });

</script>