什么阻止此搜索过滤器更新显示?

时间:2015-09-21 21:38:46

标签: jquery search filter slickgrid

尝试使用SlickGrid示例4(https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example4-model.html)中的搜索功能时,在带有自定义数据的修改网格中,在搜索框中键入时,dataView显示不会更改。

以下似乎有效:

  • searchString变量在myFilter()中正确更新 在搜索框中输入,并传递正确列中的项目。

  • myFilter()显示在传递给dataView时定义。

注意:

  • 如果选择了任何项目,选择将跳转到网格上的第一个项目,如果文本与最初选择的项目不匹配,则在输入时取消选择

  • 过滤器已修改为不会被percentCompleteThreshold

  • 过滤

这个问题是否与组件相关'范围?

请注意是否需要发布其他内容。

每个搜索组件和包装函数的起始行如下所示。

<span style="float:right" class="ui-icon ui-icon-search" title="Toggle search panel"
                                onclick="toggleFilterRow()"></span>

<div id="inlineFilterPanel" style="display:none;background:#dddddd;padding:3px;color:black;">
  Search: <input type="text" id="txtSearch2">
  <div style="width:100px;display:inline-block;"></div>
</div>


// line #'s paired with each search component

// 361: 
<script type="text/javascript"> // encapsulates all

// 901: var dataView;

// 1062: 
var searchString = "";

// 1348: 
function myFilter(item, args) {

  if (args.searchString != "" && item["file_name"].indexOf(args.searchString) == -1) {
    return false;
  }

  return true;
}


// 1379:
    function toggleFilterRow() {
         grid.setTopPanelVisibility(!grid.getOptions().showTopPanel);
        }

// 1632: 
jQuery(document).ready(function() { … // ends at line 2556


// 1841: getJSON call
// 2000: grid is created and its data retrieved
grid = new Slick.Grid("#myGrid", data, columns, options);

// 2029:
dataView = new Slick.Data.DataView({ inlineFilters: true });

// 2035:
// move the filter panel defined in a hidden div into grid top panel
$("#inlineFilterPanel")
    .appendTo(grid.getTopPanel())
    .show();

// 2462:
$("#txtSearch2").keyup(function (e) {
        Slick.GlobalEditorLock.cancelCurrentEdit();

        // clear on Esc
        if (e.which == 27) {
          this.value = "";
        }

        searchString = this.value;
        updateFilter();
      });
      $("#txtSearch2").click(function (e) {
          inSearchBox = true;
      });

      function updateFilter() {
        dataView.setFilterArgs({
          searchString: searchString
        });
        dataView.refresh();

      }


// 2502:
dataView.beginUpdate();
dataView.setItems(data);

dataView.setFilterArgs({
          searchString: searchString
      });
dataView.setFilter(myFilter);
dataView.endUpdate();


   }); // 2517: ends getJSON call

}); // 2556: ends jQuery(document).ready call

1 个答案:

答案 0 :(得分:0)

dataView没有被更新,因为'data'被传递到网格初始化调用而不是dataView。