您的位置：首页 > 其它

封装一个搜索的功能

2017-09-13 10:38 309 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>可选日期范围的jQuery时间日期插件</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.9.2.custom.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js" language="javascript"></script>
<script type="text/javascript" src="js/share.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style>
.table > thead > tr > th {
padding: 2px;
}
.tj {
width: 150px;
}
.ui-datepicker-time {
width: 222px;
}
select {
height: 28px;
width: 221px;
}
.ui-datepicker-time {
margin: 0px;
}
.table {
margin-bottom: 6px;
}
</style>
</head>

<body>
<input type="button" id="selectBtn" name="selectBtnName" value="筛选"/>
<div class="containerr" style="display: none;">
<div class="selectBox">
<div class="col-sm-4">
<form id="filterForm">
<table class="table table-bordered" id="filterTable">
<thead>
<tr>
<th class="text-left tj">过滤条件</th>
<th class="text-right">
<img class="imgClose" src="./css/overcast/images/close.png" width="30px" height="30px">
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
<div class="text-right">
<button class="sure">确认</button> <button class="unSure">取消</button>
</div>
</div>
</div>
</div>
<div class="datakj" style="display: none">
<input type="text" class="ui-datepicker-time" readonly value=""/>
<div class="ui-datepicker-css">
<div class="ui-datepicker-choose">
<div class="ui-datepicker-date">
<input name="startDate" id="startDate" class="startDate" readonly value="2017/08/20" type="text">—
<input name="endDate" id="endDate" class="endDate" readonly value="2017/08/20" type="text" disabled onchange="datePickers()">
</div>
</div>
</div>
</div>
<script>

/*   $("#id").zc_filter({
"params": Cond,
"event": onsure
});*/

//序列化表单数据调用方式
function transfer(formId) {
var jsonuserinfo = $('#' + formId).serializeObject();
return jsonuserinfo;
}

//序列化表单内容具体实现过程
$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};

$.ajax({
url: './1.json',
type: 'post',
success: function (params) {
$('#selectBtn').zc_filter(params, function (res) {
console.log(res);
});
}
});
// 方法
$.fn.zc_filter = function (params, callback) {
var data = params;
//点击筛选按钮
var
10c4b
containerr = $('.containerr');
$(this).on('click', function () {//点击筛选把表格中可以筛选的字段也显示出来
//取消绑定事件
var $shaixuan = $(this);
$shaixuan.unbind('click');
//把表格对象保存起来
var filterTableObj = $('#filterTable');
//显示表格
containerr.css('display', 'block');
//1.把要筛选的字段都显示出来
//1.1开始获取后台的数据
//1.1.1解析json，遍历每一个key,之后得到它的value的值++++判断是什么类型的，然后将这些类型追加在表格里面
for (var i in data) {
//文本类型
if (data[i].valtype == '00') {
filterTableObj.append("<tr>" +
"<td>" + data[i].caption +
"</td>" +
"<td>" +
"<input type='text' value='' name='" + data[i].name + "'/> " +
"</td></tr>");
//text样式
var $tab = $("#filterTable");
$tab.find('input[type="text"]').css('width', '221px');
$tab.find('input[name="startDate"]').css('width', '');
$tab.find('input[name="endDate"]').css('width', '');
$(".ui-datepicker-date").css("padding-top", "10px");
continue;
}
//下拉框类型
if (data[i].valtype == '01') {
var selectStr = "<select name='" + data[i].name + "'>";
//获取下拉框的字符串
var optionList = data[i].data;
var opListArr = optionList.split('|');
for (var w in opListArr) {
var optionObj = JSON.parse("{" + opListArr[w] + "}");//将拼接成字符串之后转换成对象然后进行取key和value
for (var key in optionObj) {
selectStr += '<option value="' + key + '">' + optionObj[key] + '</option>';
}
}
filterTableObj.append("<tr><td>" + data[i].caption + "</td><td>" + selectStr + "</td></tr>");
continue;
}
//日期范围控件
if (data[i].valtype == '02') {
var $kj = $('.datakj');
$kj.find("input:eq(0)").attr("name",data[i].name);
var datakj = $kj.css('display', 'block').get(0);
filterTableObj.append("<tr><td>" + data[i].caption + "</td><td id='td2'></td></tr>");
$("#td2").get(0).appendChild(datakj);
continue;
}
}

//再给筛选一个事件，可以让其继续筛选
$(this).on('click', function () {
containerr.css('display', 'block');
//clearForm('filterForm');
});
});
//确认
$('.sure').on('click', function () {
//获取填写的相应的内容然后隐藏给后端一个标志
var formData = transfer('filterForm');
delete formData.startDate;
delete formData.endDate;
callback(formData);
//隐藏整个表格和按钮
containerr.css('display', 'none');
});
//取消
$('.unSure').on('click', function () {
containerr.css('display', 'none');
});
//点击图片的叉号
$('.imgClose').on('click', function () {
containerr.css('display', 'none');
});
};
//清空表单数据
function clearForm(formId) {
$("#" + formId).find('input, textarea').each(function () {
$(this).val("");
});
};
</script>
</body>
</html>

json格式如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航