zoukankan      html  css  js  c++  java

  • activiti自己定义流程之整合（二）：使用angular js整合ueditor创建表单

    基础环境搭建完成，接下来就该正式着手代码编写了，在说代码之前。我认为有必要先说明一下activit自己定义流程的操作。



    抛开自己定义的表单不谈。通过之前的了解，我们知道一个新的流程開始。是在启动流程实例（processIntence）的时候，而流程实例依赖于流程定义（processDefinition）。流程定义又依赖于流程模型（model）。


    我们用到的自己定义表单须要在创建模型，画模型图的时候就指定表单的名称formKey。须要保证这个formKey和我们创建的表单名称一致。




    表单并不在创建模型的时候使用。而是在部署的时候用到，因此仅仅要是在部署流程定义之前创建自己定义表单，那么不管是先创建模型还是先创建表单。仅仅要名称一致即可。




    那么我这里就先创建表单。由于我认为这种话，在创建模型时能够预览，更能保证创建模型的正确性（尽管模型也能够改动）；


    与之前的自己定义表单稍有不同的是，在这个整合的样例中，我用的是angularjs，同一时候预览时也用到了jquery中的dialog对话框的功能，也就须要比之前导入很多其它前端的js。他们例如以下图所看到的。
     


    须要注意的是，dialog的样式在jquery-ui.js中控制。这个也是网上下载的。


    前端首页index.html代码例如以下，由于angular js为单页面应用，因此实际上仅仅有一个html声明，全部的js以及css文件也都须要在index.html中一開始就导入进来：

    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html ng-app="activitiApp">  
    3. <head>  
    4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5.   <link href="./activi_css/activi.css" rel="stylesheet"/>   
    6.   <script type="text/javascript">  
    7.         var _root='http://form/index.php?s=/',_controller = 'index';  
    8.   </script>  
    9.   <script src="./angular-1.4.0-rc.2/angular.js"></script>  
    10.   <script src='./angular-1.4.0-rc.2/angular-ui-router.js'></script>  
    11.   <script src='./activi_js/app.js'></script>  
    12.   <script src='./activi_js/createCtr.js'></script>  
    13.   <script src='./activi_js/modelCtr.js'></script>  
    14.   <script src='./activi_js/processCtr.js'></script>  
    15.   <script src='./activi_js/taskCtr.js'></script>  
    16.   <script src='./activi_js/findFirstTaskCtr.js'></script>  
    17.   <script src='./activi_js/loginCtr.js'></script>  
    18.   <script src='./activi_js/hisTaskCtr.js'></script>  
    19.   <script src='./activi_js/completeTaskCtr.js'></script>  
    20.   <script src='./activi_js/completeTaskTo1Ctr.js'></script>  
    21.   <script src="./my_js/updateFormCtr.js"></script>  
    22.   <script src="./my_js/formListCtr.js"></script>  
    23.   <!-- 导入form相关的js -->  
    24.     <!--  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    25.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
    26.     <link href="form_css/bootstrap/css/bootstrap.css?2023" rel="stylesheet" type="text/css" />  
    27.     <link href="form_css/site.css?2023" rel="stylesheet" type="text/css" />-->  
    28.     <link href="form_css/jquery-ui.css" rel="stylesheet" type="text/css" />  
    29.     <link href="my_css/a.css" rel="stylesheet" type="text/css" />  
    30.     <script type="text/javascript">  
    31.         var _root='http://form/index.php?s=/',_controller = 'index';  
    32.     </script>   
    33.     <script src="form_js/jquery-1.7.2.min.js?2023"></script>  
    34.     <script src="form_js/common.js"></script>  
    35.     <script src="form_js/jquery-ui.js"></script>  
    36.     <script src="form_js/jquery.form.js"></script>  
    37.     <script src="form_js/ajax.js"></script>  
    38.     <script src="form_js/common/plugins/validate/jquery.validate.pack.js"></script>  
    39.     <script src="form_js/jquery.datetimepicker.js"></script>  
    40.     <script src="form_js/ueditor/ueditor.config.js?2023"></script>  
    41.     <script src="form_js/ueditor/ueditor.all.js?2023"> </script>  
    42.     <script src="form_js/ueditor/lang/zh-cn/zh-cn.js?2023"></script>  
    43.     <script src="form_js/ueditor/formdesign/leipi.formdesign.v4.js?2023"></script>  
    44.   <!-- 导入form相关的js -->  
    45. </head>  
    46. <body style="100%;height:400px;margin:0;background-color:#fff">  
    47.  <div style="height:70px;100%;border:1px solid #ccf">  
    48.     <img id="rdiv" src="./images/activiti.png" style="30%;height:98%"/>  
    49.      <a href="script:;" ng-show="userName!=undefined" style="margin-right:10px;float:right;margin-top:25px;" ng-click="logOut();">  
    50.      [退出登陆]  
    51.     </a>  
    52.     <font ng-show="userName!=undefined" style="margin-right:10px;float:right;margin-top:25px;">当前登陆用户：{{userName}}</font>  
    53.  </div>  
    54.  <div style="100%;position: absolute;height:auto">  
    55.  <div style="height:630px;12%;font-size:36px;position:relative;float:left;border:1px solid #ccf" ng-show="userName!=undefined">  
    56.     <table style="100%;text-align:center;margin-top:0px" cellSpacing="5px" cellPadding="0px">  
    57.       <tr>  
    58.          <td style="background-color:#aac;"><a href="#/create">创建模型</a></td>  
    59.       </tr>  
    60.       <tr>  
    61.          <td style="background-color:#acd;"> <a href="#/modelList">模型列表</a></td>  
    62.       </tr>  
    63.       <tr>  
    64.          <td style="background-color:#aac;"><a href="#/processList">流程列表</a></td>  
    65.       </tr>  
    66.       <tr>  
    67.          <td style="background-color:#acd;"><a href="#/findFirstTask">我的申请</a></td>  
    68.       </tr>  
    69.       <tr>  
    70.          <td style="background-color:#aac;"><a href="#/taskList">我的任务</a></td>  
    71.       </tr>  
    72.       <tr>  
    73.          <td style="background-color:#acd;"><a href="#/hisTask">历史任务</a></td>  
    74.       </tr>  
    75.       <tr>  
    76.          <td style="background-color:#aac;"><a href="#/createForm">创建表单</a></td>  
    77.       </tr>  
    78.       <tr>  
    79.          <td style="background-color:#acd;"><a href="#/formList">表单列表</a></td>  
    80.       </tr>  
    81.     </table>  
    82.  </div>  
    83.    
    84.  <div ui-view="view" ></div>  
    85.  </div>  
    86. </body>  
    87. </html>  




    Angular js 控制路由跳转app.js代码：
                                                                   
    [javascript] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. var app=angular.module('activitiApp',['ui.router']);    
    2. app.run(function($rootScope) {  
    3.     $rootScope.logOut=function(){  
    4.         $http.post("./loginOut.do").success(function(loginOutResult){  
    5.             $rootScope.userName=undefined;  
    6.             $location.path("/login");  
    7.         });  
    8.     }  
    9. });  
    10. app.config(function($stateProvider,$urlRouterProvider){    
    11.    $stateProvider    
    12.    .state('createForm', {    
    13.    url: "/createForm",    
    14.    views: {    
    15.       'view': {    
    16.        templateUrl: 'my_views/updateForm.html',    
    17.        controller: 'updateFormCtr'    
    18.       }    
    19.    }    
    20.   });    
    21.     
    22.     
    23. });    


    新增form表单的页面updateForm.html代码例如以下，要注意的是。这个页面也是有ueditor插件中的index.html改变过来的：
    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <div id="formDiv" style="margin-top:20px;margin-left:50px;height:550px;70%;font-size:18px;position:relative;float:left;">  
    2. <div class="container">  
    3. <form method="post" id="saveform" name="saveform" action="/index.php?s=/index/parse.html">  
    4. <input type="hidden" name="fields" id="fields" value="0">  
    5. <div style="98%;height:500px;margin-top:20px;border:3px solid grey">  
    6.   <p style="margin-top:10px;font-size:30px" >表单名称：<input type="text" id="formType"></input></p>  
    7.   <hr style="height:5px;border:none;border-top:5px ridge green;"/>  
    8.   <p style="margin-top:10px;font-size:30px" >表单设计：</p>  
    9.  <div >  
    10. <p style="left:30px">  
    11.         <button type="button" ng-click="leipiFormDesign.exec('text');" class="btn btn-info">文本框</button>  
    12.         <button type="button" ng-click="leipiFormDesign.exec('textarea');" class="btn btn-info">多行文本</button>  
    13.         <button type="button" ng-click="leipiFormDesign.exec('select');" class="btn btn-info">下拉菜单</button>  
    14.         <button type="button" ng-click="leipiFormDesign.exec('radios');" class="btn btn-info">单选框</button>  
    15.         <button type="button" ng-click="leipiFormDesign.exec('checkboxs');" class="btn btn-info">复选框</button>         
    16.         <button type="button" ng-click="leipiFormDesign.exec('listctrl');" class="btn btn-info">列表控件</button>  
    17.         <button type="button" ng-click="leipiFormDesign.findForm();" class="btn btn-info">form</button>  
    18. </p>  
    19. </div>  
    20. <!-- afsddddddddd -->  
    21. <div >  
    22. <script id="myFormDesign" type="text/plain" style="99.8%;">  
    23. </script>  
    24. </div>     
    25. </div>  
    26. <!-- afsddddddddd -->  
    27. <div class="row">  
    28. </div><!--end row-->  
    29. </form>  
    30. </div><!--end container-->  
    31. </div>  


    相应的js代码updateFormCtr.js。这里尤其须要注意的是leipiFormDesign.exec这种方法原本是ueditor插件中的，假设不做改动直接拿过来的话，在上便的页面中是无法调用的。angularjs须要注意作用域的问题。因此在相应的js中须要改成$scope. leipiFormDesign；除此之外，在保存和预览时基本没有什么变化。dialog对话框也是在兴许流程中使用到：
    [javascript] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. angular.module('activitiApp')    
    2. .controller('updateFormCtr', ['$rootScope','$scope','$http','$location','$state', function($rootScope,$scope,$http,$location,$state){    
    3.     $http.post("createFlush.do").success(function(result){  
    4.         if(result.isLogin==="yes"){  
    5.             $rootScope.userName=result.userName;  
    6.               
    7.         }else{  
    8.             $location.path("/login");  
    9.         }  
    10.     });  
    11.       
    12.     //预览  
    13.     UE.registerUI('button_preview',function(editor,uiName){  
    14.         if(!this.options.toolleipi)  
    15.         {  
    16.             return false;  
    17.         }  
    18.         //注冊button运行时的command命令。使用命令默认就会带有回退操作  
    19.         editor.registerCommand(uiName,{  
    20.             execCommand:function(){  
    21.                 try {  
    22.                     $scope.leipiFormDesign.fnReview();  
    23.                 } catch ( e ) {  
    24.                     alert('leipiFormDesign.fnReview 预览异常');  
    25.                 }  
    26.             }  
    27.         });  
    28.         //创建一个button  
    29.         var btn = new UE.ui.Button({  
    30.             //button的名字  
    31.             name:uiName,  
    32.             //提示  
    33.             title:"预览",  
    34.             //须要加入的额外样式。指定icon图标，这里默认使用一个反复的icon  
    35.             cssRules :'background-position: -420px -19px;',  
    36.             //点击时运行的命令  
    37.             onclick:function () {  
    38.                 //这里能够不用运行命令,做你自己的操作也可  
    39.                editor.execCommand(uiName);  
    40.             }  
    41.         });  
    42.   
    43.   
    44.         //由于你是加入button,所以须要返回这个button  
    45.         return btn;  
    46.     });  
    47.     //保存  
    48.     UE.registerUI('button_save',function(editor,uiName){  
    49.         if(!this.options.toolleipi)  
    50.         {  
    51.             return false;  
    52.         }  
    53.         //注冊button运行时的command命令。使用命令默认就会带有回退操作  
    54.         editor.registerCommand(uiName,{  
    55.             execCommand:function(){  
    56.                 try {  
    57.                     $scope.leipiFormDesign.fnCheckForm('save');  
    58.                 } catch ( e ) {  
    59.                     alert('leipiFormDesign.fnCheckForm("save") 保存异常');  
    60.                 }  
    61.                   
    62.             }  
    63.         });  
    64.         //创建一个button  
    65.         var btn = new UE.ui.Button({  
    66.             //button的名字  
    67.             name:uiName,  
    68.             //提示  
    69.             title:"保存表单",  
    70.             //须要加入的额外样式，指定icon图标。这里默认使用一个反复的icon  
    71.             cssRules :'background-position: -481px -20px;',  
    72.             //点击时运行的命令  
    73.             onclick:function () {  
    74.                 //这里能够不用运行命令,做你自己的操作也可  
    75.                editor.execCommand(uiName);  
    76.             }  
    77.         });  
    78.   
    79.   
    80.         //由于你是加入button,所以须要返回这个button  
    81.         return btn;  
    82.     });  
    83.   
    84.   
    85.       
    86.       
    87. //整合设计器  
    88.      var leipiEditor = UE.getEditor('myFormDesign',{  
    89.          toolleipi:true,//是否显示。设计器的 toolbars  
    90.          textarea: 'design_content',     
    91.          //这里能够选择自己须要的工具button名称,此处仅选择例如以下五个  
    92.         toolbars:[[  
    93.          ]],  
    94.          //关闭字数统计  
    95.          wordCount:false,  
    96.          //关闭elementPath  
    97.          elementPathEnabled:false,  
    98.          //默认的编辑区域高度  
    99.          initialFrameHeight:260  
    100.          //,iframeCssUrl:"css/bootstrap/css/bootstrap.css" //引入自身 css使编辑器兼容你站点css  
    101.          //很多其它其它參数，请參考ueditor.config.js中的配置项  
    102.      });  
    103.   
    104.   
    105.    $scope.leipiFormDesign = {  
    106.     findForm : function(){  
    107.         window.location.href="my_views/formList.html";  
    108.     },  
    109.     /*运行控件*/  
    110.     exec : function (method) {  
    111.         leipiEditor.execCommand(method);  
    112.     },  
    113.     /* 
    114.         Javascript 解析表单 
    115.         template 表单设计器里的Html内容 
    116.         fields 字段总数 
    117.     */  
    118.    parse_form:function(template,fields)  
    119.     {  
    120.         //正则  radios|checkboxs|select 匹配的边界 |--|  由于当使用 {} 时js报错  
    121.         var preg =  /(|-<span(((?

      !<span).)*leipiplugins="(radios|checkboxs|select)".*?

      )>(.*?)</span>-||<(img|input|textarea|select).*?(</select>|</textarea>|/>))/gi,preg_attr =/(w+)="(.?|.+?)"/gi,preg_group =/<input.*?/>/gi;  

    122.         if(!fields) fields = 0;  
    123.         var template_parse = template,template_data = new Array(),add_fields=new Object(),checkboxs=0;  
    124.         var pno = 0;  
    125.         template.replace(preg, function(plugin,p1,p2,p3,p4,p5,p6){  
    126.             var parse_attr = new Array(),attr_arr_all = new Object(),name = '', select_dot = '' , is_new=false;  
    127.             var p0 = plugin;  
    128.             var tag = p6 ? p6 : p4;  
    129.             //alert(tag + "  - t1 - "+p1 +"  -2- " +p2+"  -3- " +p3+"  -4- " +p4+"  -5- " +p5+"  -6- " +p6);  
    130.             if(tag == 'radios' || tag == 'checkboxs')  
    131.             {  
    132.                 plugin = p2;  
    133.             }else if(tag == 'select')  
    134.             {  
    135.                 plugin = plugin.replace('|-','');  
    136.                 plugin = plugin.replace('-|','');  
    137.             }  
    138.             plugin.replace(preg_attr, function(str0,attr,val) {  
    139.                     if(attr=='name')  
    140.                     {  
    141.                         if(val=='leipiNewField')  
    142.                         {  
    143.                             is_new=true;  
    144.                             fields++;  
    145.                             val = 'data_'+fields;  
    146.                         }  
    147.                         name = val;  
    148.                     }  
    149.                       
    150.                     if(tag=='select' && attr=='value')  
    151.                     {  
    152.                         if(!attr_arr_all[attr]) attr_arr_all[attr] = '';  
    153.                         attr_arr_all[attr] += select_dot + val;  
    154.                         select_dot = ',';  
    155.                     }else  
    156.                     {  
    157.                         attr_arr_all[attr] = val;  
    158.                     }  
    159.                     var oField = new Object();  
    160.                     oField[attr] = val;  
    161.                     parse_attr.push(oField);  
    162.             })   
    163.             /*alert(JSON.stringify(parse_attr));return;*/  
    164.              if(tag =='checkboxs') /*复选组  多个字段 */  
    165.              {  
    166.                 plugin = p0;  
    167.                 plugin = plugin.replace('|-','');  
    168.                 plugin = plugin.replace('-|','');  
    169.                 var name = 'checkboxs_'+checkboxs;  
    170.                 attr_arr_all['parse_name'] = name;  
    171.                 attr_arr_all['name'] = '';  
    172.                 attr_arr_all['value'] = '';  
    173.                   
    174.                 attr_arr_all['content'] = '<span leipiplugins="checkboxs"  title="'+attr_arr_all['title']+'">';  
    175.                 var dot_name ='', dot_value = '';  
    176.                 p5.replace(preg_group, function(parse_group) {  
    177.                     var is_new=false,option = new Object();  
    178.                     parse_group.replace(preg_attr, function(str0,k,val) {  
    179.                         if(k=='name')  
    180.                         {  
    181.                             if(val=='leipiNewField')  
    182.                             {  
    183.                                 is_new=true;  
    184.                                 fields++;  
    185.                                 val = 'data_'+fields;  
    186.                             }  
    187.   
    188.   
    189.                             attr_arr_all['name'] += dot_name + val;  
    190.                             dot_name = ',';  
    191.   
    192.   
    193.                         }  
    194.                         else if(k=='value')  
    195.                         {  
    196.                             attr_arr_all['value'] += dot_value + val;  
    197.                             dot_value = ',';  
    198.   
    199.   
    200.                         }  
    201.                         option[k] = val;      
    202.                     });  
    203.                       
    204.                     if(!attr_arr_all['options']) attr_arr_all['options'] = new Array();  
    205.                     attr_arr_all['options'].push(option);  
    206.                     //if(!option['checked']) option['checked'] = '';  
    207.                     var checked = option['checked'] !=undefined ? 'checked="checked"' : '';  
    208.                     attr_arr_all['content'] +='<input type="checkbox" name="'+option['name']+'" value="'+option['value']+'"  '+checked+'/>'+option['value']+' ';  
    209.   
    210.   
    211.                     if(is_new)  
    212.                     {  
    213.                         var arr = new Object();  
    214.                         arr['name'] = option['name'];  
    215.                         arr['leipiplugins'] = attr_arr_all['leipiplugins'];  
    216.                         add_fields[option['name']] = arr;  
    217.                     }  
    218.                 });  
    219.                 attr_arr_all['content'] += '</span>';  
    220.   
    221.   
    222.                 //parse  
    223.                 template = template.replace(plugin,attr_arr_all['content']);  
    224.                 template_parse = template_parse.replace(plugin,'{'+name+'}');  
    225.                 template_parse = template_parse.replace('{|-','');  
    226.                 template_parse = template_parse.replace('-|}','');  
    227.                 template_data[pno] = attr_arr_all;  
    228.                 checkboxs++;  
    229.   
    230.   
    231.              }else if(name)  
    232.             {  
    233.                 if(tag =='radios') /*单选组  一个字段*/  
    234.                 {  
    235.                     plugin = p0;  
    236.                     plugin = plugin.replace('|-','');  
    237.                     plugin = plugin.replace('-|','');  
    238.                     attr_arr_all['value'] = '';  
    239.                     attr_arr_all['content'] = '<span leipiplugins="radios" name="'+attr_arr_all['name']+'" title="'+attr_arr_all['title']+'">';  
    240.                     var dot='';  
    241.                     p5.replace(preg_group, function(parse_group) {  
    242.                         var option = new Object();  
    243.                         parse_group.replace(preg_attr, function(str0,k,val) {  
    244.                             if(k=='value')  
    245.                             {  
    246.                                 attr_arr_all['value'] += dot + val;  
    247.                                 dot = ',';  
    248.                             }  
    249.                             option[k] = val;      
    250.                         });  
    251.                         option['name'] = attr_arr_all['name'];  
    252.                         if(!attr_arr_all['options']) attr_arr_all['options'] = new Array();  
    253.                         attr_arr_all['options'].push(option);  
    254.                         //if(!option['checked']) option['checked'] = '';  
    255.                         var checked = option['checked'] !=undefined ? 'checked="checked"' : '';  
    256.                         attr_arr_all['content'] +='<input type="radio" name="'+attr_arr_all['name']+'" value="'+option['value']+'"  '+checked+'/>'+option['value']+' ';  
    257.   
    258.   
    259.                     });  
    260.                     attr_arr_all['content'] += '</span>';  
    261.   
    262.   
    263.                 }else  
    264.                 {  
    265.                     attr_arr_all['content'] = is_new ?

       plugin.replace(/leipiNewField/,name) : plugin;  

    266.                 }  
    267.                 template = template.replace(plugin,attr_arr_all['content']);  
    268.                 template_parse = template_parse.replace(plugin,'{'+name+'}');  
    269.                 template_parse = template_parse.replace('{|-','');  
    270.                 template_parse = template_parse.replace('-|}','');  
    271.                 if(is_new)  
    272.                 {  
    273.                     var arr = new Object();  
    274.                     arr['name'] = name;  
    275.                     arr['leipiplugins'] = attr_arr_all['leipiplugins'];  
    276.                     add_fields[arr['name']] = arr;  
    277.                 }  
    278.                 template_data[pno] = attr_arr_all;     
    279.             }  
    280.             pno++;  
    281.         })  
    282.         var parse_form = new Object({  
    283.             'fields':fields,//总字段数  
    284.             'template':template,//完整html  
    285.             'parse':template_parse,//控件替换为{data_1}的html  
    286.             'data':template_data,//控件属性  
    287.             'add_fields':add_fields//新增控件  
    288.         });  
    289.         return JSON.stringify(parse_form);  
    290.     },  
    291.     /*type  =  save 保存设计 versions 保存版本号  close关闭 */  
    292.     fnCheckForm : function ( type ) {  
    293.         var formType=document.getElementById("formType").value;  
    294.         if(leipiEditor.queryCommandState( 'source' ))  
    295.             leipiEditor.execCommand('source');//切换到编辑模式才提交。否则有bug     
    296.         if(leipiEditor.hasContents()){  
    297.             leipiEditor.sync();/*同步内容*/  
    298.             //--------------下面仅參考-----------------------------------------------------------------------------------------------------  
    299.             var type_value='',formid=0,fields=$("#fields").val(),formeditor='';  
    300.   
    301.   
    302.             if( typeof type!=='undefined' ){  
    303.                 type_value = type;  
    304.             }  
    305.             console.log(document.getElementById("formType"));  
    306.             //获取表单设计器里的内容  
    307.             formeditor=leipiEditor.getContent();  
    308.             //解析表单设计器控件  
    309.             var parse_form = this.parse_form(formeditor,fields);  
    310.              //异步提交数据  
    311.              $.ajax({  
    312.                 type: 'POST',  
    313.                 url : './addForm.do',  
    314.                 dataType : 'html',  
    315.                 async:false,  
    316.                 //contentType: 'application/json;charset=utf-8',  
    317.                 data : {'type' : type_value,'formid':formid,'parse_form':parse_form,"formType":formType},        
    318.                 success : function(data){  
    319.                     alert("保存成功");  
    320.                     window.location.href ="#/formList";  
    321.                 }  
    322.             });  
    323.               
    324.         } else {  
    325.             alert('表单内容不能为空！

      ')  

    326.             $('#submitbtn').button('reset');  
    327.             return false;  
    328.         }  
    329.     } ,  
    330.     /*预览表单*/  
    331.     fnReview : function (){  
    332.         console.log("111");  
    333.         if(leipiEditor.queryCommandState( 'source' ))  
    334.             leipiEditor.execCommand('source');/*切换到编辑模式才提交。否则部分浏览器有bug*/  
    335.         if(leipiEditor.hasContents()){  
    336.             console.log("222");  
    337.             leipiEditor.sync();       /*同步内容*/  
    338.             //--------------下面仅參考-------------------------------------------------------------------  
    339.             /*设计form的target 然后提交至一个新的窗体进行预览*/  
    340.             var type_value='',formid=0,fields=$("#fields").val(),formeditor='';  
    341.             var formType=document.getElementById("formType").value;  
    342.             if( typeof type!=='undefined' ){  
    343.                 type_value = type;  
    344.             }  
    345.             console.log("333");  
    346.             //获取表单设计器里的内容  
    347.             formeditor=leipiEditor.getContent();  
    348.             //解析表单设计器控件  
    349.             var parse_form = this.parse_form(formeditor,fields);  
    350.             var forms=JSON.parse(parse_form);  
    351.             console.log(forms);  
    352.             console.log(typeof forms);  
    353.             console.log(forms.template);  
    354.             var forms1=forms.template;  
    355.                 win_parse=window.open('','','width=800,height=400,alwaysRaised=yes,top=100,left=200');  
    356.                 //win_parse=window.open('','mywin',"menubar=0,toolbar=0,status=0,resizable=1,left=0,top=0,scrollbars=1,width=" +(screen.availWidth-10) + ",height=" + (screen.availHeight-50) + """);  
    357.                 var str='<div style="500px;height:300px;border:1px solid grey">'+forms1+'</div>';  
    358.                 win_parse.document.write(forms1);  
    359.                 win_parse.focus();       
    360.         } else {  
    361.             alert('表单内容不能为空！');  
    362.             return false;  
    363.         }  
    364.     }  
    365.   };  
    366.  }])  


    相对于前台而言。后台在这里就没有什么变化了。能够參考之前的自己定义表单。代码便不再罗列。
  • 相关阅读:
    Java对MongoDB的CRUD
    MongoDB数据库基本用法
    MySQL order by 排序结果不正确
    Linux shell 脚本 eq，ne，le，ge，lt，gt意义
    Linux shell 命令运行符 &，；，&& 区别
    Linux netstat 命令详解
    Linux ss 命令详解
    Linux sort 命令详解
    Linux sed 命令详解
    Linux xargs 命令详解
  • 原文地址：https://www.cnblogs.com/cynchanpin/p/7219744.html
Copyright © 2011-2022 走看看