为什么展开和折叠不起作用,在Accordion列表中搜索文本后
Why Expand and collapse is not working, After text search in Accordion List?
我已经通过使用这些演示实现了AccordionList 1)https://github.com/kawanoshinobu/Ext.ux.AccordionList2)http://docs.kawanoshinobu.com/accordionlist/。手风琴列表显示得很好。根据需要在手风琴列表上实时搜索文本我只需要在手风琴式列表标题中搜索文本,而不需要在子节点中搜索。经过搜索,一旦得到手风琴式标题应该能够展开和折叠这些标题我已尝试使用此链接http://docs.sencha.com/touch/2.2.1/#/示例/搜索列表。对于我已经应用到AccordionList的列表来说,它运行得非常好。它正在从显示可用标题的标题中搜索,但我无法展开标题,但它包含子节点(通过console.log(abc)看到子节点)。点击展开和折叠,正确执行代码,没有任何错误/问题。为了获得更多参考,我在下面提供了代码。有谁能告诉我如何在手风琴列表中实现这一点吗?非常感谢。非常感谢。
代码在这里:
if(searchfield !== ""){
store.filter([{
property: "text",
value: searchfield,
anyMatch: true
//exactMatch:true
}]);
}
else{
store.clearFilter();
}
将此存储值分配给手风琴列表代码低于
var accordionlistContent = {
xtype: 'accordionlist',
//store: Ext.create('eGMonitorApp.store.TestsStore'),
store: store,
name: 'accordionList',
height: 500,
headerItemTpl: [
'<tpl if="this.isExpanded(values)">',
'<div class="testsstatus{status}"></div></div>',
'<div style="width:80%;margin-left: 10px" <tpl if="values.year">style="font-style:italic; "</tpl>>',
'{text}</div>',
'<div class="down"></div>',
'<tpl else>',
'<div class="testsstatus{status}"></div></div>',
'<div style="width:80%;margin-left: 10px"<tpl if="values.year">style="font-style:italic;"</tpl>>',
'{text}</div>',
'<div class="right"></div>',
'</tpl>'
].join(''),
contentItemTpl: [
'<div class="testsstatus{status}"></div></div>',
'<div style="margin-left: 10px" >{text}<div>'
].join(''),
useSelectedHighlights: false,
indent: true
}
展开/折叠代码:
doAllExpand: function() {
var me = this;
me.doAll(function expand(node) {
if (me.getAnimation()) {
me.addListExpandListeners(node);
}
node.expand();
if (!node.isLeaf()) {
node.childNodes.forEach(expand, me);
}
});
},
doAllCollapse: function() {
var me = this;
me.doAll(function collapse(node) {
node.collapse();
if (!node.isLeaf()) {
node.childNodes.forEach(collapse, me);
}
});
},
我已经成功了。store.filter函数,很好地过滤文本,但如果它有子节点,它也不会显示。因为我们在商店里搜索了一些特定的文本。after过滤器只显示那些过滤器文本。我走了另一条路。按照我的要求,它运行得很好。我正在调用web服务store.load()。在商店中搜索输入的文本。如果输入的文本在父级不可用,则从存储中删除该特定项目。迭代后,最终存储分配给手风琴列表手风琴式列表显示相关的搜索文本数据。欢呼:)。下面是代码。非常感谢。
store.getProxy().setUrl('resources/Json/TestsStore.json');
store.load({
scope: this,
callback: function(records, operation, success) {
if (success) {
if(searchfield !=="") {
if(store.data.items.length !==0){
var length = store.data.items.length;
for(var j=length; j--;) {
if(store.data.items[j].data.name.search(new RegExp(searchfield, "i")) ===-1){
store.data.items[j].remove();
}
}
}
}
if(store.data.items.length ===0){
eGMonitorApp.util.Utility.showAlert('Searched text not available.','Tests');
}
this.getAccordionListRef().setStore(store);
}
}
});
- 要求输入在数据列表中
- 从javascript创建一个列表
- 如何使用jQuery选择下拉列表的值
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- Javascript按钮下拉列表
- 如何使用json将对象列表从java转换为javascript
- 区分JSON中的矩阵和列表列表
- jQuery表单添加不适用于下拉列表
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 接受不在列表中的值-引导组合框
- 禁用jQuery中的下拉列表
- 从HTTPGET返回一个自定义对象列表,以便在Angular 2应用程序中使用
- 如何在javascript中迭代数字列表
- 如何在按钮中显示下拉列表中选定的元素
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- 鼠标悬停事件影响列表中所有行中的按钮,而不仅仅是特定按钮
- 使用图像数组列表的simplegallary.js显示适合桌面屏幕的图像
- 为什么展开和折叠不起作用,在Accordion列表中搜索文本后
- JS隐藏Accordion中的嵌套列表