利用layui实现分页及table列表数据的编辑与删除渲染

最新推荐文章于 2021-11-03 14:01:31 发布

贝塔贝卡贝

最新推荐文章于 2021-11-03 14:01:31 发布

阅读量486

点赞数

文章标签： jquery es6 javascript

本文链接：https://blog.csdn.net/Kiruthika/article/details/108588891

版权

表格数据是我自己写的，不是从后台接口获取的
在这里插入图片描述
HTML部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./assets/layui/css/layui.css">
		<link rel="stylesheet" href="./css/page.css">
	</head>
	<body>
		<div id="wrapper">
			<table>
				<thead>
					<tr>
						<th>序号</th>
						<th>姓名</th>
						<th>体重</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="dataList">

				</tbody>
			</table>
			<div id="page">

			</div>
		</div>
		<script src="assets/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./assets/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/page.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

var tableData = [
	{
		id: 1,
		name: "德小富",
		weight: "130"
	},
	{
		id: 2,
		name: "焦焦",
		weight: "100"
	},
	{
		id: 3,
		name: "迪迪",
		weight: "100"
	},
	{
		id: 4,
		name: "程小程",
		weight: "110"
	},
	{
		id: 5,
		name: "孙小婷",
		weight: "100"
	},
	{
		id: 6,
		name: "杰仔",
		weight: "150"
	},
	{
		id: 7,
		name: "原小琪",
		weight: "120"
	},
	{
		id: 8,
		name: "宗小宝",
		weight: "100"
	},
	{
		id: 9,
		name: "陈先生",
		weight: "170"
	},
	{
		id: 10,
		name: "张大星",
		weight: "150"
	},
	{
		id: 11,
		name: "黄小豆",
		weight: "100"
	},
	{
		id: 12,
		name: "大宝",
		weight: "180"
	},
	{
		id: 13,
		name: "小宝",
		weight: "90"
	},
	{
		id: 14,
		name: "小王",
		weight: "130"
	},
	{
		id: 15,
		name: "张小石",
		weight: "130"
	},
	{
		id: 16,
		name: "大力",
		weight: "100"
	}
]

$(function(){
	viewData(tableData);
})

//table列表数据渲染
function viewData(tableData, key) {
	layui.use('laypage', function() {
		var laypage = layui.laypage;

		//执行一个laypage实例
		laypage.render({
			elem: 'page' //注意，这里的 page 是 ID，不用加 # 号
			,count: tableData.length//数据总数
			,curr:key == "" ? 1 : key //当前页
			,limit:5   //设置每页中要展示数据数量限制
			,layout:['count','prev','page','next','limit','skip']
			,jump: function(obj, first) {
				var arr = []; 
				var pageData = tableData.concat().splice(obj.curr*obj.limit-obj.limit,obj.limit)
				document.getElementById("dataList").innerHTML = function (){
					$.each(pageData,function(i,item){
						arr.push(`
							<tr>
								<td>${item.id}</td>
								<td>${item.name}</td>
								<td>${item.weight}</td>
								<td>
									<button id="edit" name="${item.id}" οnclick="edit(name)">编辑</button>
									<button id="delet" name="${item.id}" οnclick="delet(name)">删除</button>
								</td>
							</tr>
							`)
					})
					return arr.join("")
				}()
			}
		});
	});
}

//编辑
function edit(id){
	layer.open({
		type:1,
		title:['编辑','background:#008c8c;font-size:20px;color:#fff;'],
		skin: 'demo-class',
		area:["400px","300px"],
		btn:['确定','取消'],
		content:`
			<div id="editToast">
				<label>姓名:</label>	
				<input id="pName" value=""/>
				<label>体重:</label>
				<input id="pWeight" value=""/>
			</div>
		`,
		success:function(){
			$.each(tableData,function(i,item){
				if(item.id == id){
					$("#pName").val(item.name)
					$("#pWeight").val(item.weight)
				}
			})
		},
		btn1:function(){
			var pName = $("#pName").val().trim()
			var pWeight = $("#pWeight").val().trim()
			// 表单仪式感：提交验证
			if(pName !== "" || pWeight !== ""){
				$.each(tableData,function(i,item){
					if(item.id == id){
						var newInfo = {
							id:id,
							name:pName,
							weight:pWeight
						}
						tableData.splice(i,1,newInfo)
						viewData(tableData);		
					}
				})
			}
			layer.closeAll()
		},
		btn2:function(){
			layer.closeAll()
		}
		
	})
	


}

//删除
function delet(id){
	layer.open({
		title:"确定删除吗？",
		btn:["确定","取消"],
		btn1:function(){
			for(var i = 0; i < tableData.length; i++){
				if(tableData[i].id == id){
					tableData.splice(i,1)
					viewData(tableData)
				}
			}
			layer.closeAll()
		},
		btn2:function(){
			layer.closeAll()
		}
	})
	
}