AvalonJs入门二复选框全选反选+layui分页

来源：互联网发布：linux 桌面 2017 编辑：程序博客网时间：2024/05/17 02:51

前言

今天给大家带来初识Avalon的第二篇文章，复选框的全选操作和Avalon+layUI的分页。

Demo1：神奇的全选反选

Avalon的双工绑定duplex和监听事件$watch

第一篇文章的第一个例子大家是否还记得，文本框输入什么内容，下面的页面就显示什么内容，这里就用到了Avalon的双工绑定。那什么是双工绑定呢，就是avalon定义的变量和表单中的value值进行绑定，就像连体婴儿一样，无论哪一个值发生变化，其他的值都会跟着发生改变。

我们都知道，复选框也是有value值的，所有的复选框的值组合起来，就是一个数组，那我们想一想，选中复选框的值组成的数组的长度，如果等于复选框的个数，那么是不是就代表复选框全部选中了呢；如果我们点击全选按钮，将全部复选框的值都赋给选中复选框组成的数组，那么是不是就将复选框全部选中了呢。顺着这个思路，我们往下想：

1.那么在avalon里，我们就要定义出这个数组

2.接着我们再想，全选的状态是不是需要一个变量表示，false表示没有全选，true表示已经全选，如果值为true，那全选按钮是选中状态，为false则反之。

3.然后，怎么样才能在点击全选的时候，把复选框全部的值赋给上面的checkBoxSel呢，我们是不是又需要定义一个数组，装全部的复选框的值。

4.好，变量定义完了，那我们是不是要定义一个方法：点击全选的时候，所有的复选框选中，再次点击的时候，所有的复选框不选中。

5.再想想，我们还需要定义一个监听事件，监听选中复选框的数量的变化，如果选中复选框的长度等于总个数，那么全选选中，否则没有全选。

这里要引入avalon的$watch事件，就是avalon会自动监听自己变量的变化，如果变量有变化，则会调用我们定义的方法：

6.还记得我们定义了一个数组，表示所有复选框的值吗，在加载表格数据的时候，给这个复选框赋予所有复选框的值：

7.HTML标签加上avalon的属性

到此我们的编码就完成了，看一下效果吧

Demo2：avalon+layui分页

Layui算是国内比较出名的前台样式模板了，她的作者贤心更是一名充满情怀和少女心的壮汉...

Layui的官网

http://www.layui.com/

希望大家多支持国内的作者

1.导入layui的js文件和css文件：

2.定义一个分页的div层：

3.初始化分页插件：

效果图如下：

源码：

<!DOCTYPE html><html lang="cn"><head>    <meta charset="UTF-8">    <title>AvalonDemo4</title>    <script src="js/jquery-1.9.1.min.js"></script>    <script src="js/avalon.shim.js"></script>    <script src="layui/layui.js"></script>    <link rel="stylesheet" href="layui/css/layui.css"></head><body ms-controller="AvalonDemo"><div style="width: 800px">    <table class="layui-table">        <colgroup>            <col width="100">            <col width="100">            <col>        </colgroup>        <thead>        <tr>            <th><input type="checkbox" ms-duplex-checked="ifAllSelect" ms-click="allSelectClick"><span>全选</span></th>            <th>编号</th>            <th>昵称</th>            <th>性别</th>            <th>签名</th>        </tr>        </thead>        <tbody>        <tr ms-repeat-el="tableData">            <td><input type="checkbox" ms-attr-value="el.stuNum" ms-duplex="checkBoxSel"></td>            <td>{{el.stuNum}}</td>            <td>{{el.name}}</td>            <td>{{el.sex}}</td>            <td>人生就像是一场修行</td>        </tr>        </tbody>    </table>    <div id="layUIPage"></div></div></body><script type="application/javascript">    //avalon初始化    var vm = avalon.define({        $id:"AvalonDemo",        tableData:[],  //初始化数组,用来接收表格数据        currentPage:1, //初始化页码，默认显示第一页        totalPage:1,   //初始化总页数，默认为1        ifAllSelect:false,//全选标记，默认为fasle，没有全选        checkBoxData:[],  //所有的复选框        checkBoxSel:[],   //已选中的复选框        allSelectClick:function () {   //全选点击事件            if(vm.ifAllSelect == true){                vm.checkBoxSel = vm.checkBoxData;     //如果全选选中，则已选中复选框等于全部复选框            }else{                vm.checkBoxSel = [];    //如果取消全选，所有已经中的复选框清空            }        }    });    vm.$watch("checkBoxSel.length",function () {  //监听已选中复选框的数量的变化        if (vm.checkBoxData.length == vm.checkBoxSel.length){            vm.ifAllSelect=true;    //如果已选中的复选框的数量和全部的复选框的数量一样，则为全选        }else {            vm.ifAllSelect=false;   //反之为非全选        }    });    //Avalon定义结束    //加载表单数据方法    function loadTableData(){        var strData={"currentPage":vm.currentPage};        $.ajax({            type:"post",            data:strData,            url:"showData.action",            success:function (data) {                vm.tableData=data.stuList;  //表格数据                vm.totalPage=data.totalPages;   //总页数                //给复选框初始化                for(var i=0; i<data.stuList.length; i++){                    vm.checkBoxData.push(data.stuList[i].stuNum.toString());                }                layui.use(['laypage', 'layer'], function() {                    var laypage = layui.laypage                        , layer = layui.layer;                    laypage({                        cont: 'layUIPage'                        ,pages: vm.totalPage //总页数                        ,groups: 5  //连续显示分页数                        ,curr : vm.currentPage    //当前页                        ,skin : '#d2d2d2'                        ,jump: function(obj,first) {                            if (!first) {                                vm.currentPage=obj.curr;                                loadTableData();                            }                        }                    });                });            }        });    }    loadTableData();</script></html>

源码下载地址：

http://download.csdn.net/download/u014701246/9897738

阅读全文

0 0

AvalonJs入门二 复选框全选反选+layui分页

前言

Demo1：神奇的全选反选

Avalon的双工绑定duplex和监听事件$watch

Demo2：avalon+layui分页

AvalonJs入门二复选框全选反选+layui分页