#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> 下载: <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>
相关推荐
**MagicDTree** 是一个基于 **JQuery** 的树形插件，它是对另一款知名的树形组件 **Dynatree** 进行了封装和优化，以提供更加简便且功能丰富的使用体验。这个插件的主要目标是降低开发者的使用门槛，使得在网页应用...
2. `demo/`：这个目录下存放了各种示例和Demo，展示了`dynatree`的各种用法，包括基本的树结构创建、数据加载、事件处理等。 3. `css/` 和 `img/`：分别存放样式表和图片资源，用于美化树形视图的外观。 在实现目录...
Dynatree是基于JQuery的优秀树形插件之一，版本1.2.0提供了丰富的功能和优化，使得开发者能够轻松创建交互式的树状视图。本文将详细解析Dynatree 1.2.0的核心特性和应用方法。 一、 Dynatree简介 Dynatree是JQuery...
Dynatree是一款功能强大的jQuery插件，它提供了丰富的树形控件功能，适用于网页中的数据组织和展示。在描述中提到的博文链接中，可能详细介绍了如何使用和配置这个插件。 Dynatree的基础应用主要包含以下几个方面...
**jQuery Dynatree 1.2.5：强大的JavaScript树形插件** jQuery Dynatree是一款功能丰富的JavaScript库，特别适用于构建交互式的树形结构。它在1.2.5版本中提供了诸多改进和优化，使得开发人员可以更加便捷地在网页...
它是一款基于JavaScript库jQuery的插件，能够兼容所有主流的浏览器，包括Chrome、Firefox、Safari、Opera以及Internet Explorer等，为开发者提供了稳定且兼容的树形组件解决方案。 该控件的主要特点和功能包括： 1...
"dynatree demo" 是一个基于Web的树形视图组件的示例，它主要用于展示层级数据，并且具有右键菜单功能，支持增加、删除和修改节点操作。这个项目可能是从网络上获取并用于教学或者实际开发中的参考。在了解这个示例...
jsTree是一款支持多浏览器的jQuery树形插件，提供丰富的功能，如JSON数据源支持、搜索、拖放、上下文菜单等。jsTree的可扩展性使得它能够满足各种复杂的需求。 3. **Fancytree - jQuery Tree View Plugin** ...
其中，`tw2.jqplugins.dynatree-2.0a0`是一个专门用于构建动态树形结构的库，它结合了Python的灵活性与jQuery的高效性，是前端展示层次结构数据的理想选择。本文将详细介绍这个库的核心功能、使用方法以及实际应用。...
Dynatree 是一个强大的JavaScript库，用于创建可交互的树形视图，适用于网页应用中展示层次结构数据。它基于流行的jQuery框架，提供丰富的功能和高度自定义的选项。 在jQuery插件注册表的时代，Dynatree-stub起到了...
Dynatree是一款高度可定制和易用的jQuery插件，提供了丰富的树形视图功能。它支持拖放操作、节点展开/折叠、搜索、键盘导航以及自定义图标等特性。这个插件能够帮助开发者快速构建动态的、响应式的树形界面，同时...
JQuery树形插件Dynatree的包装对象... So this plugin will not be updated in feature. 新版的 Dynatree 已支持 MagicDTree 所提供的所有功能,因为MagicDTree将停止更...
zTree是一款广泛应用于Web开发中的强大且易用的树形控件，它的全称为"Z dynaTree"，中文通常称为“动态树”。这个控件以其丰富的功能、灵活的配置和良好的性能，深受开发者喜爱。在本文中，我们将深入探讨zTree的...
DefinitelyTyped 包含大量的高质量的 TypeScript 类型定义。 包括： Ace Cloud9 Editor (by Diullei Gomes) AmCharts (by Covobonomo) AngularJS (by Diego Vilar) (wiki) Arbiter (by Arash Shakery) ...