【Layui】前端增删改查

于 2020-04-17 17:16:46 发布
阅读量586 收藏 2
点赞数
分类专栏： layui 文章标签： javascript html html5 前端 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/QQ1356718683/article/details/105584335
版权
本文介绍了一个使用Layui实现的前端增删改查功能的案例，包括了表格展示、富文本编辑器集成、搜索过滤、数据分页等功能。通过具体的代码示例，展示了如何结合jQuery和Layui进行数据操作和界面渲染。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

【Layui】前端增删改查（含富文本编辑器）

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>layui</title>
	<link rel="stylesheet" href="${rc.contextPath}/static/plugins/layui/css/layui.css?t=1583393622887" media="all">
	<script src="${rc.contextPath}/static/plugins/jQuery/jquery-2.1.1.min.js"></script>
	<script src="${rc.contextPath}/static/plugins/layui/layui.all.js"></script>
	<script src="${rc.contextPath}/static/plugins/edit/wangEditor.min.js"></script>
</head>
<body>
	<br/>
	<div>
		<div class="layui-inline">
			<label class="layui-form-label"><nobr>开始时间:</nobr></label>
			<div class="layui-input-inline">
				<input type="text" name="beginDate" id="beginDate" lay-verify="date" autocomplete="off" class="layui-input" readonly=true />
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label"><nobr>结束时间:</nobr></label>
			<div class="layui-input-inline">
				<input type="text" name="endDate" id="endDate" lay-verify="date" autocomplete="off" class="layui-input" readonly=true />
			</div>
		</div>
		<div class="layui-inline">
			<label class="layui-form-label"><nobr>语言:</nobr></label>
			<div class="layui-input-inline">
				<input type="text" list="languageData" name="language" lay-verify="date" autocomplete="off" class="layui-input" />
				<datalist id="languageData" lay-verify="required" lay-search="">
				</datalist>
			</div>
		</div>
	</div>
	<br/>
	<button class="layui-btn pbc_query" id="btn-submit" data-type="reload" style="margin-left:90%">搜索</button>
	<table class="layui-hide" id="LAY_table_notice" lay-filter="table_notice"></table>
</body>
<div class="layui-hide layui-btn-group" id="rowToolBar">
	<a class="layui-btn layui-btn-normal pbc_update" lay-event="edit">修改</a>
	<a class="layui-btn layui-btn-danger pbc_delete" lay-event="del">删除</a>
</div>
<script type="text/html" id="toolbar">
	<div class="layui-btn-container">
		<div class="layui-btn layui-btn-sm pbc_add" lay-event="add">新增</div>
	</div>
</script>
<script type="text/javascript">
var E = window.wangEditor;
var editor = new E('#editor');
layui.use(['form', 'table', 'laydate'], function(){
	var table = layui.table, laydate = layui.laydate, form = layui.form, $ = layui.jquery;
	
	beginDate = laydate.render({
		elem: '#beginDate',
		type: 'datetime'
	});
	endDate = laydate.render({
		elem: '#endDate',
		type: 'datetime'
	});
	
	table.render({
		elem: '#LAY_table_notice',
		url: '/xx/findxxxData',
		toolbar: '#toolbar',
		defaultToolbar: ['filter', 'print', 'exports'],
		cols: [[
			{field: 'id', title: 'ID', align:'center', width: 100},
			{field: 'language', title: '语言', align:'center', width: 100},
			{field: 'title', title: '标题', align:'center'},
			{field: 'log_date', title: '日期', templet: '<div>{{layui.util.toDateString(d.log_date,"yyyy-MM-dd HH:mm:ss")}}</div>', width:180, sort: true, align:'center'},
			{fixed: 'right', title:'功能选项', width: 300, align: 'center', toolbar: '#rowToolBar'},
		]],
		id: 'table_notice',
		page: true,
		done:function(){
			//列表完成后
		}
	});
	
	table.on('toolbar(table_notice)',function(obj){
		if (obj.event === 'add') {
			layer.open({
				type: 1,
				title: "添加",
				maxmin: true,
				area: ['900px', '650px'],
				content: $("#edit-notice"),
				success : function(layero, index) {
					editor.txt.clear();
					$("#form-edit-notice")[0].reset();
					form.render();
				}, full: function(layero, index) {
					
				}, restore: function(layero, index) {
					
				}, cancel: function () {
					
				}
			});
		}
	});
	
	//监听工具条
	table.on('tool(table_notice)', function (obj) {
		var data = obj.data;
		if (obj.event === 'del') {
			layer.confirm('删除后无法恢复，确定要删除id为'+data.id+'的数据吗？', function (index) {
				$.post('/xx/deletexx', {id:data.id}, function (data) {
					if (data.code == 200) {
						obj.del();
						layer.close(index);//关闭弹框
						layer.msg("删除成功", {icon: 6});
					} else {
						layer.msg("删除失败", {icon: 5});
					}
				})
				return false;
			});
		} else if (obj.event === 'edit') {
			layer.open({
				type: 1,
				title: "修改",
				maxmin: true,
				area: ['900px', '650px'],
				content: $("#edit-notice"),
				success : function(layero, index) {
					//可以直接在这里给修改内容赋值 完成回显的操作
					$("[name=edit_notice_id]").val(data.id);
					$("[name=edit_notice_title]").val(data.title);
					$("[name=edit_notice_language]").val(data.language);
					editor.txt.html(data.context);
					form.render();
				}, full: function(layero, index) {
					
				}, restore: function(layero, index) {
					
				}, cancel: function () {
					
				}
			});
		}
	});
	
	form.on('submit(notice_save)', function(massage) {
		var opt = 'update', formData = {}, id = $("[name=edit_notice_id]").val();
		if(id == '' || id == undefined || id == null) opt = 'add';
		formData["id"] = id;
		formData["title"] = massage.field.edit_notice_title;
		formData["context"] = editor.txt.html();
		formData["language"] = massage.field.edit_notice_language;
		$.post(opt == 'update'? '/xx/updatexxx' : '/xx/addxxx', formData, function (data) {
			if(data.code == 200){
				layer.closeAll('loading');
				layer.closeAll();//关闭所有的弹出层
				layer.msg(opt == 'update'? "修改成功" : "添加成功",{icon: 6, time:2000});
				table.reload('table_notice', {});
			}else{
				layer.msg(opt == 'update'? "修改失败" : "添加失败", {icon: 5, time: 2000});
			}
		})
		return false;
	})
	
	var $ = layui.$, active = {
		reload: function(){
			table.reload('table_notice', {
				page: {
					curr: 1 //重新从第 1 页开始
				},
				where: {
					beginDate: $("[name=beginDate]").val(),
					endDate: $("[name=endDate]").val(),
					language: $("[name=language]").val(),
				}
			}, 'data');
		}
	};
	
	form.render("select");
	$('#btn-submit').on('click', function(){
		var type = $(this).data('type');
		active[type] ? active[type].call(this) : '';
	});
});

$(function () {
	editor.create();
	$.post('/ConfigInfo/findLanguageData', function (data) {
		$.each(data, function (index, o) {
			$('#languageData').append(new Option(o.name, o.value));
			$('#edit_notice_languageData').append(new Option(o.name, o.value));
		});
	});
});
</script>
<div class="layui-row" id="edit-notice" style="display:none;">
	<div>
		<blockquote class="layui-elem-quote layui-text">注意事项: 请填写相关的数据信息! </blockquote>
		<form class="layui-form" lay-filter="form-edit-notice" id="form-edit-notice">
			<br/>
			<input type="hidden" name="edit_notice_id" />
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label"><nobr>语言:</nobr></label>
					<div class="layui-input-inline">
						<input type="text" list="edit_notice_languageData" lay-verify="required" name="edit_notice_language" autocomplete="off" class="layui-input edit-input" placeholder="请选择语言"/>
						<datalist id="edit_notice_languageData" lay-search="">
						</datalist>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label"><nobr>标题:</nobr></label>
					<div class="layui-input-inline">
						<input type="text" name="edit_notice_title" autocomplete="off" class="layui-input edit-input" placeholder="请输入标题"/
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label"><nobr>内容:</nobr></label>
					<div class="layui-input-inline">
						<div id="editor" style="width:750px;"></div>
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="margin-top:20px">
				<div class="layui-input-block">
					<button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="notice_save">保存</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
</div>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值