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 追加元素 代码献上: & ...
随机推荐
- OneAPM大讲堂 | Metrics, Tracing 和 Logging 的关系
[编者按]这是在 OpenTracing 和分布式追踪领域内广受欢迎的一片博客文章.在构建监控系统时,大家往往在这几个名词和方式之间纠结. 通过这篇文章,作者很好的阐述了分布式追踪.统计指标与日志之间 ...
- 安装mysql（macos系统）
1.到官网下载,直接百度"mysql"即可找到 2.双击安装包,一路安装即可 3.然后进到系统设置 4.接下来 输入coho的用户密码 设置root用户的密码 切换root用户,v ...
- Pinyin4j实战
package com.haiyisoft.innovationcenter.pinyin; import org.junit.Test; import net.sourceforge.pinyin4 ...
- virtualenv 的使用
首先,我们用pip安装virtualenv: 一.使用与启动: $ pip3 install virtualenv 然后,假定我们要开发一个新的项目,需要一套独立的Python运行环境,可以这么做: ...
- 【PAT】B1067 试密码（20 分）
注意读取时的换行符用getchar吸收 第十个错误后直接输出锁定 #include<cstdio> #include<string.h> int main(){ char mi ...
- svn 更新
dev更新流程: 1.打开软件,文件—>打开,弹出右边对话框链接dev地址 2.在窗口输入cd /var/www/user 回车 3.输入svn up 则更新dev代码完成 本地提交到 ...
- python流程控制语句-if语句
一个if语句 if语句用来检验一个条件, 如果 条件为真,我们运行一块语句(称为 if-块 ),也就是只有一个if判断,当为真的时候就运行一块语句,否则就不运行 下面代码中的if语句控制者缩进的pri ...
- innerHTML、innerText和outerHTML、outerText的区别
区别描述如下: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取位于对象起始和结束标签内 ...
- 在环中（Going in Cycle!!, UVa 11090）
[题目描述] 给定一个 n 个点 m 条边的加权有向图,求平均权值最小的回路. [输入格式] 输入第一行为数据组数 T .每组数据第一行为图的点数 n 和边数 m (n ≤ 50).以下 m 行每行3 ...
- windos 系统文件包含
解决VS2013找不到windows.h文件方法 右键属性管理器添加 包含路径(依据sdk安装目录,我的是64位系统) C:\Program Files (x86)\Microsoft SDKs\Wi ...