【Layui__表格】方法级渲染表格

方法级渲染表格

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<meta content="text/html" charset="utf-8">
<link rel="stylesheet" href="${APP_PATH}/static/layui-v2.5.6/css/layui.css" media="all"/>
<body>
<div class="layui-fluid">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                <button class="layui-btn" onclick="openAdd()"><i class="layui-icon"></i>添加</button>
                <button class="layui-btn" onclick="reload()"><i class="layui-icon"></i>重载表格</button>
            </div>
            <div class="layui-card-body">
                <table id="tableId" class="layui-table layui-form" lay-filter="tableFilter"></table>
            </div>
        </div>
    </div>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="${APP_PATH}/static/layui-v2.5.6/layui.js"></script>
<script type="text/html" id="toobar">
    <a class="layui-btn layui-btn-xs layui-hide" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    var public_closeTimeout = 1000;// 关闭窗口时间
    var public_closeTimeout_error = 2000;// 关闭窗口时间
    var public_shade = 0.3;// 遮罩
    var public_anim = 3;// 动画模式
    var form, table, layer, element, layedit, laydate, upload, colorpicker;
    layui.use(['element', 'form', 'layedit', 'laydate', 'upload', 'colorpicker', 'table', 'layer'], function () {
        form = layui.form;
        table = layui.table;
        layer = layui.layer;
        element = layui.element;
        layedit = layui.layedit;
        laydate = layui.laydate;
        upload = layui.upload;
        colorpicker = layui.colorpicker;
 
        table.render({
            elem: '#tableId'
            , url: '${APP_PATH}/student/datagrid'
            , method: 'POST'    //方式
            , page: true    //是否开启分页
            , limits: [10, 20, 30, 60, 90, 100]
            , limit: 10      //默认采用20
            , cellMinWidth: 120
            , even: true    //开启隔行背景
            , id: 'reloadId'
            , done: function (res, curr, count) {
                console.log("=====加载后回调");
                console.log(res);
                //layer.close(index);//关闭
            }
            , cols: [[      //标题栏
                //{ checkbox: false }
                {field: 'id', title: 'ID', width: 80}
                , {field: 'student_id', title: 'student_id', width: 120}
                , {field: 'name', title: 'name', width: 120}
                , {field: 'age', title: 'age', width: 120}
                , {field: 'sex', title: 'sex', width: 120}
                , {field: 'birthday', title: 'birthday', width: 120}
                // , {field: 'CompanyName', title: '联系人公司', width: 120}
                // , {field: 'AddDate', title: '留言日期', width: 120}
                , {fixed: 'right', title: '操作', align: 'center', toolbar: '#toobar', width: 200}
            ]]
        });
 
        //监听工具条
        table.on('tool(tableFilter)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            console.log("获得当前行数据 ==");
            console.log(data);
            console.log("layEvent==" + layEvent);
            if (layEvent === 'detail') {
            } else if (layEvent === 'del') {
                openDelete(tr.id);
            } else if (layEvent === 'edit') {
                openEdit(data);
            }
        });
    });//layui.use end
 
    function openAdd() {
        layer.open({
            type: 2,
            title: '新增',
            shadeClose: false,//点击遮罩关闭
            anim: public_anim,
            btnAlign: 'c',
            shade: public_shade,//是否有遮罩，可以设置成false
            maxmin: true, //开启最大化最小化按钮
            area: ['800px', '600px'],
            //area: ['100%', '100%'],
            boolean: true,
            content: ['${APP_PATH}/student/add', 'yes'], //iframe的url，no代表不显示滚动条
            success: function (layero, lockIndex) {
                var body = layer.getChildFrame('body', lockIndex);
                //绑定解锁按钮的点击事件
                body.find('button#close').on('click', function () {
                    layer.close(lockIndex);
                    location.reload();//刷新
                });
            }
        });
    }
 
    function openEdit(data) {
        layer.open({
            type: 2,
            title: '修改',
            shadeClose: false,//点击遮罩关闭
            anim: public_anim,
            btnAlign: 'c',
            shade: public_shade,//是否有遮罩，可以设置成false
            maxmin: true, //开启最大化最小化按钮
            //area: ['100%', '100%'],
            area: ['800px', '600px'],
            boolean: true,
            content: ['${APP_PATH}/student/edit?obj=' + encodeURIComponent(JSON.stringify(data)), 'yes'], //iframe的url，no代表不显示滚动条
            success: function (layero, lockIndex) {
                var body = layer.getChildFrame('body', lockIndex);
                body.find('button#close').on('click', function () {     //绑定解锁按钮的点击事件
                    layer.close(lockIndex);
                    location.reload();//刷新
                });
            }
        });
    }
 
    function openDelete(id) {
        layer.open({
            title: '确认删除' //显示标题栏
            , closeBtn: false
            , area: '300px;'
            , shade: 0.5
            , id: 'LAY_layuipro' //设定一个id，防止重复弹出
            , btn: ['删除', '关闭']
            , content: '您是否要删除当前选中的记录？'
            , success: function (layero) {
                var btn = layero.find('.layui-layer-btn');
                btn.css('text-align', 'center');//居中
                btn.find('.layui-layer-btn0').on('click', function () {
                    var loadindex = layer.load(1);//开启进度条
                    layer.msg("删除成功", {icon: 1, time: 1000});
                    location.reload();//刷新
 
                    return false;
                    $.ajax({
                        url: '${APP_PATH}/student/delete',
                        data: {id: id},
                        type: 'POST',//默认以get提交，以get提交如果是中文后台会出现乱码
                        dataType: 'json',
                        success: function (obj) {
                            console.log(obj);
                            layer.close(loadindex);//关闭进程对话框
                            if (obj.code == '1') {
                                layer.msg("成功", {icon: 1, time: 1000});
                                setTimeout(function () {
                                    location.reload();//刷新
                                }, 1000);
                            } else {
                                layer.msg(obj.msg, {icon: 2, time: 1000});
                            }
                        }
                    });
                });
            }
        });
    }
 
    function reload() {
        table.reload('reloadId', {
            url: '${APP_PATH}/student/search'
            , where: {aaa: 'xxx', bbb: 'yyy'}   //设定异步数据接口的额外参数，任意设
            , page: {curr: 1}   //重新从第 1 页开始
        }); //只重载数据
    }
 
    function execute_open(title, url, width, height) {
        layer.open({
            type: 2,
            title: '' + title + '',
            shadeClose: true,
            shade: 0.8,
            area: ['' + width + 'px', '' + height + 'px'],
            content: '' + url + '',
        });
    }
</script>
</body>
</html>
posted @   一只桔子2233  阅读(636)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示