码迷,mamicode.com
首页 > Web开发 > 详细

6angular1、jquery实现无限表单效果

时间:2019-06-02 19:22:41      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:pos   var   页面   scope   mod   输入   作用   实现   避免   

1、需求描述:(1)点击页面一个按钮,向后台发送请求,获取内容;(2)内容有input和select,select有默认项和备选项,其中备选项不显示,点击默认项右侧三角号后,备选项展示;(3)每个备选项右侧还有三角号,点击后向后台发送请求,获取内容;(4)重复(2)(3)步骤。
2、逻辑实现:(1)把请求结果渲染到页面后,立即找到并隐藏select的备选项;(2)给每一个备选项的三角号绑定点击函数(递归,get_options),以便向后台请求;(3)给每一个备选项的文字内容绑定点击函数,以便给默认项赋值;(4)给每一个默认项的文字绑定点击函数,以便隐藏或展示备选项。
3、代码结构。通过class、id、event对象、自定义属性,将传递并关联相关数据。
<div>
  <!-- 下面的div通过遍历拼接起来 -->
  <div><!-- select的最外层div -->
    <div>下拉框的label内容</div>
    <div>
      <div><span>默认项文字</span><span>三角号</span></div>
      <ul><li><span>备选项文字</span><span>三角号</span></li></ul>
    </div>
    <div>
      <div><span>默认项文字</span><span>三角号</span></div>
      <ul><!-- 下面的li通过遍历拼接起来 -->
        <li><span>备选项文字</span><span>三角号</span></li>
        <div>备选项详情</div></ul>
    </div>
  </div>
</div>

  

<!doctype html>
<html lang="en" ng-app="app">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .add_cust_rule_mask {
      width: 100%;
      height: 100%;
      background: #000;
      position: fixed;
      left: 0;
      top: 0;
      opacity: 0.5;
      z-index: 7;
    }
    .add_cust_rule_alert {
      display: flex;
      justify-content: center;
      /* align-items:center;  */
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      border-radius: 0;
      overflow: auto;
      z-index: 11;
      width: 1000px;
      height: 800px;
      padding: 30px;
    }
    ul li {
      list-style: none;
    }
    .add_cust_rule_alert .before_click {
      margin-left: 20px;
      display: inline-block;
      width: 15px;
      height: 15px;
      background: red;
      /*background: url(../../static/img/guolv-12_6-down.png) no-repeat;*/
      background-size: contain;
      background-position: center center;
      cursor: pointer;
    }
    .add_cust_rule_alert .after_click {
      margin-left: 20px;
      display: inline-block;
      width: 15px;
      height: 15px;
      background: green;
      /* background: url(../../static/img/guolv-12_6-up.png) no-repeat;*/
      background-size: contain;
      background-position: center center;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div ng-controller="ctrl">
  <div ng-click="add_cust_rule()"
       style="width: 200px;height:100px;line-height:100px;margin:0 auto;font-size: 80px;text-align: center">点击
  </div>
  <p style="font-size: 30px;">说明:点击“点击”后,红色方块,表示已经折叠,点击它,可以展开;绿色方块,表示已经展开,点击它,可以折叠。</p>
  <div class="add_cust_rule_mask" ng-show=‘is_show_alert‘ id="add_cust_rule_mask" ng-click="close_mask()">
  </div>
  <div class="add_cust_rule_alert" ng-show=‘is_show_alert‘>
    <div>
      <div id="add_cust_rule_content">
      </div>
      <div style="display: flex;justify-content: center;margin:40px auto;">
        <input type="button" value="添加自定义规则 已完成,关闭弹窗" ng-click="close_mask()"/>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<script>
  var app = angular.module(‘app‘, []);
  app.controller(‘ctrl‘, function ($scope) {
    /* 以下"添加自定义规则"*/
    //本功能的实现逻辑为递归:(1)触发事件,获取后台返回的数据,执行$scope.insert_form函数,在该函数内部,a将数据插入到页面上,b给每一个备选项右侧的三角号绑定点击函数;(2)在点击函数内部,获取后台返回的数据,执行$scope.insert_form函数;实现递归。
    //本功能的实现逻辑为递归:(1)执行插入函数,绑定点击函数;(2)执行点击函数,执行插入函数。
    $scope.is_show_alert = false;
    var self_outer_next = 0;//避免递归时出现ID重复
    var self_inner_next = 0;//避免递归时出现ID重复
    $scope.cust_data = {
      ‘protoContext‘: {
        ‘FUNC‘: {   // 界面label1
          ‘default_select‘: ‘Write_Single_Coil‘,
          ‘type‘: ‘select‘,  // 表明FUNC后为select
          ‘value‘: [
            {
              ‘Write_Single_Coil‘: { // select 中的 option
                ‘isFinal‘: 0, // 是否是最后一级的value?能否继续点击? 0:能点击, 1:不能点击
                ‘default_select‘: 0//select默认选项;
              }
            },
            {
              ‘Write_Single_Register‘: {
                ‘isFinal‘: 1,
              }
            }, {
              ‘Write_Single_RegisterUP‘: {
                ‘isFinal‘: 1,
              }
            },
          ],
        },
        ‘FUCKFUCK‘: {   // 界面label1
          ‘default_select‘: ‘Write_Single_FUCK‘,
          ‘type‘: ‘select‘,  // 表明FUNC后为select
          ‘value‘: [
            {
              ‘Write_Single_FUCK‘: { // select 中的 option
                ‘isFinal‘: 1, // 是否是最后一级的value?能否继续点击? 0:能点击, 1:不能点击
                ‘default_select‘: 0//select默认选项;
              }
            },
            {
              ‘Write_Single_RegisterFUCK‘: {
                ‘isFinal‘: 0,
              }
            }, {
              ‘Write_Single_RegisterFUCKYOU‘: {
                ‘isFinal‘: 0,
              }
            },
          ],
        },
        ‘ADDR‘: {// 界面 label2
          ‘type‘: ‘input‘, // ADDR后为 input
          ‘range‘: ‘[0, 65535]‘, // input的输入范围限制
        },
        ‘BDDR‘: {// 界面 label2
          ‘type‘: ‘input‘, // ADDR后为 input
          ‘range‘: ‘[0, 65535]‘, // input的输入范围限制
        }
      }
    };
    $scope.close_mask = function () {
      $scope.is_show_alert = false;
    };
    $scope.option_click = function () {//点击下拉框“备选项”文字内容时,触发的函数。作用:用该项的文字更改下拉框“默认框”里面的文字
      $(‘.single_click‘).each(function (index, item) {
        $(item).off(‘click‘);
        var cust_option = $(this).attr(‘cust_option‘);
        $(item).on(‘click‘, function (event) {
          $(‘#‘ + cust_option).html(event.target.innerHTML);
        });
      });
    };
    $scope.label_width = function () {//label标签右侧对齐
      setTimeout(function () {
        var label_width = 0;
        $(‘.label_width‘).each(function (index, item) {
          if (label_width < item.clientWidth) {
            label_width = item.clientWidth;
          }
        });
        $(‘.label_width‘).each(function (index, item) {
           //item.style.width = label_width + ‘px‘;
            $(item).width(label_width);
        });
      });
    };
    $scope.options_show = function () {//点击下拉框“默认框”右侧的三角号时,触发的函数。作用:让下拉框备选项显示或隐藏
      $(‘.options_show‘).each(function (index, item) {
        $(item).off(‘click‘);
        var cust_three = $(this).attr(‘cust_three‘);
        $(item).on(‘click‘, function () {
          if ($(‘#ul_div‘ + cust_three).is(‘:hidden‘)) {
            $(‘#ul_div‘ + cust_three).show();
            $(‘.‘ + cust_three).hide();
            $(‘#three‘ + cust_three).removeClass(‘before_click‘).addClass(‘after_click‘);
            $(‘.three‘ + cust_three).removeClass(‘after_click‘).addClass(‘before_click‘);
          } else {
            $(‘#ul_div‘ + cust_three).hide();
            $(‘#three‘ + cust_three).removeClass(‘after_click‘).addClass(‘before_click‘);
          }
        });
      });
    };
    $scope.button_submit = function () {
      $(‘.button_submit‘).each(function (index, item) {
        $(item).off(‘click‘);
        var self = $(this).attr(‘self‘);
        $(item).on(‘click‘, function () {
          console.log(self);
        });
      });
    };
    $scope.three_click = function () {//给所有下拉框“备选项”右侧的三角号绑定点击函数。作用:点击后,向后台请求数据,该数据作为该备选项的详情插入到该备选项的下面,然后再次给所有下拉框“备选项”右侧的三角号绑定点击函数。
      $(‘.three_click‘).each(function (index, item) {
        $(item).off(‘click‘);
        var cust_attr = $(this).attr(‘self‘);
        $(item).on(‘click‘, function () {
          if ($(item).hasClass(‘after_click‘)) {
            $(item).removeClass(‘after_click‘).addClass(‘before_click‘);
            $(‘#id‘ + cust_attr).empty();
            return;
          }
          $(item).removeClass(‘before_click‘).addClass(‘after_click‘);
          //此处向后台发送请求
          var default_array = [];//保存本次请求返回值中所有下拉框的默认选项
          $.each($scope.cust_data.protoContext, function (key_outer, value) {
            if (value.type === ‘select‘) {
              $.each(value.value, function (index, value) {
                $.each(value, function (key, value) {
                  if (value.default_select === 0) {
                    default_array.push(key);
                  }
                });
              });
            }
          });
          $scope.insert_form($scope.cust_data.protoContext, default_array, cust_attr);
        });
      });
    };
    $scope.insert_form = function (true_data, default_array, cust_attr) {//公用函数。作用:把从后台返回的数据插入到该备选项的下面并绑定相关函数。
      cust_attr = cust_attr || ‘‘;
      default_array = default_array || [];
      var str = ‘‘;
      var self_outer_id = ‘self_outer_id‘;
      var self_outer_index = 0;
      $.each(true_data, function (key_outer, value) {
        if (value.type === ‘select‘) {
          str += ‘<div style="display:flex;margin:0 auto;">‘;
          str += ‘<div style="margin-left:10px;height:40px;line-height:40px;margin-top:10px;text-align:right;display:inline-block;" class="label_width">‘ + key_outer + ‘</div>‘;
          str += ‘<div>‘;
          str += ‘<div style="user-select: none;border-radius:5px;border:1px solid #ccc;height:40px;line-height:40px;margin-left:10px;margin-top:10px;padding-left:10px">‘;
          str += ‘<span id="‘ + self_outer_id + self_outer_next + ‘">‘ + default_array[self_outer_index] + ‘</span>‘;
          str += ‘<span class="before_click options_show" cust_three="‘ + self_outer_id + self_outer_next + ‘" id="three‘ + self_outer_id + self_outer_next + ‘" style="margin-right:10px;"></span>‘;
          str += ‘</div>‘;
          str += ‘<ul style="border-radius:5px;border:1px solid #ccc;margin-left:10px;padding:10px;" class="ul_options" id="ul_div‘ + self_outer_id + self_outer_next + ‘">‘;
          var self_inner_id = ‘self_inner_id‘;
          $.each(value.value, function (index, value) {
            $.each(value, function (key_inner, value) {
              str += ‘<li style="height:45px;line-height:45px;">‘;
              str += ‘<span style="user-select: none;cursor:pointer" class="single_click" cust_option="‘ + self_outer_id + self_outer_next + ‘">‘ + key_inner + ‘</span>‘;
              if (value.isFinal === 0) {
                str += ‘<span self="‘ + self_inner_id + self_inner_next + ‘" class="three_click before_click three‘ + self_outer_id + self_outer_next + ‘"></span>‘;
                str += ‘</li>‘;
                str += ‘<div style="margin-left:20px;" id="id‘ + self_inner_id + self_inner_next + ‘" class="‘ + self_outer_id + self_outer_next + ‘">  </div>‘;
              } else {
                str += ‘</li>‘;
              }
            });
            self_inner_next += 1;
          });
          str += ‘</ul>‘;
          str += ‘</div>‘;
          str += ‘</div>‘;
          self_outer_next += 1;
          self_outer_index += 1;
        }
        if (value.type === ‘input‘) {
          str += ‘<div style="display:flex;margin:10px;">‘;
          str += ‘<span style="height:40px;line-height:40px;text-align:right;display:inline-block;" class="label_width">‘ + key_outer + ‘</span>‘;
          str += ‘<input style="border-radius:5px;border:1px solid #ccc;height:40px;line-height:40px;margin-left:10px;padding-left:10px;" type="text" placeholder="‘ + value.range + ‘">‘;
          str += ‘<input style="text-align:center;cursor:pointer;width:50px;border-radius:5px;border:1px solid #ccc;height:40px;line-height:40px;margin-left:10px;" type="button" class="button_submit" self="‘ + value.range + ‘"  value="提交"/>‘;
          str += ‘</div>‘;
        }
      });
      var cust_id = cust_attr == ‘‘ ? ‘#add_cust_rule_content‘ : ‘#id‘ + cust_attr;
      $(cust_id).empty().append(str).show().find(‘.ul_options‘).hide();
      $scope.three_click();
      $scope.option_click();
      $scope.button_submit();
      $scope.options_show();
      $scope.label_width();
    };
    $scope.add_cust_rule = function () {
      //此处向后台发送请求并获取数据;
      $scope.is_show_alert = true;
      var default_array = [];//保存本次请求返回值中所有下拉框的默认选项
      $.each($scope.cust_data.protoContext, function (key_outer, value) {
        if (value.type === ‘select‘) {
          $.each(value.value, function (index, value) {
            $.each(value, function (key, value) {
              if (value.default_select === 0) {
                default_array.push(key);
              }
            });
          });
        }
      });
      $scope.insert_form($scope.cust_data.protoContext, default_array);
    };
    /* 以上"添加自定义规则"*/
  });
</script>
</body>
</html>

  














6angular1、jquery实现无限表单效果

标签:pos   var   页面   scope   mod   输入   作用   实现   避免   

原文地址:https://www.cnblogs.com/gushixianqiancheng/p/10963946.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!