slickgrid ( nsunleo-slickgrid ) 9 表头菜单（过滤）
作者：互联网
表头菜单是通过HeaderMenu插件实现的。
默认情况下，菜单点击之后，就会执行隐藏动作，而过滤需要在input中输入值，并监听值的变化进行过滤操作，如果走默认时间，此时无法输入，因此增加自定义事件：
// 自定义绑定
if (item.content) {
var ct = $(item.content);
ct.appendTo($li);
if (item.selfbind && columnDef.headerMenus && columnDef.headerMenus.filter) {
ct.data("column", columnDef)
ct.val(columnDef.filter ? columnDef.filter : "");
item.selfbind(ct);
}
}
}
// stone 20210304 last column header expand to left .
var left = $(this).offset().left;
if (_grid.getColumnIndex(columnDef.field) == _grid.getColumns().length - 1) {
left = left - $menu.width() + $(this).width() - 4;
//if (left + $menu.width() > _grid.width()) {
//left = _grid.width() - $menu.width();
//}
}
如果配置了阻止默认事件，则直接返回
if (item.disabled || item.preventDefault) {
return;
}
自定义过滤的实现：
function sgHeaderMenu(columns) {
for (var i = 0; i < columns.length; i++) {
if (columns[i].headerMenus) {
columns[i].header = {
menu: {
items: []
}
};
if (columns[i].headerMenus.filter) {
columns[i].header.menu.items.push(
{
iconCssClass: "icon-help",
title: "Filter",
command: "filter",
content: " <input style='widht:50px; margin:3px;' value='0' ></input>",
preventDefault: true,
selfbind: filterBind
});
}
};
}
}
function filterBind($target) {
$target.keyup(function (e) {
var col = $(this).data("column");
columnFilters[col.field] = $target.val();
col.filter = $target.val();
grid.setFilterColumn(grid.getColumnIndex(col.id), $target.val());
dataView.refresh();
});
$target.blur(function () {
});
}
//stone filter column 20210508
function setFilterColumn(columnIndex, val) {
var headerColumnEls = $headers.children();
var headerCol = headerColumnEls.eq(columnIndex).find(".slick-header-column-filter-indicator");
headerCol.empty();
if (val) {
headerCol.append('<i class="fa fa-search-plus"></i>');
} else {
headerCol.empty();
}
}
标签：slickgrid,val,width,表头,filter,item,grid,nsunleo,left 来源： https://www.cnblogs.com/nsunleo/p/14797610.html