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

前言

  今天给大家带来初识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.初始化分页插件：

效果图如下：

源码：

    
    
    
    
    
    



    

        
            
            
            
        
        

        

            
全选
            
编号
            
昵称
            
性别
            
签名
        
        
        

        

            

            
{
     {el.stuNum}}
            
{
     {el.name}}
            
{
     {el.sex}}
            
人生就像是一场修行
        
        
    
    

源码下载地址：

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