分析在线表单的生成页面和方法
首先:headId 是可以不需要变动的;
其次,对应的表也不需要再增加,只是每个页面展示时获取到的headId传递到页面上就可以;
所以:不需要重新写后台,不需要关心是一对一还是一对多,还是只需要一个表就可以,
只要前台可以获取到数据,后台会自动根据headId查询返回list,在页面拼接展示出来。
页面也可以直接沿用listPage的模板页面。然后手动调节组件需要展示的信息和表头上方菜单展示的信息;
1.在线表单的页面是怎么展示出来的?左边菜单会有headId传入,来跳转到相应的tspace/list界面加载相应的js;
本身报错:
http://localhost:8088/common/getDictData?queryParams[dict_type]=db_source
相关方法和页面:
/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的文件感觉好像明白了什么,其实主要是数据库和后台的数据交互的操作。
<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"/>
调整数据库的错误。