Layui 表格数据展示与搜索功能实现

layui.use(function(){ var table = layui.table; var form = layui.form; var layer = layui.layer; var laydate = layui.laydate; var dropdown = layui.dropdown;

// 创建表格实例 table.render({ elem: '#projectList', url: '../yd/ydquery', // 此处为静态模拟数据，实际使用时需换成真实接口 cellMinWidth: 150, defaultToolbar: ['filter', 'exports', 'print', { title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips' }], response: { statusCode: 200 // 重新规定成功的状态码为 200，table 组件默认为 0 }, // 将原始数据解析成 table 组件所规定的数据格式 parseData: function(res){ return { 'code': res.status, //解析接口状态 'msg': res.message, //解析提示文本 'count': res.total, //解析数据长度 'data': res.rows.item //解析数据列表 }; }, cols: [getOptions()], id: 'testReload', page: true, done : function(res, curr, count){ $('#totalProjectNumber').text('共有数据：'+count+' 条'); table_data=res.data; layer.closeAll('loading'); }, height: 400 });

function getOptions(){
    return [
        {checkbox: true, fixed: true}, // 单选框
	    {field:'id', title:'ID',align:'center', width:50, fixed:true, sort:true, totalRowText:'合计', fixed: true,templet: function(d){
	  	  // 为每一行数据生成自增的 ID 值
		    return currentId++;
	    }}
	    ,{field:'institution', title:'机构号', align:'center',fixed: true}
	    ,{field:'mailNumber', title:'邮件号',align:'center',fixed: true}
	    ,{field:'describe', title:'邮件描述',align:'center',fixed: true}
	    ,{field:'images', title:'图片', align:'center', fixed: true,templet:'#imageTpl'}
	    ,{field:'username', title:'员工姓名',align:'center',fixed: true}
	    ,{field:'state', title:'状态（后台编辑）', align:'center',edit: 'text',fixed: true}
	    ,{field:'date', title:'上传时间', align:'center',fixed: true}
	    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', align:'center',fixed: true}
        ,{field: 'operate',title: '操作',toolbar: '#operateTpl',fixed: 'right',unresize: true}
	];
}

// 日期 laydate.render({ elem: '.demo-search-startDate', }); laydate.render({ elem: '.demo-search-endDate', }); // 搜索提交 form.on('submit(demo-search)', function(data){ var startDate = $('#startDate').val(); var endDate = $('#endDate').val(); var mailNumber = $('#mailNumber').val();// 执行搜索重载 var searchParams = { startDate: startDate, endDate: endDate, mailNumber: mailNumber }; table.reload('projectList', { where: searchParams, page: { curr: 1 // 重新从第 1 页开始 } });

    $.ajax({
        url: '/api/ydquery', // 修改为真实的接口地址
        type: 'post',
        dataType: 'json', // 修改为接口返回的数据类型
        contentType: 'application/json',
        data: JSON.stringify(searchParams),
        timeout: 2000,
        beforeSend: function(xhr) {
            xhr.setRequestHeader(header, token);
        },
        success: function(data) {
            if (data.success) { // 修改为接口返回的成功标识
                layer.msg('查询成功');
                location.href = '/ydquery'
            } else {
                layer.msg('查询失败')
            }
        },
        error: function() {
            layer.msg('查询失败')
        }
    });
    return false; // 阻止默认 form 跳转
    });
});
var clickflag = false;

$(window).keydown(function(e){
    if(e.keyCode==13){
		if($('#startDate').val()==''){
			$('#startDate').focus();
		}else{
			if($('#endDate').val()==''){
				$('#endDate').focus();
			}
		    else{
		        sendConfirm();
		    }
		}
		if($('#mailNummber').val()==''){
			$('#mailNummber').focus();
		}else{
			sendConfirm();
		}	
	}      
});

function sendConfirm() {
disableBtn('#btnConfirm');

var url = '../yd/ydquery';
var data = {	
	startDate: $('#startDate').val(),
    endDate: $('#endDate').val(),
    mailNumber: $('#mailNumber').val()
};
if (checkinput(data) && clickflag == false) {
    clickflag = true;
	$.post(url,data,null,'json').success(function(re){
		if (re.result == 'success') {
		    window.location.href = 'ydquery.html';
		}
		else {
			$('#startDate').val('');
	        $('#endDate').val('');
	        $('#mailNumber').val('');
			popAlert('提示', re.msg);
		}
	}).error(function(e){
		popAlert('提示', '网络错误,请重试');
	}).complete(function(){
		enableBtn('#btnConfirm');
		clickflag = false;
	});
}
}

function enableBtn() {
    $('#btn').html('确定');
    $('#btn').removeAttr('disabled');
    $('#username').focus();
}

function disableBtn() {
    $('#btn').html('正在处理...');
    $('#btn').attr('disabled', 'disabled');
}

function checkinput(data) {
    for (var keyname in data) {
        var value = data[keyname];
        if ((keyname == 'mailNumber' && value == '')&&(keyname == 'startDate' && value == '')) {
            popAlert('提示','请输入邮件号或开始时间');
            $('#startDate').focus();
            $('#mailNumber').focus();
            enableBtn('#btnConfirm');
            return false;
        }
    }
    return true;