zoukankan      html  css  js  c++  java
  • 【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',  80}
                    , {field: 'student_id', title: 'student_id',  120}
                    , {field: 'name', title: 'name',  120}
                    , {field: 'age', title: 'age',  120}
                    , {field: 'sex', title: 'sex',  120}
                    , {field: 'birthday', title: 'birthday',  120}
                    // , {field: 'CompanyName', title: '联系人公司',  120}
                    // , {field: 'AddDate', title: '留言日期',  120}
                    , {fixed: 'right', title: '操作', align: 'center', toolbar: '#toobar',  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>
    
    
  • 相关阅读:
    HDU 3572 Task Schedule(拆点+最大流dinic)
    POJ 1236 Network of Schools(Tarjan缩点)
    HDU 3605 Escape(状压+最大流)
    HDU 1166 敌兵布阵(分块)
    Leetcode 223 Rectangle Area
    Leetcode 219 Contains Duplicate II STL
    Leetcode 36 Valid Sudoku
    Leetcode 88 Merge Sorted Array STL
    Leetcode 160 Intersection of Two Linked Lists 单向链表
    Leetcode 111 Minimum Depth of Binary Tree 二叉树
  • 原文地址:https://www.cnblogs.com/kikyoqiang/p/12820358.html
Copyright © 2011-2022 走看看