• jquery 初始化数据 添加html 第一次玩0.0


      1 /**
      2  * Created by Eee_xiang on 2018/04/12.
      3  * 联动响应事件
      4  */
      5 (function () {
      6     $.linkEvent = function (options) {
      7         var _this = this;
      8         var defaults = {    
      9             elId: "",
     10             groups : [],
     11             fields : [],
     12             data:{}
     13         };
     14         
     15         var options = $.extend(defaults, options);
     16         var $container = $(options.elId);
     17         
     18         var html = `<div class="input-group m-b">
     19                                     <span class="input-group-addon">联动响应</span> 
     20                                     
     21                                     <span class="input-group-addon-center" style="padding: 0;  150px;"> 
     22                                         <select class="form-control" id="target#key#">
     23                                         </select>
     24                                     </span> 
     25                                     <span class="input-group-addon-center" style="padding: 0;  100px;" id="eventTypeSpan#key#"> 
     26                                         <select class="form-control" id="eventType#key#">
     27                                             <option value="1">值</option>
     28                                             <option value="2">属性</option>
     29                                         </select>
     30                                     </span> 
     31                                     <span class="input-group-addon-center">
     32                                         <span class="form-control">设置为</span> 
     33                                     </span> 
     34                                     <span class="input-group-addon-center"style="padding: 0;  150px" id="valTypeSpan#key#"> 
     35                                         <select class="form-control" id="valType#key#">
     36                                             <option value="0">固定值</option>
     37                                             <option value="1">表单值</option>
     38                                             <option value="2">系统值</option>
     39                                         </select>
     40                                     </span> 
     41                                     <span class="input-group-addon-center hide" style="padding: 0;  150px" id="attrTypeSpan#key#"> 
     42                                         <select class="form-control" id="attrType#key#">
     43                                             <option value="1">读写属性</option>
     44                                             <option value="2">显示属性</option>
     45                                         </select>
     46                                     </span> 
     47                                     <span class="input-group-addon-center" style="padding: 0;  150px" id="defaultValSpan#key#">
     48                                         <input id="defaultVal#key#" type="text" class="form-control" placeholder="输入固定值"> 
     49                                     </span>
     50                                     <span class="input-group-addon-center hide" style="padding: 0;  150px" id="formFieldSpan#key#">
     51                                          <select class="form-control" id="formField#key#">
     52                                         </select>
     53                                     </span> 
     54                                     <span class="input-group-addon-center hide" style="padding: 0; 150px" id="sysValSpan#key#">
     55                                         <select class="form-control" id="sysVal#key#">
     56                                             <option value="userId">用户ID</option>
     57                                             <option value="userName">用户姓名</option>
     58                                             <option value="nickname">用户昵称</option>
     59                                             <option value="roleId">用户角色ID</option>
     60                                             <option value="roleName">用户角色名称</option>
     61                                             <option value="departId">用户组织机构ID</option>
     62                                             <option value="departName">用户组织机构名称</option>
     63                                             <option value="postId">用户岗位ID</option>
     64                                             <option value="postName">用户岗位名称</option>
     65                                             <option value="workgroupId">用户工作组ID</option>
     66                                             <option value="workgroupName">用户工作组名称</option>
     67                                         </select>
     68                                     </span>    
     69                                     <span class="input-group-addon-center hide" style="padding: 0;  150px" id="attrValSpan#key#"> 
     70                                         <select class="form-control" id="attrVal#key#">
     71                                             <option value="1">True</option>
     72                                             <option value="0">False</option>
     73                                         </select>
     74                                     </span>
     75                                     <span id="eventDel#key#" class="input-group-addon"><i
     76                                         class="fa fa-times"></i> 删除</span>
     77                                 </div>`;
     78         
     79         var groupHtml = `<div class="input-group m-b">
     80                                     <span class="input-group-addon">联动响应</span> 
     81                                     
     82                                     <span class="input-group-addon-center" style="padding: 0;  150px;"> 
     83                                         <select class="form-control" id="targetG#key#">
     84                                         </select>
     85                                     </span> 
     86                                     <span class="input-group-addon-center">
     87                                         <span class="form-control">属性</span> 
     88                                     </span>
     89                                     <span class="input-group-addon-center">
     90                                         <span class="form-control">设置为</span> 
     91                                     </span>
     92                                     <span class="input-group-addon-center">
     93                                         <span class="form-control">显示属性</span> 
     94                                     </span>
     95                                     
     96                                     <span class="input-group-addon-center hide" style="padding: 0;  150px" id="attrValSpanG#key#"> 
     97                                         <select class="form-control" id="attrValG#key#">
     98                                             <option value="1">True</option>
     99                                             <option value="0">False</option>
    100                                         </select>
    101                                     </span>
    102                                     <span id="eventDelG#key#" class="input-group-addon"><i
    103                                         class="fa fa-times"></i> 删除</span>
    104                         </div>`;
    105         /*
    106          * 添加分组节点
    107          */
    108         this.newGroupLinkEvent = function(rowJson){
    109             var key = this.newGuid();
    110             var isAdd = false;
    111             if(rowJson == undefined || rowJson == null){
    112                 rowJson = {
    113                     'target': '',
    114                     'type':'2',
    115                     'eventType': '2',
    116                     'valType': '0',
    117                     'value': '',
    118                 };
    119                 isAdd = true;
    120             }
    121             options.data[key] = rowJson;
    122             
    123             var _this = this;
    124             $groupHtml = $(groupHtml.replace(/#key#/g, key));
    125             $container.append($groupHtml);
    126             
    127             // 选择小组
    128             var targetSelect = $groupHtml.find("#targetG"+key);
    129                 targetSelect.empty();
    130                 var optDefault = '<option value="">请选择</option>';
    131                 targetSelect.append(optDefault);
    132                 $.each(options.groups, function(i, item){
    133                     var option = '<option value="'+item.id+'">'+item.title+'</option>';
    134                     targetSelect.append(option);
    135                 });
    136             $groupHtml.find("#attrValSpanG"+key).removeClass('hide');
    137             //绑定小组
    138             $groupHtml.find("#targetG"+key).change(function(){
    139                 var val = $(this).val();
    140                 rowJson.target = val;
    141                 options.data[key] = rowJson;
    142             });
    143             
    144             $groupHtml.find("#attrValG"+key).change(function(){
    145                 var val = $(this).val();
    146                 rowJson.value = val;
    147                 options.data[key] = rowJson;
    148             });
    149             //删除事件
    150             $groupHtml.find("#eventDelG"+key).click(function(){
    151                 delete options.data[key];
    152                 $(this).parent().remove();
    153             });
    154             //初始化
    155             if(rowJson.target != ''){
    156                 $groupHtml.find("#targetG"+key).val(rowJson.target);
    157             }
    158             if(rowJson.value !=''){
    159                 $groupHtml.find("#attrValG"+key).val(rowJson.value);
    160             }
    161         };
    162                             
    163                                     
    164         /**
    165          * 添加字段节点
    166          * */
    167         this.newLinkEvent = function(rowJson){
    168             var key = this.newGuid();
    169             var isAdd = false;
    170             if(rowJson == undefined || rowJson == null){
    171                 rowJson = {
    172                     'target': '',
    173                     'type':'1',
    174                     'eventType': '1',
    175                     'valType': '0',
    176                     'value': '',
    177                 };
    178                 isAdd = true;
    179             }
    180             options.data[key] = rowJson;
    181             
    182             var _this = this;
    183             $html = $(html.replace(/#key#/g, key));
    184             $container.append($html);
    185             this.genFieldOption($html, key);
    186             
    187             //绑定事件
    188             $html.find("#valType"+key).change(function(){
    189                 var val = $(this).val();
    190                 _this.changeValType($html, rowJson, key, val, true);
    191                 rowJson.valType = val;
    192                 options.data[key] = rowJson;
    193             });
    194             
    195             $html.find("#eventType"+key).change(function(){
    196                 var val = $(this).val();
    197                 _this.changeEventType($html, rowJson, key, val, true);
    198                 rowJson.eventType = val;
    199                 options.data[key] = rowJson;
    200             });
    201             $html.find("#target"+key).change(function(){
    202                 var val = $(this).val();
    203                 rowJson.target = val;
    204                 options.data[key] = rowJson;
    205             });
    206             $html.find("#attrType"+key).change(function(){
    207                 var val = $(this).val();
    208                 _this.changeAttrType($html, rowJson, key, val, true);
    209                 rowJson.valType = val;
    210                 options.data[key] = rowJson;
    211             });
    212             $html.find("#attrVal"+key).change(function(){
    213                 var val = $(this).val();
    214                 rowJson.value = val;
    215                 options.data[key] = rowJson;
    216             });
    217             $html.find("#formField"+key).change(function(){
    218                 var val = $(this).val();
    219                 rowJson.value = val;
    220                 options.data[key] = rowJson;
    221             });
    222             $html.find("#sysVal"+key).change(function(){
    223                 var val = $(this).val();
    224                 rowJson.value = val;
    225                 options.data[key] = rowJson;
    226             });
    227             
    228             $html.find("#defaultVal"+key).keyup(function(){
    229                 var val = $(this).val();
    230                 rowJson.value = val;
    231                 options.data[key] = rowJson;
    232             });
    233             
    234             $html.find("#eventDel"+key).click(function(){
    235                 delete options.data[key];
    236                 $(this).parent().remove();
    237             });
    238             
    239             //初始化数据
    240             if(rowJson.eventType != ''){
    241                 $html.find("#target"+key).val(rowJson.target);
    242             }
    243             if(rowJson.eventType != ''){
    244                 $html.find("#eventType"+key).val(rowJson.eventType);
    245                 this.changeEventType($html, rowJson, key, rowJson.eventType, isAdd);
    246             }else{
    247                 $html.find("#eventType"+key).val(rowJson.eventType);
    248             }
    249             
    250         };
    251         this.changeEventType = function($html, rowJson, key, val, isAdd){
    252             
    253             if(val == 2){
    254                 $html.find("#valTypeSpan"+key).addClass('hide');
    255                 $html.find("#formFieldSpan"+key).addClass('hide');
    256                 $html.find("#defaultValSpan"+key).addClass('hide');
    257                 $html.find("#sysValSpan"+key).addClass('hide');
    258                 
    259                 $html.find("#attrTypeSpan"+key).removeClass('hide');
    260                 $html.find("#attrValSpan"+key).removeClass('hide');
    261                 
    262                 if(!isAdd){
    263                     if(rowJson.valType != ''){
    264                         $html.find("#attrType"+key).val(rowJson.valType);
    265                         //值回显
    266                         if(rowJson.value != ''){
    267                             _this.changeAttrType($html, rowJson, key, rowJson.valType, isAdd);
    268                         }
    269                     }
    270                 }else{
    271                     rowJson.valType = $html.find("#attrType"+key).val();
    272                     rowJson.value = $html.find("#attrVal"+key).val();
    273                     options.data[key] = rowJson;
    274                 }
    275                 
    276             }else{
    277                 $html.find("#valTypeSpan"+key).removeClass('hide');
    278                 $html.find("#attrTypeSpan"+key).addClass('hide');
    279                 $html.find("#attrValSpan"+key).addClass('hide');
    280                 
    281                 if(isAdd){
    282                     $html.find("#valType"+key).val(0);
    283                     this.changeValType($html, rowJson, key, 0, isAdd);
    284                 }else{
    285                     if(rowJson.valType != ''){
    286                         $html.find("#valType"+key).val(rowJson.valType);
    287                         //值回显
    288                         if(rowJson.value != ''){
    289                             this.changeValType($html, rowJson, key, rowJson.valType, isAdd);
    290                         }
    291                     }
    292                 }
    293             }
    294             options.data[key] = rowJson;
    295         };
    296         this.changeValType = function($html, rowJson, key, val, isAdd){
    297             if(val == 0){
    298                 $html.find("#defaultValSpan"+key).removeClass('hide');
    299                 $html.find("#formFieldSpan"+key).addClass('hide');
    300                 $html.find("#sysValSpan"+key).addClass('hide');
    301                 if(isAdd){
    302                     rowJson.value = $html.find("#defaultVal"+key).val();
    303                     options.data[key] = rowJson;
    304                 }else{
    305                     $html.find("#defaultVal"+key).val(rowJson.value);
    306                 }
    307                 
    308             }else if(val == 1){
    309                 $html.find("#defaultValSpan"+key).addClass('hide');
    310                 $html.find("#formFieldSpan"+key).removeClass('hide');
    311                 $html.find("#sysValSpan"+key).addClass('hide');
    312                 if(isAdd){
    313                     rowJson.value = $html.find("#formField"+key).val();
    314                     options.data[key] = rowJson;
    315                 }else{
    316                     $html.find("#formField"+key).val(rowJson.value);
    317                 }
    318             }else if(val == 2){
    319                 $html.find("#defaultValSpan"+key).addClass('hide');
    320                 $html.find("#formFieldSpan"+key).addClass('hide');
    321                 $html.find("#sysValSpan"+key).removeClass('hide');
    322                 if(isAdd){
    323                     rowJson.value = $html.find("#sysVal"+key).val();
    324                     options.data[key] = rowJson;
    325                 }else{
    326                     $html.find("#sysVal"+key).val(rowJson.value);
    327                 }
    328                 
    329             }
    330             options.data[key] = rowJson;
    331         };
    332         this.changeAttrType = function($html, rowJson, key, val, isAdd){
    333             if(isAdd){
    334                 rowJson.value = $html.find("#attrVal"+key).val();
    335             }else{
    336                 $html.find("#attrVal"+key).val(rowJson.value);
    337             }
    338             options.data[key] = rowJson;
    339             
    340         };
    341         this.genFieldOption = function($html, key){
    342             var targetSelect = $html.find("#target"+key);
    343             var fieldSelect = $html.find("#formField"+key);
    344             targetSelect.empty();
    345             fieldSelect.empty();
    346             
    347             var optDefault = '<option value="">请选择</option>';
    348             targetSelect.append(optDefault);
    349             fieldSelect.append(optDefault);
    350             
    351             $.each(options.fields, function(i, item){
    352                 var option = '<option value="'+item.fieldName+'">'+item.title+'</option>';
    353                 targetSelect.append(option);
    354                 fieldSelect.append(option);
    355             });
    356             
    357         };
    358         this.getData = function(){
    359             var eventData = [];
    360             for ( var k in options.data) {
    361                 var row = options.data[k];
    362                 eventData.push(row);
    363             }
    364             return eventData;
    365         };
    366         this.initData = function(data){
    367             if(data == undefined || data == null){
    368                 return;
    369             }
    370             for (var k in data) {
    371                 var row = data[k];
    372                 if(row.type == '1'){
    373                     this.newLinkEvent(row);
    374                 }else if(row.type == '2'){
    375                     this.newGroupLinkEvent(row);
    376                 }
    377             }
    378         };
    379         this.newGuid = function () {
    380             var guid = "";
    381             for (var i = 1; i <= 32; i++) {
    382                 var n = Math.floor(Math.random() * 16.0).toString(16);
    383                 guid += n;
    384                // if ((i == 8) || (i == 12) || (i == 16) || (i == 20)) guid += "-";
    385             }
    386             return guid;
    387         };
    388         
    389     };
    390 
    391 })(jQuery);
    View Code
  • 相关阅读:
    利用java反射机制,使用android系统的内部类成员函数
    Android2.2 API 中文文档系列(5) —— View
    android 的系统编译
    git reset使用
    linux解压 tar命令
    Android之Service与IntentService的比较
    .equ .long表示什么意思?
    解决Android平台布局xml文件的error parsing xml unbound prefix错误
    玩转C链表
    android下创建文件夹和修改其权限的方法
  • 原文地址:https://www.cnblogs.com/Eeexiang/p/8947086.html
Copyright © 2020-2023  润新知