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();

            }

        }