要求
a.点击表头弹出列表
b.点击筛选内容进行数据筛选
c.允许多条件
d.当点击筛选选项列表之外的区域时，列表收起
e.筛选选项列表宽度与列宽度保持一致
f.筛选选项列表需要有横向滚动条
实现
a.点击表头弹出列表
思路：
1.监听表头的点击动作2.在表头中通过append的方式将筛选选项列表异步加入表头代码中3.将选项列表改为绝对定位，使得选项列表成为一个独立窗口4.通过post获取选项数据，拼接option，数据为该列不重复数据5.当一个列表弹出时，其他筛选列表全部隐藏6.当列表代码已经拼接时，不在重复append
代码：
$("#list").on("click","th",function (e) {var length= $(e.target).find("select").length;$('select').css("display","none");//当当前筛选列表弹出时，隐藏其他所有列表if(length<1){var html ="<select style='background:#fdfdfd;position:absolute;display:block;" "' multiple='multiple'"+" onchange='selectOnClick(this)'><option value=''>全部</option>" ;var param = {param:param};var url = url//根据需要$.post(url, param, function(data){var filterObj = data.row;//根据后端传回的数据结构确定for (var i = 0; i < filterObj.length; i++) {html += "<option value =\"" +filterObj[i] + "\">" +filterObj[i] +"</option>";}html += "</select>";$(e.target).append(html);}, 'json');} else{$(e.target).find("select").css("display","block")}});
b.点击筛选内容进行数据筛选
思路：
在select中加上onchange='selectOnClick(this)',在selectOnClick方法中调用表格数据查询方法
代码1
<select onchange='selectOnClick(this)'>
代码2
//获取被选中的值param.filterVal = e.options[e.options.selectedIndex].value;//被筛选的列param.filterName= $(e).closest('th').attr("name");loadData(param);//关闭列表$(e).css("display","none");
c.允许多条件
思路：
因为所有的筛选列表都是用appent拼接的，所以可以获取所有的select，取得所有被选中的值与列名，作为参数查询数据
代码：
var selectBoxs = $("select");var filterParams = [];for(var i=0; i<selectBoxs.length; i++){var selectedOptions = selectBoxs[i].selectedOptions;if(selectedOptions.length>0){var filterParam = {};filterParam.value = selectedOptions[0].innerText;filterParam.name= $(selectBoxs[i]).parent().attr("name");filterParams.push(filterParam);}}if(filterParams.length>0){params.filterParam = JSON.stringify(filterParams);}
d.当点击筛选选项列表之外的区域时，列表收起
思路：
监听整个页面的点击，判断如果不属于列表范围内的点击，则隐藏列表
代码：
$(document).on("click", function(e) {var dom1 = $(e.target).closest('select').length;var dom2 = $(e.target).closest('th').length;if (dom1<1 && dom2<1) {$('select').css('display','none');}});
e.筛选选项列表宽度与列宽度保持一致
思路：
获取列的宽度，将列宽度拼接到select的style中
代码：
var width = e.target.clientWidth+'px'var html = "<slelect style='width:"+width+"'>
f.筛选选项列表需要有横向滚动条
//在select中加上overflow<select style='overflow:scroll'>
