分析在线表单的生成页面和方法

首先：headId 是可以不需要变动的；

其次，对应的表也不需要再增加，只是每个页面展示时获取到的headId传递到页面上就可以；

所以：不需要重新写后台，不需要关心是一对一还是一对多，还是只需要一个表就可以，

只要前台可以获取到数据，后台会自动根据headId查询返回list，在页面拼接展示出来。

页面也可以直接沿用listPage的模板页面。然后手动调节组件需要展示的信息和表头上方菜单展示的信息；

1.在线表单的页面是怎么展示出来的？左边菜单会有headId传入，来跳转到相应的tspace/list界面加载相应的js;

本身报错：

http://localhost:8088/common/getDictData?queryParams[dict_type]=db_source

相关方法和页面：

扫描二维码关注公众号，回复： 1109372 查看本文章

/common/head.html 几乎每个页面都会有这部分的代码引入。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tspace</title>
<link rel="icon" type="image/x-icon" href="${basePath}/res/images/tspace/favicon.ico">
<link rel="stylesheet" type="text/css" href="${basePath}/res/js/jquery-easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="${basePath}/res/js/jquery-easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${basePath}/res/js/jquery-easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="${basePath}/res/css/common.css">
<link rel="stylesheet" type="text/css" href="${basePath}/res/css/icon.css">

//一些路径的获取；方便调用方法和引入包文件等。
<script type="text/javascript">
   var basePath = '${basePath}';
   var noAuthBtn = '${noAuthBtn!}';
   var authField = '${authField!}';
</script>
<script type="text/javascript" src="${basePath}/res/js/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${basePath}/res/js/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${basePath}/res/js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${basePath}/res/js/common.js"></script>
</head>
<body style="visibility: hidden;">

重要：/tspaceHead/list 最上面菜单展示部分：

表单名称一列是静态的展示，下面按钮也是静态，但是每个都有关联的事件。

<#include "/common/head.html"/>
<script type="text/javascript" src="${basePath}/res/js/ZeroClipboard/ZeroClipboard.min.js"></script>

    <table id="dg"></table>
    <div id="tb" style="padding:2px 5px;">
        <div class="wrap_search">
            <span class="search_item">
                <span class="item_text">表单名称: </span>
                <span class="item_obj">
                    <input class="easyui-textbox" type="text" name="form_name" />
                </span>    
            </span>
            <span class="search_item">
                <span class="item_text">数据库表名: </span>
                <span class="item_obj">
                    <input class="easyui-textbox" type="text" name="table_name" />
                </span>    
            </span>
            <span class="search_item">
                <span class="item_text">数据源:</span>
                <span class="item_obj">
                    <select class="easyui-combobox" name="db_source" panelHeight="auto" style="width:100px" data-options="
                       url: '${basePath}/common/getDictData?queryParams[dict_type]=db_source',
                       valueField:'dict_key',
                      textField:'dict_value'
                       "></select>
                </span>
            </span>
            <span class="search_item search_between">
                <span class="item_text">创建日期: </span>
                <span class="item_obj">
                    <input class="easyui-datebox" name="_start_create_time"/> ～ <input class="easyui-datebox" name="_end_create_time"/>
                </span>
            </span>
        </div>
        <div style="text-align: left; margin:6px;">
            <a href="#" class="easyui-linkbutton genFormBtn" iconCls="glyphicon-flash" plain="true" onclick="genForm()">生成表单</a>
            <a href="#" class="easyui-linkbutton updateBtn" iconCls="glyphicon-pencil" plain="true" onclick="update()">编辑</a>
            <a href="#" class="easyui-linkbutton delBtn" iconCls="glyphicon-remove" plain="true" onclick="del()">删除</a>
            <a href="#" class="easyui-linkbutton extendBtnBtn" iconCls="glyphicon-pushpin" plain="true" onclick="extendBtn()">扩展按钮</a>
            <a href="#" class="easyui-linkbutton extendJsBtn" iconCls="glyphicon-paperclip" plain="true" onclick="extendJs()">扩展JS</a>
            <a href="#" class="easyui-linkbutton genCodeBtn" iconCls="glyphicon-log-out" plain="true" onclick="genCode()">生成代码</a>
            <div style="float:right; padding-right:40px;">
                <a href="javascript:void(0)" class="easyui-linkbutton color1" iconCls="glyphicon-search" onclick="tspaceSearch(this)">搜索</a>
                <a href="javascript:void(0)" class="easyui-linkbutton color2" iconCls="glyphicon-repeat" onclick="flushPage()">重置</a>
            </div>
        </div>
    </div>

<script type="text/javascript">
var datagrid = $("#dg");
$(function() {
   datagrid.datagrid({
      rownumbers:true,
       fit:true,
       border:false,
       rownumbers:true,
    url:'listData',//用到的方法调用后台获取数据；
       method:'post',  //请求方式
       toolbar:'#tb',
       pagination:true,
       multiSort:true,
       pageSize: 20,   //分页
       columns:[[ //页面表单展示出的数据和字段，id的名称和title，展示的数据；
          {field:'id', checkbox:true},
          {field:'form_name', title: '表单名称', width:120, sortable: true},
          {field:'table_name', title: '数据库表名', width:120, sortable: true},
           {field:'id_field', title: '主键字段', width:120, sortable: true},
           {field:'db_source', title: '数据源', width:120, sortable: true},
           {field:'create_time', title: '创建时间', width:130, sortable: true},
           {field:'operate', title: '操作', width:120, 
              formatter: function(value, row, index){
               return '<a class="operate" href="###" onclick="preview(' + index + ')">预览</a>' + 
                     '<a class="operate" id="copyBtn' + index + '" data-clipboard-target="fe_text' + index + '" href="###">复制地址</a>'; 
            } 
           }
       ]],
       onLoadSuccess: function(data) {
          //处理复制
          $.each(datagrid.datagrid("getRows"), function(i) {
             copyUrl($("#copyBtn" + i).get(0), i);
          });
       }
   });
});

//预览
function preview(index) {
   var row = datagrid.datagrid("getRows")[index];
   top.window.addMainTab("[预览]" + row.form_name, "${basePath}/tspace/" + row.id + "/listPage");
}

//复制地址
function copyUrl(obj, index) {
   var row = datagrid.datagrid("getRows")[index];
   $('#fe_text' + index).remove();
   $('<textarea id="fe_text' + index + '"></textarea>').text("/tspace/" + row.id + "/listPage").hide().appendTo("body");
   var clip = new ZeroClipboard(obj, {
      moviePath: "${basePath}/res/js/ZeroClipboard/ZeroClipboard.swf"
   });
   clip.on('complete', function(client, args) {
      showMsg("复制成功, 内容为：" + args.text)
   });
}

//删除
function del() {
   var ids = [];
   $.each(datagrid.datagrid("getSelections"), function(i, item) {
      ids.push(item.id);
   });
   if(ids.length < 1) {
      showWarnMsg("请选择需要删除的数据！");
      return;
   }
   confirmMsg("确认删除？", function() {
      $.post("delete", {id: ids}, function(data) {
         showMsg("删除成功！");
         datagrid.datagrid("reload");
      });
   });
}

/**
 * 扩展按钮
 */
function extendBtn() {
   var ids = [];
   $.each(datagrid.datagrid("getSelections"), function(i, item) {
      ids.push(item.id);
   });
   if(ids.length != 1) {
      showWarnMsg("请选择一条数据！");
      return;
   }
   top.addMainTab("扩展按钮", "${basePath}/tspace/1/listPage?head_id=" + ids[0]);
}

/**
 * 扩展JS
 */
function extendJs() {
   var ids = [];
   $.each(datagrid.datagrid("getSelections"), function(i, item) {
      ids.push(item.id);
   });
   if(ids.length != 1) {
      showWarnMsg("请选择一条数据！");
      return;
   }
   top.addMainTab("扩展JS", "${basePath}/tspace/2/listPage?head_id=" + ids[0]);
}

//搜索
function tspaceSearch() {
   var param = tspaceGetParam();
   datagrid.datagrid("load", {
      queryParams: param
   })
}

function tspaceGetParam() {
   var param = {};
   $("#tb :input[name]").each(function(i, item) {
      if($(item).val()) {
         param[$(item).attr("name")] = $(item).val();   
      }
   });
   return param;
}

function update() {
   var rowsSel = datagrid.datagrid("getSelections");
   if(rowsSel.length != 1) {
      showWarnMsg("请选择需要编辑的一条数据！");
      return;
   }
   top.window.subPage.loadCurrDatagrid = function() {
      showMsg("更新成功！");
      datagrid.datagrid("reload");
   }
   var id = rowsSel[0].id;
   top.openWindow("编辑", "${basePath}/tspaceHead/updatePage?id=" + id, {width: 750, height: 500});
}

//增加时生成表单的方法前台代码：
function genForm() {
   top.window.subPage.loadCurrDatagrid = function() {
      datagrid.datagrid("load");
   }
   top.openWindow("生成表单", "${basePath}/tspaceHead/genFormPage");
}

先看增加的方法：生成表单的方法 genForm()会调用后台的方法

 "${basePath}/tspaceHead/genFormPage"

震惊了，就一条代码的后台方法：

//生成表单页面
public void genFormPage() {
   render("head/genForm.html");
}

继续分析跳转到的head/genForm.html页面（文字部分都是静态的）

<#include "/common/head.html"/>//引入一个基本路径的界面方便调用方法和引入其他文件

   url: '${basePath}/common/getDictData?queryParams[dict_type]=db_source',//方法调用获取数据库名称

Debug发现了数据源的错误，先在本地重新建数据库，保证数据读取的正确性；

看完2个SQL的文件感觉好像明白了什么，其实主要是数据库和后台的数据交互的操作。

< table id= "dg" class= "easyui-datagrid" data-options= " rownumbers:true, fit:true, border:false, rownumbers:true, singleSelect:true, toolbar:'#tb', remoteSort:false, multiSort:true, collapsible:true, pagination:false" > < thead > < tr > < th data-options= "field:'TABLE_SCHEMA',width:100" > 数据库 </ th > < th data-options= "field:'TABLE_NAME',width:150" > 表名 </ th > < th data-options= "field:'TABLE_COMMENT',width:150" > 表说明 </ th > < th data-options= "field:'TABLE_TYPE',width:100" > 表类型 </ th > </ tr > </ thead > </ table >


<div id="tb" style="padding:2px 5px;">
    <div class="wrap_search">
       <span class="search_item" style="padding: 4px;">
            <span class="item_text">数据源: </span>
            <span class="item_obj">
                <input class="easyui-combobox" type="text" id=db_source name="db_source" value="tspace_busi" data-options="
              url: '${basePath}/common/getDictData?queryParams[dict_type]=db_source',//方法调用获取数据库名称
                       valueField:'dict_key',
                      textField:'dict_value'
                "/>
            </span>    
        </span>
        <span class="search_item" style="padding: 4px;">
            <span class="item_text">表名: </span>
            <span class="item_obj">
                <input class="easyui-textbox" type="text" id="TABLE_NAME" name="TABLE_NAME"/>
            </span>    
        </span>
        <span class="search_item" style="padding: 4px; padding-left: 40px;">
            <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="go()">搜索</a>　　　　　　
        </span>
    </div>
</div>

<script type="text/javascript">
top.window.subPage.save = function() {
   var rowsSel = datagrid.datagrid("getSelections");
   if(rowsSel.length != 1) {
      showWarnMsg("请选择一条数据！");
      return;
   }
   $.post("genForm", {tableName: rowsSel[0].TABLE_NAME, db_source: $(":input[name='db_source']").val()}, function(data) {
      if(data.result == "success") {
         showMsg("表单生成成功！");
         top.window.closeWindow();
         top.window.subPage.loadCurrDatagrid();
      }
   });    
}


var datagrid = $("#dg");
var dbSource = "";
var rows = [];
$(function() {
   showData();
});

function showData() {
   $.post("genFormData",{db_source: $(":input[name='db_source']").val()}, function(data) {
      rows = data.rows;
      datagrid.datagrid("loadData", searchData());
   });
}

function searchData() {
   var tableName = $("#TABLE_NAME").val();
   if(!tableName) {
      return rows;
   }
   var filterRows = [];
   $.each(rows, function(i, item) {
      if(item.TABLE_NAME.indexOf(tableName) >= 0) {
         filterRows.push(item);
      }
   });
   return filterRows;
}

function go() {
   var newDbSource = $(":input[name='db_source']").val();
   if(dbSource != newDbSource) {
      dbSource = newDbSource;
      showData();
   }
   datagrid.datagrid("loadData", searchData());
}

function filterData(rows) {
   log(rows);
}
</script>

<#include "/common/foot.html"/>

//生成代码 function genCode () {

  var rowsSel = datagrid.datagrid("getSelections");

  if(rowsSel.length != 1) {      showWarnMsg("请选择一条数据！");

    return;   }

  var id = rowsSel[0].id;

$.post("genCode", {headId: id}, function(data) {

    log(data);      showMsg(data.msg);   });}</script><#include "/common/dialogWindow.html"/><#include "/common/foot.html"/>

调整数据库的错误。

分析在线表单的生成页面和方法

猜你喜欢