关于自动生成页面的数据的存储

其他 2018-05-30 01:37:22 阅读次数: 0

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="###" 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": 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>

 


                    
                    
                    
                    
                    
                    
                    
                    
                    

                        
猜你喜欢

                        

                            
                            
                        

                    


                    
转载自blog.csdn.net/weixin_36810906/article/details/80484015

                    

                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    

                    


                

            

            


                

                    

                        
                        
                        
                        
                    


                    

                        

                            

                                今日推荐
                            


                            

                        

                    

                    

                        

                            

                                基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
                            

                        

                        

                            

                                美国拟限制 AI 大模型出口中国和俄罗斯
                            

                        

                        

                            

                                苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
                            

                        

                        

                            

                                openKylin 社区生态委员会第六次会议圆满召开
                            

                        

                        

                            

                                阿里云正式发布通义千问 2.5
                            

                        

                        

                            

                                Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
                            

                        

                        

                            

                                Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
                            

                        

                        

                            

                                Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
                            

                        

                        

                            

                                《2024 年一季度互联网投融资运行情况》研究报告
                            

                        

                        

                            

                                报告：Django 仍然是 74% 开发者的首选
                            

                        

                        

                            

                                15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
                            

                        

                        

                            

                                TIOBE 5 月榜单：Fortran “复活”进入 Top 10
                            

                        

                        
                        
                    

                


                

                    

                        

                            

                                周排行
                            

                            

                        

                    

                    

                        

                            

                                记一下去大梅沙的准备（2018-05-26）
                            

                        

                        

                            

                                Spring 注解 事务
                            

                        

                        

                            

                                基于HTTP协议的客户端缓存
                            

                        

                        

                            

                                阿里云rds 备份和还原
                            

                        

                        

                            

                                [PHP] 几个拖慢 PHP 程序/API 运行速度的点
                            

                        

                        

                            

                                python 代码风格------------PEP8规则
                            

                        

                        

                            

                                js控制json生成菜单——自制菜单（一）
                            

                        

                        

                            

                                将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
                            

                        

                        

                            

                                微信小程序转支付宝小程序
                            

                        

                        

                            

                                Qt551.窗口滚动条
                            

                        

                    

                

                

                    

                        

                            

                                每日归档
                            

                            

                                更多
                            

                            

                        

                    

                    

                        

                            2024-05-13(18)
                        

                        

                            2024-05-12(0)
                        

                        

                            2024-05-11(38)
                        

                        

                            2024-05-10(38)
                        

                        

                            2024-05-09(35)
                        

                        

                            2024-05-08(42)
                        

                        

                            2024-05-07(14)
                        

                        

                            2024-05-06(40)
                        

                        

                            2024-05-05(0)
                        

                        

                            2024-05-04(7)
                        

                    

                


            


            
        

    






















    


        

            
代码天地 © 2018 codetd.com

            境外服务器
             
            最新电视剧2022