基于Javascript条件渲染刀片模板

Question

我有

一个帐户 > 带有表格和其他模式的索引页面，我将其分割成一个小的刀片视图。在那个页面上，我有 100000 个帐户。

问题

在我的编辑模式顶部有一段 PHP 发出 100000 个 curls 请求，并导致我的帐户 > 索引页面出现巨大延迟。

我的目标

是为了防止在前面渲染这些刀片，并且仅在用户单击铅笔图标时才渲染。

---

这是我的 account.index 刀片

@extends('layouts.internal.master')
    @section('content')

    

    <div class="panel account-panel" style="padding: 30px;">
      <div class="panel-body">
    
       
        <div class="col-sm-2">
          <a id="account-create" class="btn btn-success btn-block mb20" data-toggle="modal" data-target=".account-create">Create</a>
        </div>
    
        <div class="table-responsive" style="margin-bottom: 0;">
          <table class="table" id="account-table">
            <thead>
              <tr>
                <th>#</th>
                <th>Account ID</th>
                <th>Customer Type</th>
                <th>Name</th>
                <th>Email</th>
                <th class="text-center">Auto Provisioning</th>
                <th class="text-center">AP</th>
                <th style="min-width: 90px;">Action</th>
              </tr>
            </thead>
            <tbody>
    
              <?php
              $x = 0;
    
              ?>
              @foreach( $accounts as $account )
    
              @if($account->email_address !== 'admin@benunets.com')
          
              <tr>
                <td>{{$x += 1 }}</td>
                <td><a href="/account/{!! $account->account_id !!}">{!! $account->account_id !!}</a></td>
                <td>
    
                {{-- <img src="{{ $image }}" width="30px"> --}}
    
                <span class="badge" style="background-color: {{ $color2 }}">{!! $customer_type !!}</span></td>
                <td>{!! ucfirst($account->first_name) !!} {!! ucfirst($account->last_name) !!}</td>
                <td>{!! $account->email_address !!}</td>
                <td class="text-center" >
    
                  @if($user != null AND $user->auto_provisioning == 1)
                  {!! Helper::intBoolToIcon($user->auto_provisioning) !!}
                  @else
                  <i title="false" style="font-size: 18px; color: #F44336" class="fa fa-times"></i>
                  @endif
    
                </td>
                <td class="text-center" ><b>{!! $count_cpe !!}</b></td>
                <td class="text-center">
    
                  <!-- Buttons -->
                  <div class="tool-buttons">
                    <ul class="button-list">
    
                      <!-- Edit -->
                      <li><a data-toggle="modal" data-target=".account-edit-{!! $account->account_id !!}" class="tooltips account-edit" data-id="{!! $account->account_id !!}" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><i class="fa fa-pencil"></i></a></li>
    
                      <!-- Delete -->
                      <li><a data-toggle="modal" data-target=".account-destroy-{!! $account->account_id !!}" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Delete"><i class="fa fa-trash-o"></i></a></li>
                    </ul>
                  </div>
    
                </td>
              </tr>
    
              @endif
              @endforeach
    
            </tbody>
          </table>
        </div>
      </div>
    </div>
    
    @include('account.modal.account.destroy')
    @include('account.modal.account.create')
    @include('account.modal.account.edit')


@section('pagescripts')

<script type="text/javascript">


  /*=============================================================================================
  =            Edit            =
  ============================*/


  //Edit Mode
  $('.account-edit').click( function() {


    var id = $(this).data("id");
    console.log(id);

    //Style
    var val2 = $("#auto_provisioning_switch-"+id).val();

    //Set the AP switch
    if(val2 == 1){
      $("#auto_provisioning_switch-"+id).bootstrapSwitch('state', true);
      $("[name='auto_provisioning_switch']").val(1);
      $('#service_plan_div-'+id).show();

      // Set the service plan dd menu
      var ajax = $.ajax({url: '/api/account/'+id+'/service_plan'});
      ajax.done(function (service_plan) {
        console.log(service_plan+' | id : ' + id );
        $('#service_plan-'+id).val(service_plan);
        });

    }else{
      $("#auto_provisioning_switch-"+id).bootstrapSwitch('state', false);
      $("[name='auto_provisioning_switch']").val(0);
      $('#service_plan_div-'+id).hide();
    }

    
  });

  




</script>

@stop

---

我只想渲染

@include('account.modal.account.edit')

当我点击铅笔进行编辑时。

或

@include('account.modal.account.destroy')

当我点击回收站进行删除时。

---

我该怎么做？

---

任何关于如何防止这种情况的提示都会有很大的帮助！！！

Answer 1

您不能使用 javascript 代码更改刀片渲染，因为刀片渲染发生在您的服务器上，而 javascript 发生在您的浏览器上。

您可以做的是添加 javascript，以便在用户与您的页面交互时隐藏这些部分。

Show or hide an element using javascript in all browsers