`
xinklabi
  • 浏览: 1586641 次
  • 性别: Icon_minigender_1
  • 来自: 吉林
文章分类
社区版块
存档分类
最新评论

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>

  • 大小: 3.2 KB
  • 大小: 102.9 KB
分享到:
评论

相关推荐

    dynatree代码Demo源码

    2. `demo/`:这个目录下存放了各种示例和Demo,展示了`dynatree`的各种用法,包括基本的树结构创建、数据加载、事件处理等。 3. `css/` 和 `img/`:分别存放样式表和图片资源,用于美化树形视图的外观。 在实现目录...

    MagicDTree: JQuery树形插件

    **MagicDTree** 是一个基于 **JQuery** 的树形插件,它是对另一款知名的树形组件 **Dynatree** 进行了封装和优化,以提供更加简便且功能丰富的使用体验。这个插件的主要目标是降低开发者的使用门槛,使得在网页应用...

    dynatree-1.2.0

    Dynatree是基于JQuery的优秀树形插件之一,版本1.2.0提供了丰富的功能和优化,使得开发者能够轻松创建交互式的树状视图。本文将详细解析Dynatree 1.2.0的核心特性和应用方法。 一、 Dynatree简介 Dynatree是JQuery...

    jquery 树形结构

    Dynatree是一款功能强大的jQuery插件,它提供了丰富的树形控件功能,适用于网页中的数据组织和展示。在描述中提到的博文链接中,可能详细介绍了如何使用和配置这个插件。 Dynatree的基础应用主要包含以下几个方面...

    Jquery dynatree最新版本(1.2.5)

    **jQuery Dynatree 1.2.5:强大的JavaScript树形插件** jQuery Dynatree是一款功能丰富的JavaScript库,特别适用于构建交互式的树形结构。它在1.2.5版本中提供了诸多改进和优化,使得开发人员可以更加便捷地在网页...

    Jquery dynatree Web网页树型控件

    它是一款基于JavaScript库jQuery的插件,能够兼容所有主流的浏览器,包括Chrome、Firefox、Safari、Opera以及Internet Explorer等,为开发者提供了稳定且兼容的树形组件解决方案。 该控件的主要特点和功能包括: 1...

    dynatree demo

    "dynatree demo" 是一个基于Web的树形视图组件的示例,它主要用于展示层级数据,并且具有右键菜单功能,支持增加、删除和修改节点操作。这个项目可能是从网络上获取并用于教学或者实际开发中的参考。在了解这个示例...

    推荐8款jQuery轻量级树形Tree插件

    jsTree是一款支持多浏览器的jQuery树形插件,提供丰富的功能,如JSON数据源支持、搜索、拖放、上下文菜单等。jsTree的可扩展性使得它能够满足各种复杂的需求。 3. **Fancytree - jQuery Tree View Plugin** ...

    Python库 | tw2.jqplugins.dynatree-2.0a0.tar.gz

    其中,`tw2.jqplugins.dynatree-2.0a0`是一个专门用于构建动态树形结构的库,它结合了Python的灵活性与jQuery的高效性,是前端展示层次结构数据的理想选择。本文将详细介绍这个库的核心功能、使用方法以及实际应用。...

    dynatree-stub:jQuery插件注册表上的Dynatree 2.0 .. 2.3的过时存根

    Dynatree 是一个强大的JavaScript库,用于创建可交互的树形视图,适用于网页应用中展示层次结构数据。它基于流行的jQuery框架,提供丰富的功能和高度自定义的选项。 在jQuery插件注册表的时代,Dynatree-stub起到了...

    jquery Tree示例

    Dynatree是一款高度可定制和易用的jQuery插件,提供了丰富的树形视图功能。它支持拖放操作、节点展开/折叠、搜索、键盘导航以及自定义图标等特性。这个插件能够帮助开发者快速构建动态的、响应式的树形界面,同时...

    magicDtree

    JQuery树形插件Dynatree的包装对象... So this plugin will not be updated in feature. 新版的 Dynatree 已支持 MagicDTree 所提供的所有功能,因为MagicDTree将停止更...

    zTree好用的树控件

    zTree是一款广泛应用于Web开发中的强大且易用的树形控件,它的全称为"Z dynaTree",中文通常称为“动态树”。这个控件以其丰富的功能、灵活的配置和良好的性能,深受开发者喜爱。在本文中,我们将深入探讨zTree的...

    TypeScript类型定义DefinitelyTyped.zip

    DefinitelyTyped 包含大量的高质量的 TypeScript 类型定义。 包括: Ace Cloud9 Editor (by Diullei Gomes) AmCharts (by Covobonomo) AngularJS (by Diego Vilar) (wiki) Arbiter (by Arash Shakery) ...

Global site tag (gtag.js) - Google Analytics