1.点击左侧在线表单,跳转到页面head/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',//com.tspace.controller.TspaceHeadController#listData方法 method:'post', toolbar:'#tb', pagination:true, multiSort:true, pageSize: 20, columns:[[ {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"); } //生成代码 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"/>
默认加载时调用方法com.tspace.controller.TspaceHeadController#listData
//列表页面数据 public void listData() { Object[] queryParams = getQueryParams(); String[] properties = (String[]) queryParams[0]; String[] symbols = (String[]) queryParams[1]; Object[] values = (Object[]) queryParams[2]; String orderBy = getOrderBy(); if(StringUtil.isEmpty(orderBy)) { orderBy = "id desc"; } renderDatagrid( DBTool.findByMultProperties("tspace_head", properties, symbols, values, orderBy, getPager()), DBTool.countByMultProperties("tspace_head", properties, symbols, values) ); }
点击生成表单,会调用
前台:head/list.html中的方法
function genForm() {
top.window.subPage.loadCurrDatagrid = function() { datagrid.datagrid("load"); } top.openWindow("生成表单", "${basePath}/tspaceHead/genFormPage"); }
后台:com.tspace.controller.TspaceHeadController#genFormPage
实际是跳转新页面的操作;
//生成表单页面 public void genFormPage() { render("head/genForm.html"); }
head/genForm.html
<#include "/common/head.html"/> <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"/>
前台:默认初始时加载的方法showData中的genFormData请求
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()); }); }
后台:com.tspace.controller.TspaceHeadController#genFormData
SQL:
select TABLE_SCHEMA, TABLE_TYPE, a.TABLE_NAME, TABLE_COMMENT, CREATE_TIME from information_schema.TABLES a
where a.TABLE_SCHEMA='tspace_busi' order by CREATE_TIME desc
//生成表单页面 public void genFormData() { String dbSource = getPara("db_source"); String dbName = (String) DBTool.use(dbSource).execute(new ICallback() { @Override public Object call(Connection conn) throws SQLException { return conn.getCatalog(); } }); String sql = "select TABLE_SCHEMA, TABLE_TYPE, a.TABLE_NAME, TABLE_COMMENT, CREATE_TIME from information_schema.TABLES a where a.TABLE_SCHEMA='" + dbName + "' order by CREATE_TIME desc"; renderDatagrid(DBTool.use(dbSource).find(sql)); }
选中数据后点击保存调用的方法:当前的save方法genForm请求
前台:genForm生成表单.
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(); } }); }
后台:com.tspace.controller.TspaceHeadController#genForm
com.tspace.service.TspaceService#genForm
实现增加的方法在tsapce_field中插入headId和字段信息;
修改:点击表单名称中的编辑,前台调用update,
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}); }
后台:com.tspace.controller.TspaceHeadController#updatePage
其实也是同上类似实现页面的跳转,跳转到head/update页面
//修改页面 public void updatePage() { setAttr("model", TspaceHead.me.findById(getParaToInt("id"))); render("head/update.html"); }
head/update.html页面
<#include "/common/head.html"/> <div id="tspaceHeadTable" class="easyui-layout add_content" data-options="fit:true, border:false"> <div data-options="region:'north', border:false" style="height: 72px;"> <form id="ff" method="post"> <table cellpadding="5" width="100%"> <tr> <th>表单名称:</th> <td><input class="easyui-textbox" type="text" name="form_name" value="${model.form_name}" data-options="required:true" style="width: 120px;"></input></td> <th>数据表名称:</th> <td><input class="easyui-textbox" type="text" name="table_name" value="${model.table_name}" data-options="required:true" style="width: 120px;"></input></td> <th>主键:</th> <td><input class="easyui-textbox" type="text" name="id_field" value="${model.id_field}" data-options="required:true" style="width: 120px;"></input></td> </tr> <tr> <th>弹窗大小:</th> <td> <input name="dialog_size" value="${model.dialog_size}" class="easyui-combobox" data-options=" valueField: 'id', textField: 'text', data:[ {id:'400x300', text:'400x300'}, {id:'600x400', text:'600x400'}, {id:'700x500', text:'700x500'}, {id:'800x600', text:'800x600'} ] " style="width: 120px;"/> </td> <th></th> <td></td> <th></th> <td></td> </tr> </table> </form> </div> <div data-options="region:'center', border:false" style="border-top-width: 1px;"> <table id="dg" class="easyui-datagrid" data-options=" fit:true, rownumbers:true, border: false, toolbar: '#tb', url: 'listField?head_id=${model.id}', method: 'get', onClickCell: onClickCell, onLoadSuccess: function(data) { if(data.total < 20) { setTimeout(function(){ for(var i = 0; i < data.rows.length; i++) { $('#dg').datagrid('beginEdit', i); } }, 200); }else { showMsg('字段数量超出了我的想象,默认不打开编辑模式!'); } } "> <thead> <tr> <th data-options="field:'id', checkbox:true"></th> <th data-options="field:'field_name',width:100,editor:'textbox'">字段名称</th> <th data-options="field:'column_name',width:120,editor:'textbox'">列表列名</th> <th data-options="field:'input_type',width:90, editor:{ type:'combobox', options:{ valueField:'value', textField:'text', data: [{value:'easyui-textbox', text:'textbox'}, {value:'easyui-combobox', text:'combobox'} ,{value:'easyui-datebox', text:'datebox'},{value:'easyui-datetimebox', text:'datetimebox'} ,{value:'textarea', text:'textarea'},{value:'easyui-numberspinner', text:'numberspinner'} ,{value:'easyui-filebox_img', text:'file(图片)'} ], required:true } }">控件类型</th> <th data-options="field:'is_show_list',width:60,hidden:true,editor:{type:'checkbox'}">列表显示</th> <th data-options="field:'is_allow_detail',width:60,hidden:true,editor:{type:'checkbox'}">详情显示</th> <th data-options="field:'is_allow_update',width:60,hidden:true,editor:{type:'checkbox'}">允许编辑</th> <th data-options="field:'is_allow_add',width:60,hidden:true,editor:{type:'checkbox'}">允许增加</th> <th data-options="field:'is_search',width:60,hidden:true,editor:{type:'checkbox'}">是否搜索</th> <th data-options="field:'search_type',width:60,hidden:true, editor:{ type:'combobox', options:{ valueField:'value', textField:'text', data: [{value:1, text:'值'}, {value:'2', text:'范围'}], required:true } }">搜索类型</th> <th data-options="field:'is_sum',width:60,hidden:true,editor:{type:'checkbox'}">是否汇总</th> <th data-options="field:'is_allow_null',width:60,editor:{type:'checkbox',options:{align:'center'}}">允许为空</th> <th data-options="field:'column_length',width:40,editor:'textbox'">列宽</th> <th data-options="field:'dict_sql',width:100,editor:'textbox'">字典sql</th> <th data-options="field:'default_value',width:60,editor:'textbox'"><span class="symbol_var" title="支持变量">$</span>默认值</th> <th data-options="field:'order_num',width:50,align:'center',editor:'textbox'">顺序</th> </tr> </thead> </table> <div id="tb" style="height:auto"> <a href="###" onclick="showHeadField(1)" class="easyui-linkbutton" data-options="toggle:true,group:'g1',selected:true" style="padding: 0px 4px;">数据</a> <a href="###" onclick="showHeadField(2)" class="easyui-linkbutton" data-options="toggle:true,group:'g1'" style="padding: 0px 4px;">页面</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">增加</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">删除</a> </div> <script type="text/javascript"> var editIndex = undefined; function endEditing(){ if (editIndex == undefined){return true} if ($('#dg').datagrid('validateRow', editIndex)){ editIndex = undefined; return true; } else { return false; } } function onClickCell(index, field){ $('#dg').datagrid('selectRow', index).datagrid('beginEdit', index);return; if (editIndex != index){ if (endEditing()){ $('#dg').datagrid('selectRow', index) .datagrid('beginEdit', index); var ed = $('#dg').datagrid('getEditor', {index:index,field:field}); if (ed){ ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus(); } editIndex = index; } else { $('#dg').datagrid('selectRow', editIndex); } } } function append(){ if (endEditing()){ $('#dg').datagrid('appendRow',{is_show_list:1}); editIndex = $('#dg').datagrid('getRows').length-1; $('#dg').datagrid('selectRow', editIndex) .datagrid('beginEdit', editIndex); } } function removeit(){ $.each($("#dg").datagrid("getSelections"), function(i, item) { $('#dg').datagrid('deleteRow', $("#dg").datagrid("getRowIndex", item)); }); editIndex = undefined; } function accept(){ if (endEditing()){ $('#dg').datagrid('acceptChanges'); } } function reject(){ $('#dg').datagrid('rejectChanges'); editIndex = undefined; } function getChanges(){ var rows = $('#dg').datagrid('getChanges'); alert(rows.length+' rows are changed!'); } </script> </div> </div> <script> top.window.subPage.save = save; function save(successFunc) { if($("#tspaceHeadTable").form('validate')) { accept(); var param = getParam(); param.rowsStr = JSON.stringify($("#dg").datagrid("getRows")); $.post("update", param, function(data) { if(successFunc) { successFunc(); } top.window.closeWindow(); top.window.subPage.loadCurrDatagrid(); }); } } function getParam() { return { "model.id": ${model.id}, "model.form_name": $(":input[name='form_name']").val(), "model.table_name": $(":input[name='table_name']").val(), "model.id_field": $(":input[name='id_field']").val(), "model.is_auto": $(":checked[name='is_auto']").val(), "model.dialog_size": $(":input[name='dialog_size']").val() } } function submitForm(){ $('#ff').form('submit'); } function clearForm(){ $('#ff').form('clear'); } var headFieldList = [ {field:"field_name", type: 1}, {field:"is_allow_null", type: 1}, {field:"column_length", type: 1}, {field:"dict_sql", type: 1}, {field:"order_num", type: 1}, {field:"default_value", type: 1}, {field:"is_show_list", type: 2}, {field:"is_allow_detail", type: 2}, {field:"is_allow_update", type: 2}, {field:"is_allow_add", type: 2}, {field:"is_search", type: 2}, {field:"search_type", type: 2}, {field:"is_sum", type: 2} ]; function showHeadField(type) { type = type || 1; var dg = $("#dg"); $.each(headFieldList, function(i, item) { if(item.type == type) { dg.datagrid("showColumn", item.field); }else { dg.datagrid("hideColumn", item.field); } }); } </script> <#include "/common/foot.html"/>
前台:默认加载的方法listField
<table id="dg" class="easyui-datagrid" data-options=" fit:true, rownumbers:true, border: false, toolbar: '#tb', url: 'listField?head_id=${model.id}', method: 'get', onClickCell: onClickCell, onLoadSuccess: function(data) { if(data.total < 20) { setTimeout(function(){ for(var i = 0; i < data.rows.length; i++) { $('#dg').datagrid('beginEdit', i); } }, 200); }else { showMsg('字段数量超出了我的想象,默认不打开编辑模式!'); } } "> 后台:com.tspace.controller.TspaceHeadController#listField
//字段列表 public void listField() { renderDatagrid(TspaceField.me.paginate(getParaToInt("page", 1), getParaToInt("rows", 500), getParaToInt("head_id"))); }
com.tspace.model.TspaceField#paginate
public Page<TspaceField> paginate(int pageNumber, int pageSize, int headId) { return paginate(pageNumber, pageSize, "select * ", "from tspace_field where head_id=? order by order_num", new Object[]{headId}); }增加的方法append:只有前台的操作增加一条当前页面的数据;
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">增加</a>前台:
function append(){ if (endEditing()){ $('#dg').datagrid('appendRow',{is_show_list:1}); editIndex = $('#dg').datagrid('getRows').length-1; $('#dg').datagrid('selectRow', editIndex) .datagrid('beginEdit', editIndex); } }后台:无;
点击保存后调用的方法还是save;
但是后台是先查询出素有数据删除掉,然后再新增加数据而不是用update方法。
目前后台查询报错了。
param.rowsStr=[{"is_allow_detail":1,"create_time":"2018-05-2917:50:53","dict_sql":"","column_name":"sfsf","input_type":"easyui-textbox","is_show_list":1,"default_value":"","search_type":"1","column_length":"120","field_name":"dgdg","data_type":null,"is_sum":0,"is_allow_update":1,"id":10210,"order_num":"0","head_id":28,"is_allow_add":1,"is_search":0,"is_allow_null":1},{"is_allow_detail":1,"create_time":"2018-05-28 14:40:51","dict_sql":"","column_name":"id358888","input_type":"easyui-combobox","is_show_list":1,"default_value":"","search_type":"1","column_length":"120","field_name":"id3888","data_type":"varchar","is_sum":0,"is_allow_update":1,"id":10202,"order_num":"1","head_id":28,"is_allow_add":1,"is_search":0,"is_allow_null":0},{"is_allow_detail":1,"create_time":"2018-05-28 14:40:51","dict_sql":"","column_name":"column5555","input_type":"easyui-textbox","is_show_list":1,"default_value":"","search_type":"1","column_length":"120","field_name":"column0555","data_type":"varchar","is_sum":0,"is_allow_update":1,"id":10204,"order_num":"3","head_id":28,"is_allow_add":1,"is_search":0,"is_allow_null":1},{"is_allow_detail":1,"create_time":"2018-05-28 14:40:51","dict_sql":"","column_name":"column888","input_type":"easyui-textbox","is_show_list":1,"default_value":"","search_type":"1","column_length":"120","field_name":"column888","data_type":"varchar","is_sum":0,"is_allow_update":1,"id":10205,"order_num":"4","head_id":28,"is_allow_add":1,"is_search":0,"is_allow_null":1}]
都是校验惹的灾祸。