1.首先通过追踪代码发现,数据库里必须有对应的表才能生成数据;
调用生成表单的方法genForm后跳转到genForm.html页面,
会展示数据库源中的所有的数据库的列表;
选中一条数据后,点击保存会调用方法,此时会在tspace_field中也生成headId;
事实上,每个业务对应一个页面一个表的数据,不是共用一个表,只是headId共存在一个表中,业务数据还是分开存储的。
第一步已经解决了,第二部跟踪解决数据的存储增加问题;
当前页面:
此时headId还没有出来。
选中数据库中的表格后,点击保存,系统会执行生成表单的方法。
页面刷新后会显示生成的表单在最前面。
此时headId在方法调用中出现了
(不小心点了2次,生成了2个表单,2个headId,diuy)
说明每次点击生成表单都会出现一个新的页面和代码;直接修改不变化;
会有定时控制,一旦操作数据库时,就会自动调用
增加完成后再调用就是调用修改的页面了。upadatePage.html
update
<#include "/common/head.html"/> //引入的头部不用管 <#-- 计算table列数 --> <#assign columnSize=head.dialog_size?split("x")[0]?number /> <#if columnSize lt 700> <#assign columnSize=1 /> <#else> <#assign columnSize=2 /> </#if> <div class="easyui-panel updatePage<#if columnSize gt 1> multiple</#if>" data-options="fit:true,border:false"> <form id="ff" class="easyui-form" method="post"> <table class="table1"> <#list updateFieldList as item> <#if item_index == 0 || item_index % columnSize == 0> <tr> </#if> <th><span id="${item.field_name}_label">${item.column_name}:</span></th> <td> <#if item.is_allow_update == 1> <#if item.input_type == 'easyui-combobox'> <div class="wrap_input"><input id="${item.field_name}" name="${item.field_name}" id="${item.field_name}" class="easyui-combobox" value="${model[item.field_name]!''}" data-options=" <#if item.is_allow_null==0>required:true,</#if> valueField: 'id', textField: 'text', fit: true, data:[ {id:'', text:''}<#list item.dict.keySet() as key>,{id:'${key}', text:'${item.dict.get(key)}'}</#list> ] "/></div> <#elseif item.input_type == 'easyui-filebox_img'> <div class="wrap_input"><input class="easyui-filebox" type="text" name="${item.field_name}" id="${item.field_name}" value="${model[item.field_name]!''}" data="${model[item.field_name]!''}" data-options="fit: true<#if item.is_allow_null==0>,required:true</#if>,buttonText: '选择图片', accept1: 'image/*', onChange: function(){uploadFile('${item.field_name}')}"></input></div> <div class="image_pre" <#if model[item.field_name]??>style="display: block;"</#if>><img id="${item.field_name}Img" src="${basePath}${model[item.field_name]!''}"></div> <#elseif item.input_type == 'textarea'> <div class="wrap_input textarea"><textarea name="${item.field_name}" id="${item.field_name}" rows="5" class="easyui-validatebox" data-options="<#if item.is_allow_null==0>required:true</#if>">${model[item.field_name]!''}</textarea></div> <#else> <div class="wrap_input"><input class="${item.input_type}" type="text" name="${item.field_name}" id="${item.field_name}" value="${model[item.field_name]!''}" data-options="fit: true<#if item.is_allow_null==0>,required:true</#if>"></input></div> </#if> <#else> <#escape x as x?html><#-- 安全输出 --> <span class="item" id="${item.field_name}">${model[item.field_name]!''}</span> </#escape> </#if> </td> <#if item_index != 0 && (item_index + 1) % columnSize == 0> </tr> </#if> </#list> <#if updateFieldList.size() % columnSize != 0> <#if (columnSize - updateFieldList.size() % columnSize) == 1> <td colspan="2"></td> </#if> <#if (columnSize - updateFieldList.size() % columnSize) == 2> <td colspan="2"></td> <td colspan="2"></td> </#if> </tr> </#if> </table> </form> </div>
<script> top.window.subPage.save = save; function save() { if($("#tspaceHeadTable").form('validate')) { $.post("update", getParam(), function(data) { if(data.result == "success") { top.window.closeWindow(); top.window.subPage.loadCurrDatagrid(); } }); } }
function getParam() { var param = { "headId": ${headId}, "id": ${model[head.id_field]}, <#list updateFieldList as item><#if item.is_allow_update == 1> "model.${item.field_name}": getInputValue("${item.field_name}")<#if updateFieldList.size()!=item_index>, </#if> </#if></#list> } for(key in param) { if(!param[key]) { delete param[key]; } } return param; }
//扩展js
<#list jsList as item>
<#if item.page?contains("
update
")>
${item.jsContentData!item.js_content}
</#if>
</#list>
</
script
>
<#include "/common/foot.html"/>
页面源码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tspace</title> <link rel="icon" type="image/x-icon" href="/res/images/tspace/favicon.ico"> <link rel="stylesheet" type="text/css" href="/res/js/jquery-easyui/themes/gray/easyui.css"> <link rel="stylesheet" type="text/css" href="/res/js/jquery-easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="/res/js/jquery-easyui/themes/color.css"> <link rel="stylesheet" type="text/css" href="/res/css/common.css"> <link rel="stylesheet" type="text/css" href="/res/css/icon.css"> <script type="text/javascript"> var basePath = ''; var noAuthBtn = ''; var authField = 'id'; </script> <script type="text/javascript" src="/res/js/jquery-easyui/jquery.min.js"></script> <script type="text/javascript" src="/res/js/jquery-easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="/res/js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="/res/js/common.js"></script> </head> <body style="visibility: hidden;"> <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="" data-options="required:true" style="width: 120px;"></input> </td> <th>数据表名称:</th> <td> <input class="easyui-textbox" type="text" name="table_name" value="test003" data-options="required:true" style="width: 120px;"></input> </td> <th>主键:</th> <td> <input class="easyui-textbox" type="text" name="id_field" value="id" data-options="required:true" style="width: 120px;"></input> </td> </tr> <tr> <th>弹窗大小:</th> <td> <input name="dialog_size" value="600x400" 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=30',//数据加载展示时候的方法 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="###" οnclick="showHeadField(1)" class="easyui-linkbutton" data-options="toggle:true,group:'g1',selected:true" style="padding: 0px 4px;">数据</a> <a href="###" οnclick="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" οnclick="append()">增加</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" οnclick="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": 30, "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() } }
//调用了form的提交方法 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> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?96bb51056dd3bece3de02a351f072069"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); } )(); </script> </body> </html>