搜索框艰难实现之路

一、搜索需求

首先，说清楚需求比较好些，也就是具体的我想实现什么样子的后台操作和效果

上图中，显示的是前台展现出来的显示效果，要实现的功能是案件的搜索功能，
第一个下拉框，
选择案件状态，有case1：已结案 case2:未结案 两种
当选择为已结案时，下方表格自动筛选案件状态为“已结案”的案件，并显示出来
当选择为未结案时，下方表格自动筛选案件状态为“未结案”的案件，并显示出来
当处于请选择案件状态时，所有案件均陈列出来
第二个下拉框，
选择立案时间，有一个星期内，一个月内，三个月内，所有时间四种选择
四种选择虽然时间有所差别，但是将时间按照标准格式化之后也就没有什么差别，只不过是**倍数的问题。
第三个输入框
输入框就是要实现模糊查询操作，当输入案件相关的关键字时，下方可以筛选出含有关键字的符合条件的结果，并将其展现出来。

二、CI框架-PHP语言

CI框架自带MVC模式
M层：
——定义model方法 ，（）内写的是要传递的参数，也就是html里面给他的name
——sql语句从数据库中进行查询，ci 是 jz_case_info的另一个名字，为了表示简洁方便这么写的 #名字1# #名字2# 是数据库重命名的方法

–
like 就是关键词的模糊查询，关于更详细的内容也可以查看下方的链接
sql模糊查询总结链接

–获取我们需要的list数据，并以数组的方式返回。

// 通过案件状态和案件时间以及关键字查询案件记录
public function check_case_list($username,$state,$time,$key){
$sql = "SELECT ci.* FROM jz_case_info ci, jz_user_case_relationship ucr WHERE ci.jz_case_info_id = ucr.jz_case_info_id AND ucr.jz_user_username = '{$username}' AND ci.jz_case_info_status in {$state} AND ci.jz_case_info_begintime >= '{$time}' AND ci.jz_case_info_name LIKE '%{$key}%'";

	$res=$this->db->query($sql);
	$list=$res->result_array();
	$data['list']=$list;
	return $data;
}

C层：
C层进行model和view的链接工作
----首先定义一种新方法，check_caselist
----获取需要的$username,$state,$time,$key等数据，这个地方是进行了重命名，使用card_a/b/c
-----获取登录名，载入要引用的model，载入，model里面的 方法，从方法里获取需要的变量，最后输出到application的json中

—输出的是 json_encode($data)

   // 执行根据案件状态和案件时间以及关键字查询案件记录的查询并返回结果
public function check_caselist()
{
    //$username,$state,$time,$key
    $card_a = $_GET['state'];
    $card_b = $_GET['time'];
    $card_c = $_GET['key'];
    // 获取当前登录名
    $username = $this->session->userdata("username");

    $this->load->model('showdata_model');
    $data = $this->showdata_model->check_case_list($username,$card_a,$card_b,$card_c);
    $this->output->set_header('Content-Type: application/json; charset=utf-8');
    echo json_encode($data);
}

V层：

下面的代码是关于设置筛选条件的代码

   layui.use(['form'], function(){
		var form = layui.form
		,layer = layui.layer
		//监听提交
		form.on('submit(111111)', function(data){
			select_case();
		});
		form.on('select(state)', function(data){
			
			select_case();
		});
		form.on('select(cateid)', function(data){
			select_case();
		});
		function select_case(){
			//设置选择条件
			chooses = document.getElementsByClassName("layui-this");
			case_state = chooses[0]['innerHTML'];
			if(case_state=="请选择案件状态"){
				case_state = "('未结案','已结案')"
			}
			else{
				case_state = "('"+case_state+"')"
			}
			case_time =  chooses[1]['innerHTML'];
			switch(case_time)
			{
				case "一星期内":
					var today=new Date();
					var t=today.getTime()-1000*60*60*24*7;
					var case_time=new Date(t);
					break;
				case "一个月内":
					var today=new Date();
					var t=today.getTime()-1000*60*60*24*30;
					var case_time=new Date(t);
					break;
				case "三个月内":
					var today=new Date();
					var t=today.getTime()-1000*60*60*24*90;
					var case_time=new Date(t);
					break;
				default:
					var today=new Date();
					var t=today.getTime()-1000*60*60*24*365*10;
					var case_time=new Date(t);
			}
				//时间格式化
			case_time =  case_time.getFullYear() + '-' + (case_time.getMonth() + 1) + '-' + case_time.getDate();
			key = document.getElementById("input_key").value
			console.log(case_state,case_time)
			var url12345 = "/test/index.php/main/check_caselist?state="+case_state+"&time="+case_time+"&key="+key+"";
			$.ajax({
				url:url12345,
				type:'GET',
				success:function(data){
					console.log(data)
					table_reload(data['list'])
				}
			});
		};

下面是关于筛选后得到的表格的展示

   //筛选后刷新得到的表格显示
		function table_reload(data_list){
			document.getElementById('main_tbody').innerHTML = ""
			console.log(data_list)
			for(let col in data_list){
				if(data_list[col]['jz_case_info_endtime']==null) {
					data_list[col]['jz_case_info_endtime']=""
				}
				colHtml="<tr>"+
					"<td><div class=\"layui-unselect layui-form-checkbox\" lay-skin=\"primary\" data-id='2'><i class=\"layui-icon\">&#xe605;</i></div> </td> "+
                        "<td class=\"+caseId\">"+data_list[col]['jz_case_info_id']+"</td> "+
                        "<td class=\"caseName\">"+data_list[col]['jz_case_info_name']+"</td> "+
                        "<td class=\"creatCaseTime\">"+data_list[col]['jz_case_info_begintime']+"</td> "+
                        "<td class=\"closeCaseTime\">"+data_list[col]['jz_case_info_endtime']+" </td> "+
                        "<td class=\"leader\">"+data_list[col]['jz_case_info_casehandler']+"</td> "+
						"<td class=\"caseState\">"+data_list[col]['jz_case_info_status']+"</td> "+
						"<td class=\"caseIntro\" style=\"display:none;\">"+data_list[col]['jz_case_info_detail']+"</td> "+
                        "<td> "+
                            "<a href='/test/index.php/main/input_data?cid="+data_list[col]['jz_case_info_id']+'&cname='+data_list[col]['jz_case_info_name']+"' type=\"button\" class=\"btn btn-info btn-sm\"> "+
								"<i class=\"layui-icon\"></i></i>查看 "+
                            "</a> "+
							"<a href='/test/index.php/main/del_case?cid="+data_list[col]['jz_case_info_id']+"' type=\"button\" class=\"btn btn-info btn-sm\"> "+
								"<i class=\"layui-icon\"></i></i>删除 "+
                            "</a> "+
							"<a type=\"button\" class=\"btn btn-info btn-sm\" data-toggle=\"modal\" data-target=\"#editModal\"> "+
								"<i class=\"layui-icon\"></i>编辑 "+
							"</a> "+
                        "</td> "+
                    "</tr>"
					
					var html = document.getElementById('main_tbody').innerHTML 
					document.getElementById('main_tbody').innerHTML = html +colHtml
			};
		};
	});

三、学习到的知识点
--------JavaScript Switch 语句

switch(n)
{
case 1:
	执行代码块 1
break;
case 2:
	执行代码块 2
break;
default:
	n 与 case 1 和 case 2 不同时执行的代码
}

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

具体可参考链接内容，http://www.w3school.com.cn/js/js_switch.asp