layUI数据表格和弹出层综合案例

最新推荐文章于 2024-07-17 15:36:21 发布

zhouzhou_98

最新推荐文章于 2024-07-17 15:36:21 发布

阅读量4.4k

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/zhouzhou_98/article/details/102079026

版权

layui 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

数据表格+弹出层的综合案例【重点】

json准备

{

"code": 0,

"msg": "",

"count": 101,

"data": [

{

"id": "10001",

"username": "杜甫",

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

"sex": "1",

"city": "浙江杭州",

"LAY_CHECKED":true

{

"id": "10002",

"username": "李白",

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

"sex": "1",

"city": "浙江杭州",

"LAY_CHECKED": true

{

"id": "10003",

"username": "王勃",

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

"sex": "1",

"city": "浙江杭州"

{

"id": "10004",

"username": "李清照",

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

"sex": "0",

"city": "浙江杭州"

{

"id": "10005",

"username": "冰心",

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

"sex": "0",

"city": "浙江杭州"

{

"id": "10006",

"username": "贤心",

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

"sex": "1",

"city": "浙江杭州"

{

"id": "10007",

"username": "贤心",

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

"sex": "1",

"city": "浙江杭州"

{

"id": "10008",

"username": "贤心",

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

"sex": "1",

"city": "浙江杭州"

}

]

}

创建页面

、

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

</head>

<body>

</fieldset>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</form>

</div>

</div>

<input type="text" name="id" lay-verify="required" autocomplete="off"

class="layui-input">

</div>

<input type="text" name="username" autocomplete="off"

class="layui-input">

</div>

<input type="text" name="email" lay-verify="required|email" autocomplete="off"

class="layui-input">

</div>

<input type="text" name="city" lay-verify="required" autocomplete="off"

class="layui-input">

</div>

</div>

</div>

</form>

</div>

layui.use([ 'jquery', 'layer', 'form', 'table','laydate' ], function() {

var $ = layui.jquery;

var layer = layui.layer;

var form = layui.form;

var table = layui.table;

var laydate=layui.laydate;

//绑定时间选择器

laydate.render({

elem:'#startTime'

});

laydate.render({

elem:'#endTime'

})

//渲染数据表格

var tableIns=table.render({

elem: '#userTable' //渲染的目标对象

,url:'resources/json/users.json' //数据接口

,title: '用户数据表'//数据导出来的标题

,toolbar:"#userToolBar" //表格的工具条

,height:'full-300'

,cellMinWidth:100 //设置列的最小默认宽度

,done:function(res, curr, count){

}

,page: true //是否启用分页

,cols: [[ //列表数据

{type: 'checkbox', fixed: 'left'}

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

,{field:'username', title:'用户名', sort:true,align:'center'}

,{field:'email', title:'邮箱', align:'center', templet: function(res){

return '<em>'+ res.email +'</em>'

}}

,{field:'sex', title:'性别',align:'center',templet:function(d){

return d.sex=='1'?'男':'女';

}}

,{field:'city', title:'城市',align:'center'}

,{fixed: 'right', title:'操作', toolbar: '#userBar', width:220,align:'center'}

]]

})

//监听头部工具栏事件

table.on("toolbar(userTable)",function(obj){

switch(obj.event){

case 'add':

openAddUser();

break;

case 'batchDelete':

layer.msg('批量删除');

break;

};

})

//监听行工具事件

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

var data = obj.data; //获得当前行数据

var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

if(layEvent === 'del'){ //删除

layer.msg("删除");

layer.confirm('真的删除行么', function(index){

layer.close(index);

//向服务端发送删除指令

});

} else if(layEvent === 'edit'){ //编辑

openUpdateUser(data);

}

});

var url;

var mainIndex;

//打开添加页面

function openAddUser(){

mainIndex=layer.open({

type:1,

title:'添加用户',

content:$("#saveOrUpdateDiv"),

area:['800px','400px'],

success:function(index){

//清空表单数据

$("#dataFrm")[0].reset();

url="user/addUser.action";

}

});

}

//打开修改页面

function openUpdateUser(data){

mainIndex=layer.open({

type:1,

title:'修改用户',

content:$("#saveOrUpdateDiv"),

area:['800px','400px'],

success:function(index){

form.val("dataFrm",data);

url="user/updateUser.action";

}

});

}

//保存

form.on("submit(doSubmit)",function(obj){

//序列化表单数据

var params=$("#dataFrm").serialize();

$.post("index.jsp",params,function(obj){

layer.msg(obj);

//关闭弹出层

layer.close(mainIndex)

//刷新数据表格

tableIns.reload();

})

});

</script>

</body>

</html>

<%--

Created by IntelliJ IDEA.

User: Lenovo

Date: 2019/10/4

Time: 13:11

To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

.layer-photos-demo{margin:10px 0;}

.layer-photos-demo img{width: 160px; height: 100px;}

</style>

</head>

<body>

<%--搜索条件开始--%>

</fieldset>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</form>

<%--搜索条件结束--%>

<%--数据表格开始--%>

</table>

</button>

</button>

</button>

</button>

</div>

</div>

<%--数据表格结束--%>

<%--添加和修改的弹出层开始--%>

</div>

</div>

</div>

</div>

</div>

</div>

</form>

</div>

<%--添加和修改的弹出层结束--%>

layui.use(['element','jquery','laydate','form','layedit','table'],function () {

var $=layui.jquery;

var element=layui.element;

var laydate=layui.laydate;

var form=layui.form;

var layedit=layui.layedit;

//创建一个编辑器

var editIndex = layedit.build('LAY_demo_editor');

var table=layui.table;

//绑定时间选择器

laydate.render({

elem:'#startTime'

});

laydate.render({

elem:'#endTime'

});

//渲染表格

var tableIndex=table.render({

elem: '#userTable' //渲染的目标对象

,url:'libs/json/persons.json' //数据接口

// ,toolbar:'<div>xxxx</div>'

,toolbar: '#userToolBar' //开启头部工具栏，并为其绑定左侧模板

//,toolbar:true //表格的工具条

,defaultToolbar:['filter','exports','print']

// ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可

// title: '提示'

// ,layEvent: 'LAYTABLE_TIPS'

// ,icon: 'layui-icon-tips'

// }]

// ,height:300

// ,height:'full-300'

// ,cellMinWidth:150 //列的最小默认宽度

,done:function (res,curr,count) {

// alert(res); //后台url返回的json串

// alert(curr); //当前页

// alert(count) //数据总条数

}

,text:{

none:'暂无相关数据'

}

,totalRow:true //开启合并行

,title: '用户数据表' //数据导出的标题

,cols: [[ //列数据

{type: 'checkbox', fixed: 'left'}

,{type:'numbers',fixed: 'left'}

,{field:'id', title:'ID', fixed: 'left',sort:true}

,{field:'username', title:'用户名', edit: 'text'}

,{field:'email', title:'邮箱', edit: 'text', templet: function(res){

return '<em>'+ res.email +'</em>'

}}

,{field:'sex', title:'性别', sort: true,align:'center',templet:function (d) {

return d.sex=='1'?'男':"女";

}}

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

,{fixed: 'right', title:'操作', toolbar: '#userBar', width:250 ,align:'center'}

]]

,page: true //是否启用分页

});

//监听头部事件

table.on("toolbar(userTable)",function (obj) {

switch(obj.event){

case 'add':

openAddUser();

break;

case 'delete':

layer.msg('删除');

break;

case 'update':

break;

};

});

var url;

var mainIndex;

//打开添加页面

function openAddUser(){

mainIndex= layer.open({

type:1,

title:'添加用户',

content:$("#saveOrUpdateDiv"),

area:['600px'],

success:function (index) {

$("#dataFrm")[0].reset();

url="user/addUser";

//btnAlign:'c',

// btn:['<div class= "layui-btn-sm layui-icon layui-icon-release">保存</div>','<div class= "layui-btn-sm layui-icon layui-icon-close">关闭</div>'],

// yes:function (index,layero) {

// layer.msg("保存成功");

// },

// btn2:function (index,layero) {

// layer.msg("关闭");

// return true;

// }

});

};

//打开添加页面

function openUpdateUser(data){

layer.open({

type:1,

title:'修改用户',

content:$("#saveOrUpdateDiv"),

area:['600px'],

success:function (index) {

form.val('dataFrm',data);

url="user/updateUser";

}

//btnAlign:'c',

// btn:['<div class= "layui-btn-sm layui-icon layui-icon-release">保存</div>','<div class= "layui-btn-sm layui-icon layui-icon-close">关闭</div>'],

// yes:function (index,layero) {

// layer.msg("保存成功");

// },

// btn2:function (index,layero) {

// layer.msg("关闭");

// return true;

// }

});

};

//保存

form.on("submit(doSubmit)",function (obj) {

// alert(url);

//序列化表单数据

var params=$("#dataFrm").serialize();

$.post("index.jsp",params,function (obj) {

layer.msg(obj);

console.log(obj)

// //关闭弹出层

layer.close(mainIndex);

// //刷新数据表格

tableIndex.reload();

});

})

//监听行工具事件

table.on('tool(userTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"

var data = obj.data; //获得当前行数据

var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

//var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

if(layEvent === 'add'){ //查看

//do somehing

layer.msg("查看")

} else if(layEvent === 'del'){ //删除

layer.confirm('真的删除行么', function(index){

lay.msg("成功删除");

obj.del(); //删除对应行（tr）的DOM结构，并更新缓存

layer.close(index);

//向服务端发送删除指令

});

} else if(layEvent === 'edit'){ //编辑

//do something

layer.msg("更新成功")

//同步更新缓存对应的值

openUpdateUser(data);

} else if(layEvent === 'LAYTABLE_TIPS'){

layer.alert('Hi，头部工具栏扩展的右侧图标。');

}

});

</script>

</body>

</html>

zhouzhou_98

关注

0
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

layUI数据表格和弹出层综合案例

数据表格+弹出层的综合案例【重点】

json准备

创建页面