<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表格和弹出框的简单示例的更多相关文章
	

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

	


随机推荐
	

    
									
  1. 基于python的快速傅里叶变换FFT（二）
			
    基于python的快速傅里叶变换FFT(二)本文在上一篇博客的基础上进一步探究正弦函数及其FFT变换. 知识点  FFT变换,其实就是快速离散傅里叶变换,傅立叶变换是数字信号处理领域一种很重要的算法. ...
    
			
    2. 
						
  2. Centos7下chkconfig设置MySql自动启动
			
    1.将服务文件拷贝到init.d下,并重命名为mysql cp /usr/local/mysql/support-files/mysql.server /etc/init.d/mysql 2.赋予可执 ...
    
			
    3. 
						
  3. sql server 2008R2无人值守批处理脚本自动化安装
			
    ▲版权声明:本文为博主原创文章,未经博主允许不得转载. Microsoft SQL Server 2008 R2是一款软件,提供完整的企业级技术与工具,帮助您以最低的总拥有成本获得最有价值的信息.您可 ...
    
			
    4. 
						
  4. fedora更新
			
    先换源再更新,否则等的太久,如果已经开始了直接ctrl+c取消 # dnf update
    
			
    5. 
						
  5. Win10上启动UICrawler自动遍历时报 "org.openqa.selenium.WebDriverException: An unknown server-side error occur red while processing the command. Original error: Could not sign with default certifi cate."
			
    操作步骤: 1.直接启动 Appium (我用的是 version 1.10.0) 2.打开命令窗口,切换到 UICrawler 所在路径 3.执行命令 java -jar UICrawler-2.2 ...
    
			
    6. 
						
  6. 离线安装Cloudera Manager 5和CDH5(最新版5.9.3) 完全教程（六）CM的安装
			
    一.角色分配 Cloudera Manager Agent:向server端报告当前机器服务状态. Cloudera Manager Server:接受agent角色报告服务状态,以视图界面展现,方便 ...
    
			
    7. 
						
  7. MetaMask/safe-event-emitter
			
    https://github.com/MetaMask/safe-event-emitter safe-event-emitter An EventEmitter that isolates the  ...
    
			
    8. 
						
  8. Oracle 11g中的snapshot standby特性
			
    在Oracle 11g中,data guard最吸引人的,除了active data guard的实时查询特性(即可以以只读方式打开物理standby数据库的同时MRP进程能继续做recover),快 ...
    
			
    9. 
						
  9. Java相关框架资料及其基础资料、进阶资料、测试资料之分享
			
    个人说明:只为分享,不为其他,愿所有的程序员们在编程的世界自由翱翔吧! 在我看来,只有不断实战,不断学习,不断积累,不断归纳总结,形成自己的核心竞争力,方能在未来竞争中脱颖而出! 程序员谨记!重要的事 ...
    
			
    10. 
						
  10. csvwrite
			
    https://ww2.mathworks.cn/help/matlab/ref/csvwrite.html
    
			
    11.