6angular1jquery实现无限表单效果

Posted 2021-12-17 gushixianqiancheng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了6angular1jquery实现无限表单效果相关的知识，希望对你有一定的参考价值。

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>

以上是关于6angular1jquery实现无限表单效果的主要内容，如果未能解决你的问题，请参考以下文章

利用递归实现UIScrollView无限滚动的效果

关于scrollview的无限滚动效果实现

js 实现图片无限横向滚动效果

css3 实现动画效果，怎样使他无限循环动下去？

jquery实现无限滚动瀑布流实现原理

无限轮播的实现，未加自动轮播效果（非原创）