【发布时间】:2015-12-18 17:26:11
【问题描述】:
为了尝试使用 SlickGrid 示例 4 (https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example4-model.html) 中的搜索功能,在具有自定义数据的修改后的网格中,在搜索框中键入时 dataView 显示不会改变。
以下似乎有效:
搜索字符串变量在 myFilter() 中正确更新时 在搜索框中输入,并传递正确列中的项目。
myFilter() 显示为在传递到 dataView 时定义。
注意事项:
如果选择了任何项目,如果文本与最初选择的项目不匹配,则选择跳转到网格上的第一个项目,在键入时取消选择该项目
过滤器已修改为不按百分比完成阈值过滤
这个问题与组件的作用域有关吗?
请注意是否需要发布其他内容。
每个搜索组件的起始行和包装函数如下所示。
<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
【问题讨论】:
-
你没有得到太多回应,是吗!您最好将整个示例发布为 jsfiddle,甚至作为指向您网站上文件的链接。一旦我可以在本地机器上运行它,我就可以使用很多诊断工具,而不是仔细研究代码。
-
我没有使用过 jsfiddle,但由于有一些无关的 UI 组件,我可能会看看是否值得尝试发布一个精简的示例。由于后端代码似乎让我迷失了一段时间,我用“Notes”编辑了这篇文章,这对你来说可能比我更有启发。
标签: jquery search filter slickgrid