正文

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

IP云
IP云V管理员/2 阅读
11/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
 /**

  * Created by Eee_xiang on 2018/04/12.

  * 联动响应事件

  */

 (function () {

     $.linkEvent = function (options) {

         var _this = this;

         var defaults = {

             elId: "",

             groups : [],

             fields : [],

             data:{}

         };

         var options = $.extend(defaults, options);

         var $container = $(options.elId);

         var html = `<div class="input-group m-b">

                                     <span class="input-group-addon">联动响应</span> 

                                     <span class="input-group-addon-center" style="padding: 0; width: 150px;">

                                         <select class="form-control" id="target#key#">

                                         </select>

                                     </span>

                                     <span class="input-group-addon-center" style="padding: 0; width: 100px;" id="eventTypeSpan#key#">

                                         <select class="form-control" id="eventType#key#">

                                             <option value="1">值</option>

                                             <option value="2">属性</option>

                                         </select>

                                     </span>

                                     <span class="input-group-addon-center">

                                         <span class="form-control">设置为</span>

                                     </span>

                                     <span class="input-group-addon-center"style="padding: 0; width: 150px" id="valTypeSpan#key#">

                                         <select class="form-control" id="valType#key#">

                                             <option value="0">固定值</option>

                                             <option value="1">表单值</option>

                                             <option value="2">系统值</option>

                                         </select>

                                     </span>

                                     <span class="input-group-addon-center hide" style="padding: 0; width: 150px" id="attrTypeSpan#key#">

                                         <select class="form-control" id="attrType#key#">

                                             <option value="1">读写属性</option>

                                             <option value="2">显示属性</option>

                                         </select>

                                     </span>

                                     <span class="input-group-addon-center" style="padding: 0; width: 150px" id="defaultValSpan#key#">

                                         <input id="defaultVal#key#" type="text" class="form-control" placeholder="输入固定值">

                                     </span>

                                     <span class="input-group-addon-center hide" style="padding: 0; width: 150px" id="formFieldSpan#key#">

                                          <select class="form-control" id="formField#key#">

                                         </select>

                                     </span>

                                     <span class="input-group-addon-center hide" style="padding: 0;width: 150px" id="sysValSpan#key#">

                                         <select class="form-control" id="sysVal#key#">

                                             <option value="userId">用户ID</option>

                                             <option value="userName">用户姓名</option>

                                             <option value="nickname">用户昵称</option>

                                             <option value="roleId">用户角色ID</option>

                                             <option value="roleName">用户角色名称</option>

                                             <option value="departId">用户组织机构ID</option>

                                             <option value="departName">用户组织机构名称</option>

                                             <option value="postId">用户岗位ID</option>

                                             <option value="postName">用户岗位名称</option>

                                             <option value="workgroupId">用户工作组ID</option>

                                             <option value="workgroupName">用户工作组名称</option>

                                         </select>

                                     </span>

                                     <span class="input-group-addon-center hide" style="padding: 0; width: 150px" id="attrValSpan#key#">

                                         <select class="form-control" id="attrVal#key#">

                                             <option value="1">True</option>

                                             <option value="0">False</option>

                                         </select>

                                     </span>

                                     <span id="eventDel#key#" class="input-group-addon"><i

                                         class="fa fa-times"></i> 删除</span>

                                 </div>`;

         var groupHtml = `<div class="input-group m-b">

                                     <span class="input-group-addon">联动响应</span> 

                                     <span class="input-group-addon-center" style="padding: 0; width: 150px;">

                                         <select class="form-control" id="targetG#key#">

                                         </select>

                                     </span>

                                     <span class="input-group-addon-center">

                                         <span class="form-control">属性</span>

                                     </span>

                                     <span class="input-group-addon-center">

                                         <span class="form-control">设置为</span>

                                     </span>

                                     <span class="input-group-addon-center">

                                         <span class="form-control">显示属性</span>

                                     </span>

                                     <span class="input-group-addon-center hide" style="padding: 0; width: 150px" id="attrValSpanG#key#">

                                         <select class="form-control" id="attrValG#key#">

                                             <option value="1">True</option>

                                             <option value="0">False</option>

                                         </select>

                                     </span>

                                     <span id="eventDelG#key#" class="input-group-addon"><i

                                         class="fa fa-times"></i> 删除</span>

                         </div>`;

         /*

          * 添加分组节点

          */

         this.newGroupLinkEvent = function(rowJson){

             var key = this.newGuid();

             var isAdd = false;

             if(rowJson == undefined || rowJson == null){

                 rowJson = {

                     'target': '',

                     'type':'2',

                     'eventType': '2',

                     'valType': '0',

                     'value': '',

                 };

                 isAdd = true;

             }

             options.data[key] = rowJson;

             var _this = this;

             $groupHtml = $(groupHtml.replace(/#key#/g, key));

             $container.append($groupHtml);

             // 选择小组

             var targetSelect = $groupHtml.find("#targetG"+key);

                 targetSelect.empty();

                 var optDefault = '<option value="">请选择</option>';

                 targetSelect.append(optDefault);

                 $.each(options.groups, function(i, item){

                     var option = '<option value="'+item.id+'">'+item.title+'</option>';

                     targetSelect.append(option);

                 });

             $groupHtml.find("#attrValSpanG"+key).removeClass('hide');

             //绑定小组

             $groupHtml.find("#targetG"+key).change(function(){

                 var val = $(this).val();

                 rowJson.target = val;

                 options.data[key] = rowJson;

             });

             $groupHtml.find("#attrValG"+key).change(function(){

                 var val = $(this).val();

                 rowJson.value = val;

                 options.data[key] = rowJson;

             });

             //删除事件

             $groupHtml.find("#eventDelG"+key).click(function(){

                 delete options.data[key];

                 $(this).parent().remove();

             });

             //初始化

             if(rowJson.target != ''){

                 $groupHtml.find("#targetG"+key).val(rowJson.target);

             }

             if(rowJson.value !=''){

                 $groupHtml.find("#attrValG"+key).val(rowJson.value);

             }

         };

         /**

          * 添加字段节点

          * */

         this.newLinkEvent = function(rowJson){

             var key = this.newGuid();

             var isAdd = false;

             if(rowJson == undefined || rowJson == null){

                 rowJson = {

                     'target': '',

                     'type':'1',

                     'eventType': '1',

                     'valType': '0',

                     'value': '',

                 };

                 isAdd = true;

             }

             options.data[key] = rowJson;

             var _this = this;

             $html = $(html.replace(/#key#/g, key));

             $container.append($html);

             this.genFieldOption($html, key);

             //绑定事件

             $html.find("#valType"+key).change(function(){

                 var val = $(this).val();

                 _this.changeValType($html, rowJson, key, val, true);

                 rowJson.valType = val;

                 options.data[key] = rowJson;

             });

             $html.find("#eventType"+key).change(function(){

                 var val = $(this).val();

                 _this.changeEventType($html, rowJson, key, val, true);

                 rowJson.eventType = val;

                 options.data[key] = rowJson;

             });

             $html.find("#target"+key).change(function(){

                 var val = $(this).val();

                 rowJson.target = val;

                 options.data[key] = rowJson;

             });

             $html.find("#attrType"+key).change(function(){

                 var val = $(this).val();

                 _this.changeAttrType($html, rowJson, key, val, true);

                 rowJson.valType = val;

                 options.data[key] = rowJson;

             });

             $html.find("#attrVal"+key).change(function(){

                 var val = $(this).val();

                 rowJson.value = val;

                 options.data[key] = rowJson;

             });

             $html.find("#formField"+key).change(function(){

                 var val = $(this).val();

                 rowJson.value = val;

                 options.data[key] = rowJson;

             });

             $html.find("#sysVal"+key).change(function(){

                 var val = $(this).val();

                 rowJson.value = val;

                 options.data[key] = rowJson;

             });

             $html.find("#defaultVal"+key).keyup(function(){

                 var val = $(this).val();

                 rowJson.value = val;

                 options.data[key] = rowJson;

             });

             $html.find("#eventDel"+key).click(function(){

                 delete options.data[key];

                 $(this).parent().remove();

             });

             //初始化数据

             if(rowJson.eventType != ''){

                 $html.find("#target"+key).val(rowJson.target);

             }

             if(rowJson.eventType != ''){

                 $html.find("#eventType"+key).val(rowJson.eventType);

                 this.changeEventType($html, rowJson, key, rowJson.eventType, isAdd);

             }else{

                 $html.find("#eventType"+key).val(rowJson.eventType);

             }

         };

         this.changeEventType = function($html, rowJson, key, val, isAdd){

             if(val == 2){

                 $html.find("#valTypeSpan"+key).addClass('hide');

                 $html.find("#formFieldSpan"+key).addClass('hide');

                 $html.find("#defaultValSpan"+key).addClass('hide');

                 $html.find("#sysValSpan"+key).addClass('hide');

                 $html.find("#attrTypeSpan"+key).removeClass('hide');

                 $html.find("#attrValSpan"+key).removeClass('hide');

                 if(!isAdd){

                     if(rowJson.valType != ''){

                         $html.find("#attrType"+key).val(rowJson.valType);

                         //值回显

                         if(rowJson.value != ''){

                             _this.changeAttrType($html, rowJson, key, rowJson.valType, isAdd);

                         }

                     }

                 }else{

                     rowJson.valType = $html.find("#attrType"+key).val();

                     rowJson.value = $html.find("#attrVal"+key).val();

                     options.data[key] = rowJson;

                 }

             }else{

                 $html.find("#valTypeSpan"+key).removeClass('hide');

                 $html.find("#attrTypeSpan"+key).addClass('hide');

                 $html.find("#attrValSpan"+key).addClass('hide');

                 if(isAdd){

                     $html.find("#valType"+key).val(0);

                     this.changeValType($html, rowJson, key, 0, isAdd);

                 }else{

                     if(rowJson.valType != ''){

                         $html.find("#valType"+key).val(rowJson.valType);

                         //值回显

                         if(rowJson.value != ''){

                             this.changeValType($html, rowJson, key, rowJson.valType, isAdd);

                         }

                     }

                 }

             }

             options.data[key] = rowJson;

         };

         this.changeValType = function($html, rowJson, key, val, isAdd){

             if(val == 0){

                 $html.find("#defaultValSpan"+key).removeClass('hide');

                 $html.find("#formFieldSpan"+key).addClass('hide');

                 $html.find("#sysValSpan"+key).addClass('hide');

                 if(isAdd){

                     rowJson.value = $html.find("#defaultVal"+key).val();

                     options.data[key] = rowJson;

                 }else{

                     $html.find("#defaultVal"+key).val(rowJson.value);

                 }

             }else if(val == 1){

                 $html.find("#defaultValSpan"+key).addClass('hide');

                 $html.find("#formFieldSpan"+key).removeClass('hide');

                 $html.find("#sysValSpan"+key).addClass('hide');

                 if(isAdd){

                     rowJson.value = $html.find("#formField"+key).val();

                     options.data[key] = rowJson;

                 }else{

                     $html.find("#formField"+key).val(rowJson.value);

                 }

             }else if(val == 2){

                 $html.find("#defaultValSpan"+key).addClass('hide');

                 $html.find("#formFieldSpan"+key).addClass('hide');

                 $html.find("#sysValSpan"+key).removeClass('hide');

                 if(isAdd){

                     rowJson.value = $html.find("#sysVal"+key).val();

                     options.data[key] = rowJson;

                 }else{

                     $html.find("#sysVal"+key).val(rowJson.value);

                 }

             }

             options.data[key] = rowJson;

         };

         this.changeAttrType = function($html, rowJson, key, val, isAdd){

             if(isAdd){

                 rowJson.value = $html.find("#attrVal"+key).val();

             }else{

                 $html.find("#attrVal"+key).val(rowJson.value);

             }

             options.data[key] = rowJson;

         };

         this.genFieldOption = function($html, key){

             var targetSelect = $html.find("#target"+key);

             var fieldSelect = $html.find("#formField"+key);

             targetSelect.empty();

             fieldSelect.empty();

             var optDefault = '<option value="">请选择</option>';

             targetSelect.append(optDefault);

             fieldSelect.append(optDefault);

             $.each(options.fields, function(i, item){

                 var option = '<option value="'+item.fieldName+'">'+item.title+'</option>';

                 targetSelect.append(option);

                 fieldSelect.append(option);

             });

         };

         this.getData = function(){

             var eventData = [];

             for ( var k in options.data) {

                 var row = options.data[k];

                 eventData.push(row);

             }

             return eventData;

         };

         this.initData = function(data){

             if(data == undefined || data == null){

                 return;

             }

             for (var k in data) {

                 var row = data[k];

                 if(row.type == '1'){

                     this.newLinkEvent(row);

                 }else if(row.type == '2'){

                     this.newGroupLinkEvent(row);

                 }

             }

         };

         this.newGuid = function () {

             var guid = "";

             for (var i = 1; i <= 32; i++) {

                 var n = Math.floor(Math.random() * 16.0).toString(16);

                 guid += n;

                // if ((i == 8) || (i == 12) || (i == 16) || (i == 20)) guid += "-";

             }

             return guid;

         };

     };

 })(jQuery);

相关阅读

目录[+]