记——通过点击表头弹出筛选选项列表，点击进行数据筛选

要求

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'>