LayUI：动态条件检索

dawn

已于 2022-03-16 04:52:13 修改

阅读量2.4k

点赞数 1

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

于 2022-03-16 04:46:48 首次发布

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

版权

LayUI 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

　　今天晚上在做计算机设备的财务资产核对时，财务表中只有计算机型号可以参考，实物也有计算机型号，只能通过比对认为确定是否核实。

　　即通过拆分实物计算机的型号来查找财务表中的类似设备。

　　上面是默认全选分拆的关键字。

　　通过复选框的组合来搜索设备。

　　不选则为空：

　　选择一个关键字：

　　选择两个关键字：

　　源码文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
	<style>
		* { margin: 0;padding: 0;}
		.layui-form-label{padding-left: 0px; white-space:nowrap;}
	</style>
</head>
<body>
	
<div style="width: 100%;">	
    <form class="layui-form login-bottom" lay-fiter="BaseEquipment_edit" style="text-align: center;">
			<div class="layuimini-container">
				<div class="layui-input-block">
					<label class="layui-form-label" >检索关键字：</label>
					 <div class="layui-input-block" id="searchKeys"></div>					 
				</div>	

				<input type="hidden" id="assetCode" value="">
				<input type="hidden" id="unitName" value="">
				<div class="layuimini-main">
					<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
				</div>
				
<!-- 				<div class="layui-input-inline" style="text-align: center;">
					<button class="layui-btn layui-btn-normal" lay-submit lay-filter="closeBtn">关闭</button>			
				</div>	 -->

				<script type="text/html" id="currentTableBar">
					<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="checkOK">确认实物核对</a>
				</script>
							
			</div>
	</form>
</div>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
	let selectItem;
	let strWhere='';
	let arr;
	let currentDatetime;
	let currentUser;
	
	function init(src,acode,uname){
		document.getElementById("assetCode").value=acode;
		document.getElementById("unitName").value=uname;		
		//对出厂类型进行拆解
		arr=src.split(/ |-/);
		//合成查询字符串						
		for(let index in arr){			
			if(strWhere==''){
				strWhere=" CHARINDEX('"+arr[index]+"' ,C07)>0 ";
			}else{
				strWhere=strWhere + " or CHARINDEX('"+arr[index]+"' ,C07)>0 "
			}
		}
	}
	
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
			element=layui.element,
            table = layui.table;		

		//得到当前服务器的时间
		$.ajax({
			url:'EisGetServerDatetime.php',
			type:'POST',
			async:false,
			success:function (data) {
				currentDatetime=data;
			}
		});				

		//得到当前的用户名称
		$.ajax({
			url:'EisGetCurrentUser.php',
			type:'POST',
			async:false,
			success:function (data) {
				currentUser=data;
			}
		});
		
        form.on('checkbox(checkkeys)', function(data){
			let checkNum = $("#searchKeys .Eis:checked").length;//选择的个数			
			//如果都没有选中则不检索
			if(checkNum!=0){
				strWhere='';
				let searchArr = $("input[name='EisKey']");
				for(let index in searchArr){
					 if (searchArr[index].checked) {
						 console.log(searchArr[index].elem);
						 if(strWhere==''){
							 strWhere=" CHARINDEX('"+searchArr[index].title+"' ,C07)>0 ";
						 }else{
							 strWhere=strWhere + " or CHARINDEX('"+searchArr[index].title+"' ,C07)>0 "
						 }
					 }					 
				}
				//重新检索数据库并更新表格			
			    table.reload('currentTableId',{
				   url: 'EisGetVerifyList.php',
				   method:'post',
				   where:{"where":strWhere}
			    })					 				
			}else{
				//清空表格
				strWhere='';
			    table.reload('currentTableId',{
				   url: 'EisGetVerifyList.php',
				   method:'post',
				   where:{"where":strWhere}								
			    })
			}			
            // console.log(data.elem.checked); //是否被选中，true或者false
            // console.log(data.value); //复选框value值，也可以通过data.elem.value得到
        })		
		
		setTimeout(function(){
			let searchKeys=$("#searchKeys");	
			searchKeys.html('');
			//复选框						
			for(let index in arr){			
				searchKeys.append("<input type='checkbox' lay-filter='checkkeys' name='EisKey' class='Eis' value='" + index + "' title='" + arr[index] + "' checked>");
				// console.log(index);
				form.render("checkbox");
			}
						
			table.render({
				elem: '#currentTableId',
				url: 'EisGetVerifyList.php',
				cols: [[
                {title: '操作', minWidth: 80, toolbar: '#currentTableBar', align: "center"},									
					{field: 'C01', width: 300, align:'left',title: '资产编码', hide: true},
					{field: 'C07', width: 300, align:'left',title: '计算机型号', sort: true},
					{field: 'C04', width: 200, align:'left',title: '所属单位', sort: true},
					{field: 'C09', width: 120, align:'left',title: '出厂日期', sort: true,templet:"<div>{{layui.util.toDateString(d.C09, 'yyyy-MM-dd')}}</div>"},					
				]],
				method:'POST',
				where:{"where":strWhere},
				page: false,
				skin: 'line',
				done:function(data){
					// $(this.elem).next().find(".layui-table-header").attr('class',"layui-hide layui-table-header");
				}
			});			
			
		},1000);

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'checkOK') {
				//更改资产表，设置C21为财务编码
				let DWMC=document.getElementById("unitName").value;			
				let ZCBM=document.getElementById("assetCode").value;
				$.ajax({
					url:'EisGetVerifyUpdate',
					data:{"OP":"实物表",
						  "Where":"C02='"+ZCBM+"'",
						  "Set":" C21='"+data['C01']+"'"
						  },
					type:'POST',
					async:true,
					success:function (JsonData) {
					}
				});							 									
							
				//更改财务表，C18=1，C19核实时间,C20核实人员,C23单位名称，C24对应的资产编码
				$.ajax({
					url:'EisGetVerifyUpdate',
					data:{"OP":"财务表",
						  "Where":" C01=''"+data['C01']+"' ",
						  "Set":" C18=1,C23='"+DWMC+"',C24='"+ZCBM+"',C20='"+currentUser+"',C19='"+currentDatetime+"'"
						  },
					type:'POST',
					async:true,
					success:function (JsonData) {
					}
				});							 									
				var iframeIndex = parent.layer.getFrameIndex(window.name);
				parent.layer.close(iframeIndex);							
			}
		})
		
    });
</script>

</body>
</html>