Comment actualiser dynamiquement les tables en utilisant vue2.0 combiné avec le plug-in DataTable

Cet article présente principalement la méthode de vue2.0 combinée avec le plug-in DataTable pour réaliser une actualisation dynamique de table. Il analyse les problèmes rencontrés dans le processus de vue2.0 combiné avec le plug-in DataTable pour réaliser une actualisation dynamique de table. et les solutions correspondantes basées sur des exemples de projets spécifiques. , Les amis dans le besoin peuvent se référer à

Cet article décrit la méthode d'actualisation dynamique des tables à l'aide de vue2.0 combinée avec le plug-in DataTable. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Les exigences avancées par le produit sont les suivantes. Il s'agit d'un tableau très courant qui compte le taux d'achèvement et l'état des tâches côté serveur. Les données qu'il contient doivent être automatiquement actualisées, et lorsqu'une seule tâche est terminée, signalez-la au serveur Cela semble une requête si simple ! Écoutez-moi !

Ce que j'utilise ici, c'est le framework qui est vue. Le tableau est naturellement rendu avec v-for, et puis nous avons pagination . Recherche Shenma est entièrement effectué par le front-end, ce qui signifie que le back-end insère simplement beaucoup de données dans le front-end, puis le front-end assemble le paginateur et termine la recherche floue. J'ai déjà utilisé le plug-in DataTable. L'effet du formulaire assemblé est le suivant, ça a l'air bien !

Mais il y a un problème en ce qui concerne l'actualisation automatique, car chaque fois que les données sont obtenues, c'est la quantité totale de données si vous utilisez dataTable pour assembler le. table, vous devez détruire la table assemblée. , puis l'assemblage v-for puis DataTable()... la page continuera à clignoter ! Quelle terrible expérience !

Je viens de trouver un moyen relativement stupide de résoudre ce problème de rafraîchissement partiel. Si vous avez un meilleur moyen, dites-le-moi ! ! Accédez au code !

1.v-for ne restitue que les données inchangées, telles que les notes de nom, etc. Les champs qui sont constamment actualisés, tels que le statut et le taux d'achèvement, sont vides, utilisez uniquement DataTable pour restituer le tableau. pour la première fois

2.setRefresh est un timer, qui s'appelle récursivement toutes les 1 s pour interroger la quantité totale de données et la stocker dans originTableList

3.updateRefreshStatus est d'utiliser js natif pour obtenir le DOM de chaque ligne, puis innerText pour modifier sa valeur

4.reportTaskComplete doit signaler au serveur lorsque le taux d'achèvement de la tâche en cours atteint 100 %

5.checkTaskRefresh vérifie toutes les tâches de manière récursive et place les tâches terminées dans completeTaskList Si toutes sont terminées, effacez le minuteur

6.avantRouteLeave est une méthode. de vue routeur, après avoir quitté l'itinéraire clear timer

template

<template>
  <p class="row">
    <loadingHourGlass></loadingHourGlass>
    <p class="col-xs-12 top-offset-15 bottom-offset-15">
      <p>
        <strong class="pull-left line-height-24 right-offset-15">自动刷新开关:</strong>
        <iphoneSwitcher v-bind:status="refresh.status" v-bind:canSwitch="false" v-bind:callBackName="&#39;switchRefreshStatus&#39;"></iphoneSwitcher>
      </p>
      <button type="button" class="btn btn-sm btn-primary pull-right" v-on:click="editRecord()">添加任务</button>
    </p>
    <p class="col-xs-12 main-table-wrapper">
      <h4 class="page-header">点播刷新任务数据表格 <!-- <small>Secondary text</small> --></h4>
      <!-- <p>123</p> -->
      <table class="table table-striped table-hover table-bordered" id="main-table">
        <thead>
          <tr>
            <th>名称</th>
            <th>状态</th>
            <th>完成率</th>
            <th>创建时间</th>
            <th>备注</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody><!-- v-bind:class=" (item.completeCount/item.total==&#39;1&#39;)?&#39;text-success&#39;:&#39;text-danger&#39; " -->
          <tr v-for="item in tableList" v-bind:class="&#39;id-&#39; + item.id">
            <td>{{ item.file_name }}</td>
            <!-- {{ item.status | statusFilter }} -->
            <td class="status"></td>
            <!-- v-bind:class=" (item.completeCount/item.total==&#39;1&#39;)?&#39;text-success&#39;:&#39;text-danger&#39; " -->
            <!-- {{ item.completeRate }} -->
            <td class="rate"></td>
            <td>{{ item.create_time }}</td>
            <td>{{ item.description }}</td>
            <td>
              <button type="button" class="btn btn-primary btn-xs" v-on:click="showDetailModal(item.id,item.file_name)">详情</button>
              <!-- <button type="button" class="btn btn-danger btn-xs" v-on:click="test()">test</button> -->
            </td>
          </tr>
        </tbody>
      </table>
    </p>
  </p>
</template>

js

methods: {
  initRecordTable: function(){
    $('#main-table').DataTable({
      "paging": true,// 开启分页
      "pageLength": 10,//每页显示数量
      "lengthChange": true,//是否允许用户改变表格每页显示的记录数
      "searching": true,//搜索
      "ordering": true,//排序
      "info": true,//左下角 从 1 到 5 /共 23 条数据
      "autoWidth": true,
      // "scrollX": "100%",//表格的宽度
      // "scrollY": "200px",//表格的高度
      "scrollXInner": "100%",//表格的内容宽度
      // "bScrollCollapse":true,//当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false)
      "aaSorting": [
        [3, 'asc']
      ],
      "language": {
        "sInfoEmpty": "没有数据",
        "sZeroRecords": "没有查找到满足条件的数据",
        "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
        "sLengthMenu": "每页显示 _MENU_ 条记录",
        "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
        "oPaginate": {
          "sFirst": "首页",
          "sPrevious": "前一页",
          "sNext": "后一页",
          "sLast": "尾页"
        }
      },
    });
  },
  initQuery: function(){
    // status 和 rate两个字段是实时刷新的
    // dataTable摧毁和tableList赋值都砸在promise里完成
    // tableList只初始化的时候赋值一次 然后就不动了 用原生js去改变表格内的status字段
    let mySelf = this;
    let callback = function(){
      if($('#main-table').DataTable()){
        $('#main-table').DataTable().destroy()
      }
      mySelf.tableList = util.deepClone(mySelf.originTableList);
    }
    let queryTablePromise = mySelf.queryTable(callback);
    let promiseList = [];
    mySelf.clearRefresh();
    promiseList.push(queryTablePromise);
    Promise.all(promiseList).then(function (result) {
      console.log('ajax全部执行完毕：' + JSON.stringify(result)); // ["Hello", "World"]
      //renderTable函数只在首次进入页面时调用 1.毁掉dataTable插件 2.加载一次表格更新状态和完成率 3.调用自动刷新
      mySelf.renderTable();
      mySelf.updateRefreshStatus();
      mySelf.setRefresh();
    });
  },
  switchRefreshStatus: function(){
    let mySelf = this;
    let status = mySelf.refresh.status;
    let text = (status==true)?'关闭':'开启';
    let confirmCallback = null;
    if (status==true){
      confirmCallback = function(){
        mySelf.refresh.status = false;
      }
    }
    else{
      confirmCallback = function(){
        mySelf.refresh.status = true;
        mySelf.setRefresh();
      }
    }
    util.showConfirm('确认要' + text + '自动刷新么？',confirmCallback);
  },
  checkTaskRefresh: function(){
    let mySelf = this;
    let originTableList = mySelf.originTableList;
    let taskAllComplete = true;
    // console.log(JSON.stringify(mySelf.originTableList));
    originTableList.forEach(function(item,index,array){
      let completeTaskList = mySelf.refresh.completeTaskList;
      let completeRate = item.completeRate;
      //当前task完成 report给后端
      if (Number.parseInt(completeRate) == 1){
        // 若任务完成列表 没有这个TaskId 则发送请求
        if (!completeTaskList.includes(item.id)){
          console.log(item.id + "任务完成了！并且不存在于任务完成列表，现在发送完成请求！");
          mySelf.reportTaskComplete(item.id);
          mySelf.refresh.completeTaskList.push(item.id);
        }
      }
      else{
        taskAllComplete = false;
      }
    });
    if(taskAllComplete){
      console.log('全部任务都完成了！')
      return true;
    }
    return false;
  },
  setRefresh: function(){
    let mySelf = this;
    let status = mySelf.refresh.status;
    let interval = mySelf.refresh.interval;
    // 如果所有任务都完成了 则停止发送ajax请求 并更新最后一次
    if (mySelf.checkTaskRefresh()){
      console.log('更新最后一次表格！')
      mySelf.updateRefreshStatus();
      return false;
    }
    // console.log('refresh')
    if (status){
      mySelf.refresh.timer = setTimeout(function(){
        let queryTablePromise = mySelf.queryTable();
        let promiseList = [];
        promiseList.push(queryTablePromise);
        Promise.all(promiseList).then(function (result) {
          console.log('ajax全部执行完毕：' + JSON.stringify(result)); // ["Hello", "World"]
          mySelf.updateRefreshStatus();
          mySelf.setRefresh();
        });
      },interval);
    }
    else{
      mySelf.clearRefresh();
    }
  },
  updateRefreshStatus: function(){
    console.log('更新刷新状态')
    let mySelf = this;
    let mainTable = document.getElementById("main-table");
    let originTableList = mySelf.originTableList;
    originTableList.forEach(function(item,index,array){
      let trClassName = "id-" + item.id;
      // console.log(trClassName)
      // 获取当前页面展示的所有tr
      let trDom = mainTable.getElementsByClassName(trClassName)[0];
      // console.log(trDom)
      // 局部刷新个别字段
      if (trDom){
        let tdRate = trDom.getElementsByClassName("rate")[0];
        let tdStatus = trDom.getElementsByClassName("status")[0];
        tdRate.innerText = item.completeRate;
        tdRate.className = (item.status == "1")?"text-info rate":((item.status == "2")?"text-success rate":"text-danger rate");
        tdStatus.innerText = (item.status == "1")?"刷新中":((item.status == "2")?"刷新完成":"刷新失败");
        tdStatus.className = (item.status == "1")?"text-info status":((item.status == "2")?"text-success status":"text-danger status");
      }
    });
  },
  clearRefresh: function(){
    let mySelf = this;
    console.log('clear timer');
    clearTimeout(mySelf.refresh.timer);
  },
  queryTable: function(callback){
    let mySelf = this;
    let promise = new Promise(function (resolve, reject) {
      let url = pars.domain + "/api.php?Action=xxxxxxx&t=" + (new Date).getTime();
      $.get(url, function(res) {
        if (res.code == 0) {
          let resData = res.list;
          resData.forEach(function(item,index,array){
            let info = item.info;
            let completeCount = info.completeCount;
            let total = info.count;
            item.completeRate = ((completeCount/total)*100).toFixed(2) + "%";
          });
          // console.log(JSON.stringify(resData))
          mySelf.originTableList = resData;
          if (callback){
            callback();
          }
          resolve('queryTable完成！');
        }
        else{
          util.showDialog('error',"接口调用失败，报错信息为：" + res.message);
        }
      }, "json");
    });
    return promise;
  },
  renderTable: function(){
    let mySelf = this;
    mySelf.$nextTick(function(){
      mySelf.initRecordTable();
      util.hideLoading();
    })
  }
},
beforeRouteLeave (to, from, next){
  let mySelf = this;
  mySelf.clearRefresh();
  next();
},

L'effet global est le suivant. La fonction globale est implémentée, mais cela semble tellement stupide. Si vous avez une bonne idée, dites-le. moi! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!