layui表格和弹出框的简单示例

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

   <title>demo</title>

<link rel="stylesheet" href="../Js/Content/layui/css/layui.css" />

</head>

<body>

    <div style="margin:20px">

        <table class="layui-hide" id="demo" lay-filter="demoFilter"></table>

    </div>

    <div class="editDiv" style="display:none;">

        <form class="layui-form" action="">

            <div class="layui-form-item">

                <label class="layui-form-label">单行输入框</label>

                <div class="layui-input-block">

                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">

                </div>

            </div>

            <div class="layui-form-item">

                <label class="layui-form-label">验证必填项</label>

                <div class="layui-input-block">

                    <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">

                </div>

            </div>

            <div class="layui-form-item">

                <div class="layui-inline">

                    <label class="layui-form-label">验证手机</label>

                    <div class="layui-input-inline">

                        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">

                    </div>

                </div>

                <div class="layui-inline">

                    <label class="layui-form-label">验证邮箱</label>

                    <div class="layui-input-inline">

                        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">

                    </div>

                </div>

            </div>

            <div class="layui-form-item">

                <div class="layui-input-block">

                    <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>

                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>

                </div>

            </div>

        </form>

    </div>

    <script type="text/html" id="tableLastTd">

        <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 src="../Js/jquery.min.js"></script>

    <script src="../Js/Content/layui/layui.js"></script>

    <script>

    layui.use('table', function(){

        var table = layui.table;

        //展示已知数据

        table.render({

            elem: '#demo'

          ,cols: [[ //标题栏

            {field: 'id', title: 'ID', width: 80, sort: true}

            ,{field: 'username', title: '用户名', width: 120}

            ,{field: 'email', title: '邮箱', minWidth: 150}

            ,{field: 'sign', title: '签名', minWidth: 160}

            ,{field: 'sex', title: '性别', width: 80}

            ,{field: 'city', title: '城市', width: 100}

            , { field: 'experience', title: '积分', width: 80, sort: true }

            , { field: 'set', title: '操作', templet: "#tableLastTd", width: 180 }

          ]]

          ,data: [{

              "id": "10001"

            ,"username": "杜甫"

            ,"email": "xianxin@layui.com"

            ,"sex": "男"

            ,"city": "浙江杭州"

            ,"sign": "人生恰似一场修行"

            ,"experience": "116"

            ,"ip": "192.168.0.8"

            ,"logins": "108"

            ,"joinTime": "2016-10-14"

          }, {

              "id": "10002"

            ,"username": "李白"

            ,"email": "xianxin@layui.com"

            ,"sex": "男"

            ,"city": "浙江杭州"

            ,"sign": "人生恰似一场修行"

            ,"experience": "12"

            ,"ip": "192.168.0.8"

            ,"logins": "106"

            ,"joinTime": "2016-10-14"

            ,"LAY_CHECKED": true

          }, {

              "id": "10003"

            ,"username": "王勃"

            ,"email": "xianxin@layui.com"

            ,"sex": "男"

            ,"city": "浙江杭州"

            ,"sign": "人生恰似一场修行"

            ,"experience": "65"

            ,"ip": "192.168.0.8"

            ,"logins": "106"

            ,"joinTime": "2016-10-14"

          }, {

              "id": "10004"

            ,"username": "贤心"

            ,"email": "xianxin@layui.com"

            ,"sex": "男"

            ,"city": "浙江杭州"

            ,"sign": "人生恰似一场修行"

            ,"experience": "666"

            ,"ip": "192.168.0.8"

            ,"logins": "106"

            ,"joinTime": "2016-10-14"

          }, {

              "id": "10005"

            ,"username": "贤心"

            ,"email": "xianxin@layui.com"

            ,"sex": "男"

            ,"city": "浙江杭州"

            ,"sign": "人生恰似一场修行"

            ,"experience": "86"

            ,"ip": "192.168.0.8"

            ,"logins": "106"

            ,"joinTime": "2016-10-14"

          }, {

              "id": "10006"

            ,"username": "贤心"

            ,"email": "xianxin@layui.com"

            ,"sex": "男"

            ,"city": "浙江杭州"

            ,"sign": "人生恰似一场修行"

            ,"experience": "12"

            ,"ip": "192.168.0.8"

            ,"logins": "106"

            ,"joinTime": "2016-10-14"

          }, {

              "id": "10007"

            ,"username": "贤心"

            ,"email": "xianxin@layui.com"

            ,"sex": "男"

            ,"city": "浙江杭州"

            ,"sign": "人生恰似一场修行"

            ,"experience": "16"

            ,"ip": "192.168.0.8"

            ,"logins": "106"

            ,"joinTime": "2016-10-14"

          }, {

              "id": "10008"

            ,"username": "贤心"

            ,"email": "xianxin@layui.com"

            ,"sex": "男"

            ,"city": "浙江杭州"

            ,"sign": "人生恰似一场修行"

            ,"experience": "106"

            ,"ip": "192.168.0.8"

            ,"logins": "106"

            ,"joinTime": "2016-10-14"

          }]

            //,skin: 'line' //表格风格

          ,even: true

            //,page: true //是否显示分页

            //,limits: [5, 7, 10]

            //,limit: 5 //每页默认显示的数量

        });

        table.on('tool(demoFilter)', function (obj) {

            if (obj.event === 'del') {

                layer.confirm('确定要删除该条数据吗', function (index) {

                    layer.msg("正在删除啦....", { icon: 1, time: 1000 });

                    return;

                });

            } else if (obj.event === "edit") {

                layer.open({

                    title: '编辑此条信息',

                    type: 1,

                    move: false,

                    content: $('.editDiv'),

                    area: ['90%', '90%'],

                    resize: false,

                    scrollbar: false

                });

            }

        })

    });

    </script>

</body>

</html>

layui表格和弹出框的简单示例的更多相关文章

使用DIV弹出框的代码示例，备忘。
1.思路使用DIV模拟弹出框,一共用三个div: divWindow: 原来的界面内容区域 divLogin:要弹出的内容区域 divBackground:给弹出内容区域做个遮罩的区域. 点击 “请 ...
layui layer.open弹出框获取不了 input框的值
layer.open({ title:'添加管理员', type: 1, content: $('.add_html').html(), btn:['添加', '取消'], btnAlign:'c', ...
css超简单实现div页面居中【适合做弹出框】
1.前言现在项目中用到弹出框的话大部分都是直接用控件的.不过有控件虽方便,但有时候会有冲突的地方.我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋 ...
js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .
js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...
自设table表格，获取内容，并经弹出框的url传参,获取结果显示在弹出框,并加载合计
table表格,选择框 form id="editForm1"> <table class="table_form"> <td > ...
代码录播：jQueryMobile 实现一个简单的弹出框效果
今天给大家带来的是 jQueryMobile 实现一个简单的弹出框效果,有兴趣的童鞋可以试试哦~ ^_^ 阅读原文:www.gbtags.com
Layui 好用的弹出框
layui的下载地址: http://www.layui.com/ 需要引用layui里面的css跟js layui自带jquery var $ = layui.$ 一个直接弹出另一个窗体的弹出框 w ...
easyui tree datagrid动态添加表头和表格数据，动态弹出框，修改和删除按钮
1.要有获取表头的URL和表格的URL 背景:点击树的一个节点,就加载一个表格,这个表格是动态的,表头和表格数据都是动态的解决方案:需要两个URL,一个是获取表头的URL,一个是获取表格数据的URL ...
JavaScript 实现简单的弹出框关闭框
JavaScript 实现简单的弹出框关闭框知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素代码献上: & ...

随机推荐

C#中的console类输入输出功能
Console.WriteLine() 直接将括号内内容显示在控制台界面中(相当于C语言printf()吧) Console.ReadLine()获取控制台用户自己输入的内容(功能和C语言scanf( ...
Apache的配置详解带图
对Apache 的 Http.conf 各项配置详解 1.01 ServerRoot 配置 [ServerRoot "" 主要用于指定 Apache 的安装路径,此选项参数值在安装 ...
windwos安装RabbitMQ
目录 windows 安装RabbitMQ 安装erlang 安装rabbitmq 添加windows环境变量检测rabbitmq状态启动web管理插件 rabbitmq服务 windows 安装 ...
The resource configuration is not modifiable in this context.
项目中使用了Jersey RESTful 框架, 更新代码后服务能正常起来, 在页面登录时验证码不显示后台报错 java.lang.IllegalStateException: The resour ...
Address already in use: JVM_Bind问题的解决
tomcat一般出现Address already in use: JVM_Bind的问题,可能是端口冲突,也就是端口被占用了. 这个可能是其他应用程序使用了同一个端口(默认是8080),也可能是你启 ...
attachBaseContext
at android.content.ContextWrapper.attachBaseContext(ContextWrapper.java:66) at android.view.ContextT ...
linux操作小技巧锦集
0.常用Linux命令查看端口被占用情况: 1.netstat -tunlp|grep 端口号 2.lsof -i:端口号 tar 压缩文件命令: -c:建立一个压缩文件的参数指令(create 的 ...
Ignatius and the Princess III（方案背包+搜索）
就是问你,n这个数可以被多少种方案组成. 比如: 算是,方案+完全背包的模板题了. #include<iostream> #include<cstring> using nam ...
Arduino IDE for ESP8266 项目云盒子（2）一键自配置+网页服务器
https://item.taobao.com/item.htm?spm=a230r.1.14.20.eYblO3&id=521945102409&ns=1&abbucket= ...
PCB （3）创建新工程PCB
点击完成拖进我们创建的工程中

layui表格和弹出框的简单示例

layui表格和弹出框的简单示例的更多相关文章

随机推荐

热门专题