正文实例讲述了vue2.0结合DataTable插件达成表格动态刷新的不二秘诀。分享给大家供大家参照他事他说加以调查,具体如下:

vue2.0 据他们说也出了很久了,博主终于操了二遍实刀。

产品建议的急需是那般的,很平时的三个总计server端task达成率和气象的表格,要自行刷新个中的数据,并且当单个task实现的时候report给server端,看起来好easy好easy的八个急需啊!且听小编说完哈!

总体项目选择  vue +  vue-router +  vuex (传说中的vue
全家桶),构建筑工程具使用尤大大推出的vue-cli

自己那边使用的是框架是vue,表格自然用v-for渲染,然后我们这边分页搜索神马的都在此之前者弄,也等于说后端只管把一大坨数据塞到前端,然后前端本身组装分页器和形成模糊寻找,所以啊,笔者后面用的是DataTable那些插件,组装好的表格效果如下,望着没毛病哈!

品种是图片分享社交平台。  

永利开户送38元体验金 1

种类预览:

而是涉及到机关刷新就有题目了,因为每便获取数据都以全量数据,用dataTable组装表格的话,就非得要创设好的表格destroy掉,然后再v-for再DataTable()组装..页面会一向一向闪!体验好差的说!

 永利开户送38元体验金 2

自身只想出了一个相比较笨的点子解决那一个片段刷新的标题,我们只要有更加好的诀窍自然要报告自身!!上代码!

1 .vue-cli塑造筑工程具必知

1.v-for只渲染不改变的数码,比方名字备注之类的,一向刷新的字段比如状态和落成率都为空,就这么,只用DataTable第一回渲染表格

本身选拔的vue-cli 是基于webpack的版本
,不领悟webpack的能够先粗略看下下边包车型大巴基本知识

2.setRefresh是二个放大计时器,每隔1s就递归调用二回和睦,query全量数据,存放到originTableList里

webpack 基本知识点:

3.updateRefreshStatus是用原生的js去赢得每行的dom,然后innerText去改变其值

entry:入口点,webpack会从入口点设置的js文件开始对项目进行构建,进度中,全部入口点通过import也许require重视的包,都会被打包到output中制定的文本和路径;

4.reportTaskComplete是当当前以此task完毕率到达百分百就报告给server

output:中安装打包好的文书的出口路径还也可能有文件名;

5.checkTaskRefresh是递归检查有着的天职,把成功的天职放到completeTaskList,若是全都落成了就把电火花计时器清除掉

module:首纵然loaders,loaders是webpack举行打包的剖析器,css、vue、babel、scss都要求用npm安装相应的loader,webpack技艺对该格式的文书举行分析和拍卖;

6.beforeRouteLeave是vue router的点子,在距离路由之后清除机械漏刻

plugins:是一对webpack的包装插件,跟深入分析的言语毫无干系,用来支持营造,提供丰硕的附加成效。 

template

vue-cli 安装

<template>
  <div class="row">
    <loadingHourGlass></loadingHourGlass>
    <div class="col-xs-12 top-offset-15 bottom-offset-15">
      <div>
        <strong class="pull-left line-height-24 right-offset-15">自动刷新开关:</strong>
        <iphoneSwitcher v-bind:status="refresh.status" v-bind:canSwitch="false" v-bind:callBackName="'switchRefreshStatus'"></iphoneSwitcher>
      </div>
      <button type="button" class="btn btn-sm btn-primary pull-right" v-on:click="editRecord()">添加任务</button>
    </div>
    <div 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=='1')?'text-success':'text-danger' " -->
          <tr v-for="item in tableList" v-bind:class="'id-' + item.id">
            <td>{{ item.file_name }}</td>
            <!-- {{ item.status | statusFilter }} -->
            <td class="status"></td>
            <!-- v-bind:class=" (item.completeCount/item.total=='1')?'text-success':'text-danger' " -->
            <!-- {{ 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>
    </div>
  </div>
</template>

1). 首先,安装 vue-cli。(确认保证您有 node 和 npm)

js

npm i -g vue-cli
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();
},

2).创设二个 webpack 项目还要下载正视

一体化的效能如下,作用一体化是完成了,可是感到好笨的说,大家借使有好方法一定要告知小编哈!!

vue init webpack demo
cd demo
npm i

永利开户送38元体验金 3

3). 运行

期待本文所述对大家vue.js程序设计有所帮忙。

npm run dev 
 //npm run xxx 是执行配置在package.json中的脚本
e.g: 它会去找到package.json的scripts对象,执行node bulid/dev-server.js

您恐怕感兴趣的篇章:

  • Vue封装的可编辑表格插件方法
  • 对Vue table
    动态表格td可编写制定的情势详解

4). 构建

npm run dev  
//运转停止后,在当前目录下会在扭转 dist
目录,将dist目录放在服务器上,使用服务器上访问index.html的url就能够

若打包之后,项指标静态文件现身引用路径难点,可于项目目录 config/index.js
修改以下数据

module.exports = {
build:{
 assetsSubDirectory: 'static', //修改这里成你项目放置静态文件的目录
 assetsPublicPath: './', //修改这里成你项目放置静态文件的目录
 }
}

在静态文件 index.html 文件下, 引用静态文件

<link rel=”stylesheet” href=”static/css/icon/iconfont.css”/> 

vue支持scss 配置

1).安装以下模块

npm install node-sass --save-dev
npm install sass-loader --save-dev 

//--save-dev 会将该依赖写入package.json,方便别人安装依赖

永利开户送38元体验金,2).打开webpack.base.config.js在loaders里面增加

 {
 test: /\.scss$/,
 loaders: ["style", "css", "sass"]
 }

 

3).在须要用到scss的地点写上

<style lang=”scss”>
</style> 

2. 门类全部架构

种类完全目录如下

package.json

--build 
--config 
--dist //npm run build 之后再生成的目录
--src 
 --components // 用于存放组件
 --page //页面组件,由vue-router引入
 --router //路由
 --store // 数据流管理
 main.js //入口文件
 app.vue //主组件 
--static //静态文件目录
.babelrc 
.gitignore //git忽略上传文件
index.html //静态文件入口

main.js

入口文件,主要意义是初始化vue实例并应用必要的插件

import Vue from 'vue'
import router from './router/router'
import store from './store/store'

Vue.config.debug = true //开启debug模式
window.log = console.log
let data = {
 router,
 store
}
new Vue(data).$mount('#app') 

 //创建一个app实例,并且挂载到选择符#app匹配的元素上 在根目录html里面 

挂载到#app ,此处看一下尤大大给的生命周期图,以下的情趣是,假若new vue
的时候,有呈现的 el 属性

永利开户送38元体验金 4

 let data = {
 el:'#app', 
 router,
 store
}

则不用手动挂载到选择符#app相配的因素上

 app.vue

app.vue是大家的主组件,全体页面都是在App.vue下进行切换的,由于app.vue在具有页面都有,我们将会在app.vue下边写一些开头化全局方法。

思考到 组件
header,footer,loading动画基本全数项目都会使用到,app.vue代码如下

<template>
 <div class="com-app">
 <com-header></com-header> 
 <transition :name="transitionName">
 <router-view class="child-view"></router-view>
 </transition>
 <com-footer v-show="isFooter"></com-footer>
 <com-loading v-show="loading"></com-loading>
 </div>
</template>

是因为footer,loading在漫天项目中会频仍地改成,故v-show

v-if   假定条件为false,它怎么也不做,加载速度十分的快。当条件为真时,v-if
才会真正编写翻译渲染页面结构
v-show 渲染页面结构后,通过
“display:none” 调节成分状态 

router   
依照不相同路由跳转目录,按需加载相应的机件

const routes = [
 {
 path: '/',
 component: App,
 children: [
 {path: '/index/:type', name: 'index', component: Index},
 {path: '/home', name: 'home', component: Home},
 {path: '/HomeUserInfo/:uid', name: 'homeUserInfo', component: HomeUserInfo},
 {path: '/article/:id', name: 'article', component: Article},
 {path: '/addmsg', name: 'addMsg', component: AddMsg},
 {path: '/search/:types', name: 'searchresult', component: SearchResult},
 {path: '/login', name: 'login', component: Login},
 {path: '/register', name: 'register', component: Register},
 {path: '/modif', name: 'Modifi', component: Modifi},
 {path: '/admin', name: 'Admin', component: Admin}
 ]
 }
]
const router = new VueRouter({
 routes: routes, // short for routes: routes
 linkActiveClass: 'active', // router-link的选中状态的class,也有一个默认的值
 history: true
})

永利开户送38元体验金 5

后续更新 项目中遇见的难关,以及vuex使用~ 

正文已被收拾到了《Vue.js前端组件学习课程》,接待大家学习阅读。

以上正是本文的全体内容,希望对大家的上学抱有帮忙,也期待大家多多支持脚本之家。

您可能感兴趣的稿子:

  • 概述VUE2.0不足忽略的多数转移
  • vue2.0开支推行总结之困难篇
  • Vue2.0零件间数据传递示例
  • vue.js+Element完毕表格里的增加和删除改查
  • vue.js 表格分页ajax
    异步加载数据
  • vue.js表格组件开辟的实例详解
  • 依靠Vue.js的报表分页组件
  • 据他们说vue的下拉刷新指令和滚动刷新指令
  • Vue.js开采条件搭建
  • Vue.js常用命令汇总(v-if、v-for等)
  • vue2.0结缘DataTable插件达成表格动态刷新的艺术详解

相关文章