分页

模块加载名称:laypage

快速使用

​ laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染。



    
        
        分页
        
    
    
        
基础参数

通过核心方法:laypage.render(options) 来设置基础参数。

参数选项 说明 类型 默认值
elem 指向存放分页的容器,值可以是容器ID、DOM对象。如: 1. elem: 'id' 注意:这里不能加 # 号 2. elem: document.getElementById('id') String/Object -
count 数据总数。一般通过服务端得到 Number -
limit 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。 Number 10
limits 每页条数的选择项。如果 layout 参数开启了 limit,则会出现每页条数的select选择框 Array [10, 20, 30, 40, 50]
curr 起始页。一般用于刷新类型的跳页以及HASH跳页。如:
// 开启location.hash的记录
laypage.render({
elem: 'test1' ,
count: 500 ,
// 获取起始页
curr: location.hash.replace('#!fenye=', '')
// 自定义hash值
,hash: 'fenye'
}); `
Number 1
groups 连续出现的页码个数 Number 5
prev 自定义“上一页”的内容,支持传入普通文本和HTML String 上一页
next 自定义“下一页”的内容,同上 String 下一页
first 自定义“首页”的内容,同上 String 1
last 自定义“尾页”的内容,同上 String 总页数值
layout 自定义排版。可选值有:count(总条目输区域)、prev(上一页区域)、page(分页区域)、next(下一页区域)、limit(条目选项区域)、refresh(页面刷新区域。注意:layui 2.3.0 新增) 、skip(快捷跳页区域) Array ['prev', 'page', 'next']
theme 自定义主题。支持传入:颜色值,或任意普通字符。如: 1. theme: '#c00' 2. theme: 'xxx' //将会生成 class="layui-laypage-xxx" 的CSS类,以便自定义主题 String -
hash 开启location.hash,并自定义 hash 值。如果开启,在触发分页时,会自动对url追加:#!hash值={curr} 利用这个,可以在页面载入时就定位到指定页 String/Boolean false
jump - 切换分页的回调

当分页被切换时触发,函数返回两个参数:obj(当前分页的所有选项值)、first(是否首次,一般用于初始加载的判断)

laypage.render({
    elem: 'page'
    ,count: 100 //数据总数,从服务端得到
    ,groups:10 // 连续出现的页码个数
    ,layout:['prev', 'page', 'next','limit','count'] // 自定义排版
    ,limits:[5,10,20] // layout属性设置了limit值,可会出现条数下拉选择框
    ,jump: function(obj, first){
        // obj包含了当前分页的所有参数,比如:
        console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
        console.log(obj.limit); //得到每页显示的条数

        //首次不执行
        if(!first){
            //do something
        }
    }
});

数据表格

模块加载名称:table

快速使用

​ 创建一个table实例最简单的方式是,在页面放置一个元素

,然后通过 table.render() 方法指定该容器。



    
      
      table数据表格
      
    
    
        

数据接口 user.json

{
    "code": 0,
    "msg": "",
    "count": 50,
    "data": [{
            "id": 10000,
            "username": "user-0",
            "sex": "女",
            "city": "城市-0",
            "sign": "签名-0"          
        },
        {
            "id": 10001,
            "username": "user-1",
            "sex": "男",
            "city": "城市-1",
            "sign": "签名-1"
        },
        {
            "id": 10002,
            "username": "user-2",
            "sex": "女",
            "city": "城市-2",
            "sign": "签名-2"
        },
        {
            "id": 10003,
            "username": "user-3",
            "sex": "女",
            "city": "城市-3",
            "sign": "签名-3"
        },
        {
            "id": 10004,
            "username": "user-4",
            "sex": "男",
            "city": "城市-4",
            "sign": "签名-4"
        }

    ]
}
三种初始化渲染方式
机制 适用场景
方法渲染 用JS方法的配置完成渲染 (推荐)无需写过多的 HTML,在 JS 中指定原始元素,再设定各项参数即可。
自动渲染 HTML配置,自动渲染 无需写过多 JS,可专注于 HTML 表头部分
转换静态表格 转化一段已有的表格元素 无需配置数据接口,在JS中指定表格元素,并简单地给表头加上自定义属性即可
方法渲染
  1. 将基础参数的设定放在了JS代码中,且原始的 table 标签只需要一个选择器

  2. 渲染表格

    layui.use('table', function(){
        var table = layui.table;
    
        // 执行渲染
        table.render({
           elem: '#demo' // 指定原始表格元素选择器(推荐id选择器)
           ,url: 'user.json' // 数据接口
           ,height: 315 // 容器高度
           ,page:true // 开启分页
           ,cols: [[  // 设置表头
               {field: 'id', title: 'ID'}
               ,{field: 'username', title: '用户名'}
               ,{field: 'sex', title: '性别'}
           ]]
        });   
    });

    注:table.render()方法返回一个对象:var tableIns = table.render(options),可用于对当前表格进行“重载”等操作。

自动渲染

​ 在一段 table 容器中配置好相应的参数,由 table 模块内部自动对其完成渲染,而无需你写初始的渲染方法。

​ 1) 带有 class="layui-table"

标签。
​ 2) 对标签设置属性 lay-data="" 用于配置一些基础参数
​ 3) 在
标签中设置属性lay-data=""用于配置表头信息

ID 用户名 性别
转换静态表格

​ 页面已经存在了一段有内容的表格,由原始的table标签组成,只需要赋予它一些动态元素。

昵称 积分 签名
贤心1 66 人生就像是一场修行a

执行用于转换表格的JS方法

layui.use('table', function(){
    var table = layui.table;

    // 转换静态表格
    table.init('demo', {
        height: 315 // 设置高度
        // 支持所有基础参数
    }); 

});
基础参数使用的场景
// 场景一:下述方法中的键值即为基础参数项
table.render({
  height: 300
  ,url: 'user.json'
});

// 场景二:下述 lay-data 里面的内容即为基础参数项,切记:值要用单引号
 …… 
// 更多场景:下述 options 即为含有基础参数项的对象 > table.init('filter', options); // 转化静态表格 > var tableObj = table.render({}); tableObj.reload(options); // 重载表格
开启分页

// JS实现代码 
layui.use('table', function(){
    var table = layui.table;

    // 执行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素选择器(推荐id选择器)
        ,url: 'user.json' // 数据接口
        ,height: 315 // 容器高度
        ,page:true // 开启分页
        ,cols: [[  // 设置表头
            {field: 'id', title: 'ID'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'sex', title: '性别'}
        ]]
    });   
});
开启头部工具栏
layui.use('table', function(){
    var table = layui.table;

    // 执行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素选择器(推荐id选择器)
        ,url: 'user.json' // 数据接口
        ,height: 315 // 容器高度
        ,page:true // 开启分页
        ,cols: [[  // 设置表头
            {field: 'id', title: 'ID'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'sex', title: '性别'}
            ,{title:'操作', toolbar: '#barDemo'} // 绑定表头工具栏
        ]]
        ,toolbar: '#toolbarDemo' // 开启头部工具栏,并为其绑定左侧模板
    });  

    /**
      * 头工具栏事件
      * 语法:
            table.on('toolbar(demo)', function(obj){

            });
            注:demo表示选择器元素上设置的lay-filter属性值
      */
    table.on('toolbar(demo)', function(obj){
        // obj.config.id 当前选择器的id属性值,即demo
        // 获取当前表格被选中的记录对象,返回数组
        var checkStatus = table.checkStatus(obj.config.id);
        // obj.event 得到当前点击元素的事件名
        switch(obj.event){ 
            case 'getCheckData':
                // 获取被选中的记录的数组
                var data = checkStatus.data;
                // 将数组数据解析成字符串
                layer.alert(JSON.stringify(data));
                break;
            case 'getCheckLength':
                var data = checkStatus.data;
                layer.msg('选中了:'+ data.length + ' 个');
                break;
            case 'isAll':
                // checkStatus.isAll 判断记录是否被全选
                layer.msg(checkStatus.isAll ? '全选': '未全选');
                break;
                // 自定义头工具栏右侧图标 - 提示
            case 'LAYTABLE_TIPS':
                layer.alert('这是工具栏右侧自定义的一个图标按钮');
                break;
        };
    });

    /**
      * 监听行工具事件
      */
    table.on('tool(demo)', function(obj){
        // 得到当前操作的tr的相关信息
        var data = obj.data;
        if(obj.event === 'del'){
            // 确认框
            layer.confirm('真的删除行么', function(index){
                // 删除指定tr
                obj.del();
                // index 当前弹出层的下标,通过下标关闭弹出层
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            // 输入框
            layer.prompt({
                // 表单元素的类型 0=文本框 1=密码框 2=文本域 
                formType: 0
                ,value: data.username 
            }, function(value, index){
                // 修改指定单元格的值
                // value表示输入的值
                obj.update({
                    username: value
                });
                // 关闭弹出层
                layer.close(index);
            });
        }
    });

});
开启单元格编辑
ID ID 用户名 性别 城市 积分
layui.use('table', function(){
    var table = layui.table;

    // 监听单元格编辑
    table.on('edit(demo)', function(obj){
        var value = obj.value // 得到修改后的值
        ,data = obj.data // 得到所在行所有键值
        ,field = obj.field; // 得到字段
        layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为:'+ value);
    });

});
数据表格的重载
搜索ID:
layui.use('table', function(){
    var table = layui.table;
    var $ = layui.jquery; // 获取jquery对象

    // 执行渲染
    table.render({
        elem: '#demo' // 指定原始表格元素选择器(推荐id选择器)
        ,url: 'user.json' // 数据接口
        ,page:true // 开启分页
        ,cols: [[  // 设置表头
            {type: 'checkbox', fixed: 'left'} // 设置复选框
            ,{field: 'id', title: 'ID'}
            ,{field: 'username', title: '用户名'}
            ,{field: 'sex', title: '性别'}
        ]]
    });  

    // 给指定元素绑定事件
    $(document).on('click', '#searchBtn', function(data) {
        // 获取搜索框对象
        var demoReload = $('#demoReload');
        table.reload('demo', {
            where: { // 设定异步数据接口的额外参数,任意设
                id: demoReload.val()
            }
            ,page: {
                // 让条件查询从第一页开始查询,不写则从当前页开始查询,此页之前的数据将不纳入条件筛选
                curr: 1 // 重新从第 1 页开始
            }
        }); // 只重载数据
    });
});

你可能感兴趣的:(java)