竞博体育 > 应用 > 今天项目需要一份根据本地数据的筛选分页功能,然后根据切换修改该dom对象的文案值

今天项目需要一份根据本地数据的筛选分页功能,然后根据切换修改该dom对象的文案值

vuejs实现本地数据的筛选分页,vuejs筛选分页

今天项目需要一份根据本地数据的筛选分页功能,好吧,本来以为很简单,网上搜了搜全是ajax获取的数据,这不符合要求啊,修改起来太费力气,还不如我自己去写,不多说直接上代码

效果图:竞博体育app下载 1

项目需要:点击左侧进行数据筛选,实现自动分页,自动生成页数,点击自动跳转

项目代码:js代码

var subList=new Vue({
    el:'#main',
    data:{
        // subcontentData为本地数据
        subContents:subcontentData,
        // 页面需要展现的数据
        yemiandata:[],
        // 页面展现条数
        datanum:12,
        // 开始椰树
        startnum:0,
        // 结束椰树
        endnum:1,
        // 一共多少页
        btnnum:0,
        // 生成切换页面的按钮用
        listnum:[],
        // input跳转
        jemp:1,




    },
    methods:{
        filters(num){
            this.subContents=subcontentData;
            // 需要重置防止翻页导致startnum和endnum不一致
            this.startnum=0;
            this.endnum=1;
            // 这里是判断筛选按钮
            switch(num){

                case 0: $('#sublist li').css({
                    background:'#f2f2f2'
                }).eq(0).css({
                    background:'#dbe9f0'
                });
                    this.fenye();
                    break;
                case 1:

                    $('#sublist li').css({
                        background:'#f2f2f2'
                    }).eq(1).css({
                        background:'#dbe9f0'
                    });
                    this.subContents=this.subContents.filter(num=>{

                        return String(num['department']).includes('行政');
                    });
                    this.fenye();
                    break;
                case 2:
                    $('#sublist li').css({
                        background:'#f2f2f2'
                    }).eq(2).css({
                        background:'#dbe9f0'
                    });
                    this.subContents=this.subContents.filter(num=>{

                        return String(num['department']).includes('报关');
                    });
                    this.fenye();
                    break;
                case 3:
                    $('#sublist li').css({
                        background:'#f2f2f2'
                    }).eq(3).css({
                        background:'#dbe9f0'
                    });
                    this.subContents=this.subContents.filter(num=>{

                        return String(num['department']).includes('组装');
                    });
                    this.fenye();
                    break;
                case 4:
                    $('#sublist li').css({
                        background:'#f2f2f2'
                    }).eq(4).css({
                        background:'#dbe9f0'
                    });
                    this.subContents=this.subContents.filter(num=>{

                        return String(num['department']).includes('电子');
                    });
                    this.fenye();
                    break;
                case 5:
                    $('#sublist li').css({
                        background:'#f2f2f2'
                    }).eq(5).css({
                        background:'#dbe9f0'
                    });
                    this.subContents=this.subContents.filter(num=>{

                        return String(num['department']).includes('工艺');
                    });
                    this.fenye();
                    break;
                case 6:
                    $('#sublist li').css({
                        background:'#f2f2f2'
                    }).eq(6).css({
                        background:'#dbe9f0'
                    });
                    this.subContents=this.subContents.filter(num=>{

                        return String(num['department']).includes('财务');
                    });
                    this.fenye();
                    break;
                case 7:
                    $('#sublist li').css({
                        background:'#f2f2f2'
                    }).eq(7).css({
                        background:'#dbe9f0'
                    });
                    this.subContents=this.subContents.filter(num=>{

                        return String(num['department']).includes('制造');
                    });
                    this.fenye();
                    break;
                case 8:
                    $('#sublist li').css({
                        background:'#f2f2f2'
                    }).eq(8).css({
                        background:'#dbe9f0'
                    });

                    this.subContents=this.subContents.filter(num=>{

                        return String(num['department']).includes('销售');
                    });

                    this.fenye();
                    break;
            }
        },
        // 分野函数
        fenye(){

            this.yemiandata=this.subContents.slice(this.startnum*this.datanum,this.endnum*this.datanum);
            this.btnnum=Math.ceil(this.subContents.length/this.datanum);
            this.listnum=[];
            for(i=0;i<this.btnnum;i++){

                this.listnum[i]=i+1;
            }
            btnwidth();


        },
        // 下一页函数
        nextlist(){
            if(this.endnum>= this.btnnum){
                alert('最后一页了');

                return false;
            }
            this.endnum++;
            this.startnum++;





        },
        // 上一页函数
        prevlist(){
            if(this.startnum<= 0){
                alert('第一页了');

                return false;
            }
            this.endnum--;
            this.startnum--;




        },
        // 按钮跳转到制定的页面
        jemppage(list){
            this.startnum=list-1;
            this.endnum=list;
        },
        // input跳抓
        goindex(){
            console.log(parseInt(this.jemp));
            if(parseInt(this.jemp)>this.btnnum){alert('请输入合法参数');return}
            this.endnum=this.jemp;
            this.startnum=this.jemp-1;
        }

    },
    // 使用一个监听。可以减少很多代码
    watch:{
        startnum(n,o){

            this.yemiandata=this.subContents.slice(n*this.datanum,(parseInt(n)+1)*this.datanum);


        }
    }
});

    subList.filters(0);
    subList.fenye();
    // 封装一下底部btn方法  底部自动大小
    function btnwidth(){
        $('#fbtn').css({
            width:(subList.listnum.length+2)*40+293+'px',
            marginLeft:-((subList.listnum.length+2)*40+293)/2+'px'
        })
    }

    btnwidth();

下面是html节点代码:

<div class="main_content">
            <div class="table2_nav">
                <ul id="sublist">
                    <li @click="filters(0)"><div class="blockcenter">部门分类(部门8/8)</div></li>
                    <li @click="filters(1)"><div class="blockcenter">行政部</div></li>
                    <li @click="filters(2)"><div class="blockcenter">报关科</div></li>
                    <li @click="filters(3)"><div class="blockcenter">组装部</div></li>
                    <li @click="filters(4)"><div class="blockcenter">电子部</div></li>
                    <li @click="filters(5)"><div class="blockcenter">工艺部</div></li>
                    <li @click="filters(6)"><div class="blockcenter">财务部</div></li>
                    <li @click="filters(7)"><div class="blockcenter">制造部</div></li>
                    <li @click="filters(8)"><div class="blockcenter">销售部</div></li>
                </ul>
            </div>
            <div class="table2_content">
                <div class="col-title bg-fff clearfix">
                    <h5 class="fl">告警策略报表统计</h5>
                    <div class="btn fl">
                        主机名称&nbsp;
                        <div class="btn_down">
                            <ul>
                                <li>下啦</li>
                                <li>下啦2</li>
                            </ul>
                        </div>



                    </div>
                    <div class="fl btn2">
                        添加
                    </div>
                </div>

                <table width="1410px" class="table" id="tablelist tab">
                    <tr>
                        <th>工号</th>
                        <th>姓名</th>
                        <th>部门名称</th>
                        <th>性别</th>
                        <th>籍贯</th>
                        <th>员工状态</th>
                        <th>入职时间</th>
                        <th>离职时间</th>
                        <th>离职类别</th>

                    </tr>
                    <tr v-for="subContent in yemiandata">
                        <td>{{subContent.num}}</td>
                        <td>{{subContent.name}}</td>
                        <td>{{subContent.department}}</td>
                        <td>{{subContent.sex}}</td>
                        <td>{{subContent.addres}}</td>
                        <td>{{subContent.staic}}</td>
                        <td>{{subContent.jointime}}</td>
                        <td>{{subContent.leavetime}}</td>
                        <td>{{subContent.type}}</td>

                    </tr>


                </table>

                <div class="vuetab clearfix">
                    <ul class="fbtn clearfix" id="fbtn">
                        <li @click="prevlist()">&lt;</li>
                        <!--<li @click="jemppage($event)">1</li>-->
                        <li v-for="list in listnum" @click="jemppage(list)">{{list}}</li>
                        <li @click="nextlist()">&gt;</li>
                        <div id="pages">共{{btnnum}}页</div>
                        <div id="gotoindex">到第 <input type="text" :value="jemp" v-model="jemp" id="inputnum"> 页</div>
                        <button id="gobtn" @click="goindex()">确定</button>
                    </ul>





                </div>
            </div>

</div>

说下思路:首先我们需要本地一组数据,通过vue添加到页面中,第二步我们需要做好分页,那么可以写一个函数对吧,所以有了下面的fenye(命名不规范,大虾勿怪)函数,所谓分页无非就是把一个大数据分成每个小页面去展现,所以我写了一个专门用来展现的数组,也就是yemiandata(同样不规范,我说因为我做的网站内容太多了,所以命名已经用尽了,你们信么),之后我们需要得到多少个页面,并变成一个btn按钮,为了省事,我增加了一个watch:用来监听startnum(开始页数)他变化的话就改变展现。
第三步:分页的话肯定要有上一页下一页,这个就简单多了下一页就是startnum和endnum都增加一,上一页反之。
第四步:也要有点击页数的按钮进行跳转,这个也不难,就是让按钮点下去跳转到指定页,但是去写函数么?不现实对吧,所以我用了一个数组listnum存放多少个按钮,这里解释下为什么不用变量用数组,因为vue中v-for不支持变量循环,所以我改用数组,方便前面html生成节点。
第五步说了需要做筛选,筛选的话就是吧需要展现的素组变成包含制定关键词的,filters函数,利用js的filter和includes进行筛选,做完看看,失败了,出现了很多undefind,为什么?仔细看看没有重置数组,导致第二次筛选是在第一次筛选完的基础筛选。那就重置一下咯,再看看,搞定!
大体思路就是这样,有不明白的小伙伴可以添加我qq:421217189.

        最后因为是自己公司的项目所以有部分代码是我公司项目需要,例如下啦框,css代码就不进行分享了。小伙伴们自行发挥。有任何不明白的可以讨论

今天项目需要一份根据本地数据的筛选分页功能,好吧,本来以为很简单,网上搜了搜全是a...

什么是数据驱动

数据驱动是vuejs最大的特点。在vuejs中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom。

比如说我们点击一个button,需要元素的文本进行是和否的切换。在jquery刀耕火种的年代中,对于页面的修改我们一般是这样的一个流程,我们对button绑定事件,然后获取文案对应的元素dom对象,然后根据切换修改该dom对象的文案值。

竞博体育app下载 ,而对于vuejs实现这个功能的流程,只需要在button元素上指明事件,同时声明对应文案的属性,点击事件的时候改变属性的值,对应元素的文本就能够自动的进行切换,我们不需要像以前那样手动的操作dom。

简而言之,就是vuejs帮我们封装了数据和dom对象操作的映射,我们只需要关心数据的逻辑处理,数据的变化就能够自然的通知页面进行页面的重新渲染。

这样做的确实给我们带来的好处,我们不需要再在代码中频繁地去操作dom了,在实际项目中,我们有很大部分代码都是在数据修改以后,手动操作重新渲染页面元素,当页面越来越复杂的时候,页面代码组织会越来难以维护。同时,js对dom的频繁操作,会使得页面代码的出错概率高,页面的视图展示会融合在js代码中,对于页面视图显示的升级也不友好。

那么vuejs是如何实现这种数据驱动的呢?

MVVM框架

Vuejs的数据驱动是通过MVVM这种框架来实现的。MVVM框架主要包含3个部分:model、view和 viewmodel。

Model:指的是数据部分,对应到前端就是javascript对象

View:指的是视图部分,对应前端就是dom

Viewmodel:就是连接视图与数据的中间件

竞博体育app下载 2

数据(Model)和视图(View)是不能直接通讯的,而是需要通过ViewModel来实现双方的通讯。当数据变化的时候,viewModel能够监听到这种变化,并及时的通知view做出修改。同样的,当页面有事件触发时,viewMOdel也能够监听到事件,并通知model进行响应。Viewmodel就相当于一个观察者,监控着双方的动作,并及时通知对方进行相应的操作。

Vuejs的数据驱动实现

对于数据驱动的实现,我们可以简单的通过定时器来实现这个功能,定时器定时监控对象数据,定时器监控数据变化,确定是否更新界面

a = 1;
  function renderDom(){
    document.getElementById('app').innerHTML = '数据是' + a;
  }

  function watcher(method){
    var b = a;
    method.apply();
     return setInterval(function(){
      if(b != a){
        method.apply();
        b = a;
      }
    }, 1000)
  }
  watcher(renderDom);

当然vuejs不可能是这样简单暴力的实现方式,vuejs是通过在实现一个观察者来实现的数据驱动。

竞博体育app下载 3

首先,vuejs在实例化的过程中,会对遍历传给实例化对象选项中的data 选项,遍历其所有属性并使用 Object.defineProperty把这些属性全部转为 getter/setter。

同时每一个实例对象都有一个watcher实例对象,他会在模板编译的过程中,用getter去访问data的属性,watcher此时就会把用到的data属性记为依赖,这样就建立了视图与数据之间的联系。当之后我们渲染视图的数据依赖发生改变(即数据的setter被调用)的时候,watcher会对比前后两个的数值是否发生变化,然后确定是否通知视图进行重新渲染。

这样就实现了所谓的数据对于视图的驱动。

关于代码的实现,可以参考一下这篇文章 实现vue2.0响应式的基本思路

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 详解VueJS 数据驱动和依赖追踪分析
  • Vue数据驱动模拟实现5
  • Vue数据驱动模拟实现4
  • Vue数据驱动模拟实现2
  • Vue数据驱动模拟实现1
  • Vue数据驱动模拟实现3
  • 首页
  • 电话
  • 软件