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
jquery 初始化数据 添加html 第一次玩0.0

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