LayUI⑴：表格的常用操作

dawn

已于 2022-04-03 19:33:42 修改

阅读量2.1k

点赞数

分类专栏： LayUI 文章标签： layui 前端 javascript

于 2022-03-01 11:11:53 首次发布

本文链接：https://blog.csdn.net/dawn0718/article/details/123200474

版权

LayUI 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

　　这几天使用LayUI + PHP + MS SQL Server写一个小程序，开发工具使用的是HBuilder，就是把先前使用Powerbuilder完成的C/S程序转换成Web程序。

　　第一次完整地写，有一点不习惯这样的开发方式，不过好在基本上都找到了解决办法，这里记录和更新开发过程中使用到的一些资料，方便后面的查找使用。

　　LayUI停止了更新，后面写程序可能使用LayUI就不多了，它还是有很多有点，使用它对付一些中小型程序还是挺好的。

1、LayUI初始化

//-----------------------LayUI初始化
layui.use(['form', 'table'], function () {
	var $ = layui.jquery,
		form = layui.form,
		element=layui.element,
		table = layui.table;

))

　　使用前必须初始化，使用哪个组件就注册哪个组件。

　　2、赋值与取值

//body的放置
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
		<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 批量删除 </button>
		<button class="layui-btn layui-btn-sm l" lay-event="exit"> 关闭 </button>
	</div>
</script>

<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

<script type="text/html" id="currentTableBar">
	<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
</script>
//操作
table.render({
	elem: '#currentTableId',
	url: 'ZTBUserList.php',
	toolbar: '#toolbarDemo',
	defaultToolbar: ['exports'],
	cols: [[
		{type: "checkbox", width: 40},
		{field: 'c01', width: 60, title: '数据库ID', sort: true},
		{field: 'c02', width: 100, title: '用户名'},
		{field: 'c03', width: 100, title: '密码'},
		{field: 'c04', width: 100, title: '类型'},
		{field: 'c05', width: 100, title: '单位名'},
		{field: 'c06', width: 80, title: '编码'},
		{field: 'c07', width: 100, title: '岗位'},
		{field: 'c08', width: 100, title: '邮件帐号'},				
		{title: '操作',width: 120, toolbar: '#currentTableBar', align: "center"}
	]],
	limits: [5,10],
	limit: 10,
	page: true,
	skin: 'line'
});

// toolbar监听事件
table.on('toolbar(currentTableFilter)', function (obj) {
	if (obj.event === 'add') {  // 监听添加操作
		var index = layer.open({
			title: '添加用户',
			type: 2,
			shade: 0.2,
			maxmin:false,
			shadeClose: true,
			area: ['100%', '100%'],
			content: 'ZTBUserAdd.html',
		});
		
		$(window).on("resize", function () {
			layer.full(index);
		});
		
	} else if (obj.event === 'delete') {  // 监听批量删除操作
		var checkStatus = table.checkStatus('currentTableId')
			, data = checkStatus.data;
		// layer.alert(JSON.stringify(data));
		// console.log(JSON.stringify(data));
		for(var i=0;i<data.length;i++){
			$.ajax({
				url:'ZTBUserDel.php',
				data:"c01="+data[i]['C01'],
				type:'POST',
				success:function (data) {
					$(".layui-laypage-btn")[0].click();
				}
			});
			// console.log(data[i]['C01']);
		}
	} else if (obj.event === 'exit') {  // 监听关闭操作
		//关闭当前窗口
		// console.log(this.parent);
		// window.parent.location.reload();//刷新父页面
		parent.layer.closeAll(); //关闭弹窗
	}
});

//监听表格复选框选择
table.on('checkbox(currentTableFilter)', function (obj) {
	console.log(obj)
});


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

var data = obj.data;
if (obj.event === 'edit') {			
	strQuery="?c01="+data.c01+"&c02="+data.c02+"&c03="+data.c03+"&c04="+data.c04+"&c05="+data.c05+"&c06="+data.c06+"&c07="+data.c07+"&c08="+data.c08;
	var index = layer.open({
		title: '编辑用户',
		type: 2,
		shade: 0.2,
		maxmin:false,
		shadeClose: true,
		area: ['100%', '100%'],
		content: 'ZTBUserUpdate.html'+strQuery
	});
	$(window).on("resize", function () {
		layer.full(index);
	});
	return false;
} else if (obj.event === 'delete') {
	layer.confirm('真的删除该用户吗？', function (index) {
		console.log(index);
		//删除数据库对应的记录
		$.ajax({
			url:'ZTBUserDel.php',
			data:"c01="+obj.data.c01,
			type:'POST',
			success:function (data) {
				// console.log(data);
				$(".layui-laypage-btn")[0].click();
			}
		});
		obj.del();
		layer.close(index);
	});
}

　　3、根据下拉列表来更新表格内容：

//监听模板选择下拉列表的点击事件
 form.on('select(templateFileList)', function(data){
	 curSelectTemplateFile = data.value; //选择的单位名称
	 table.reload('currentTableId',{
		url: 'ZTBHTTemplateBookmarkSet.php',
		method:'post',
		where:{"op":"列表",
			   "file":curSelectTemplateFile},
	   limits: [7],
	   limit: 7,
	   page: true
	 })
 });

　　4、表格里面的日期显示：

{field: 'C14', align:'center',width: 110, title: '生产日期',templet:"<div>{{layui.util.toDateString(d.C14, 'yyyy-MM-dd')}}</div>"},

　　5、表格的数据源（MS SQL Server）：

　　比如一个列表根据单位来区分普通员工和管理员的列表显示：

//获取具体的页数
$page  = isset($_POST['page']) ? intval($_POST['page']) : 1;
//获取每页的行数
$limit = isset($_POST['limit']) ? intval($_POST['limit']) : 10;
//计算偏移值
$offset = ($page-1)*$limit;
if($restrict==''){
	$sql1 = "select count(*) from computerAssetsInfo";
}else{
	$sql1 = "select count(*) from computerAssetsInfo where C25='$restrict'";
}
$res = $EisConn->query($sql1);
$rows = $res->fetch();
$rowCount = $rows[0];
$returnArr['code']=0;
$returnArr['msg']='';
$returnArr['count']=$rowCount;
//提取要返回的值
if($restrict==''){
	$sql2="SELECT TOP $limit * FROM computerAssetsInfo WHERE C01 NOT IN ( SELECT TOP $offset C01 FROM computerAssetsInfo ORDER BY c01 ) ORDER BY C01";
}else{
	$sql2="SELECT TOP $limit * FROM computerAssetsInfo WHERE C25='$restrict' and C01 NOT IN ( SELECT TOP $offset C01 FROM computerAssetsInfo where C25='$restrict' ORDER BY c01) ORDER BY C01";
}				
$result=$EisConn->query($sql2);
$rows=$result->fetchAll(PDO::FETCH_ASSOC);
$returnArr['data']=$rows;
header('Content-type:text/json');
echo json_encode($returnArr,JSON_UNESCAPED_UNICODE);

　　上面的C25字段就是单位名称，当然也可以改一下，就是多个单位的话就使用in即可。

　　6、表格行的前景色或者背景色的变化：

			done: function (res, curr, count) {
				//标识已经核对成功的记录
				for (let i=0;i<res.data.length;i++){
						if(res.data[i]['C21']!=''){
							 $("table tbody tr").eq(i).css('color','red');//前景色改变
							 // $("#currentTableId").next().find('tbody tr[data-index="' +i +'"]').css("background-color", "#FFA07A");//背景色改变
						}
						// console.log(res.data[i]['C21']);
				}
			}

　　效果图：　

　　也可以在操作过程中动态改变表格行的前景色或者背景色。

　　7、涉及表格的其他操作：

$(document).on('dblclick','th', function (data) {//监听双击表头事件
    console.dir(data);			
})
table.on('edit(currentTableFilter)', function (obj) {//监听修改事件
    var a = obj.tr[0].rowIndex;
    var data = obj.data //得到所在行所有键值
});
table.on('row(currentTableFilter)', function (obj) {//监听行单击事件
    var data = obj.data;
    obj.tr.addClass(‘layui-table-click’).siblings().removeClass(‘layui-table-click’);
});

　　第⑴次更新　2022年3月1日。

　　第⑵次更新，2022年3月9日。

　　第⑶次更新，2022年3月14日。

　　第⑷次更新，2022年3月16日。

　　第⑸次更新，2022年4月3日。