使用可动态查询样式化列表
Querying a stylized list with dynatable
虽然我一直在上下寻找这个问题的答案,但我还是找不到它。如果互联网上有一个我还没有搜索过的隐藏角落确实包含这个问题的答案,请告诉我。
无论如何,在Dynatable网站上有一个示例来查询表中的特定值。如果您的输入 html 确实是一个表格,这似乎有效,但如果您使用的是风格化列表这在我的情况下会产生以下错误:
Uncaught TypeError: Cannot read property 'length' of null
这可以追溯到dynatable.jquery.js文件的第1582行:
// Find an object in an array of objects by attributes.
// E.g. find object with {id: 'hi', name: 'there'} in an array of objects
findObjectInArray: function(array, objectAttr) {
var _this = this,
foundObject;
for (var i = 0, len = array.length; i < len; i++) {
var item = array[i];
// For each object in array, test to make sure all attributes in objectAttr match
if (_this.allMatch(item, objectAttr, function(item, key, value) { return item[key] == value; })) {
foundObject = item;
break;
}
}
以下是我的选择元素:
<select id="filter-prop" name="prop">
<option>All</option>
<option>First Run</option>
<option>Rejected</option>
</select>
以及我的列表的可动态转换:
// Function that renders the list items from our records
function ulWriter(rowIndex, record, columns, cellWriter) {
var cssClass = record.prop, li;
if (rowIndex % 3 === 0) { cssClass += ' first'; }
li = '<li class="' + cssClass + '"><div class="thumbnail"><div class="thumbnail-image">' + record.thumbnail + '</div><div class="caption">' + record.caption + '</div></div></li>';
return li;
}
// Function that creates our records from the DOM when the page is loaded
function ulReader(index, li, record) {
var $li = $(li),
$caption = $li.find('.caption');
record.thumbnail = $li.find('.thumbnail-image').html();
record.caption = $caption.html();
record.label = $caption.find('h3').text();
record.description = $caption.find('p').text();
record.color = $li.data('color');
record.prop = $li.attr('class');
}
var pictable = $('#picturelist').dynatable({
table: {
bodyRowSelector: 'li'
},
features :{
recordCount: false,
sorting: false,
},
dataset: {
perPageDefault: 10,
perPageOptions: [5, 10, 15, 20]
},
writers: {
_rowWriter: ulWriter
},
readers: {
_rowReader: ulReader
},
params: {
records: 'objects'
}
}).data('dynatable');
$('#filter-prop').change( function() {
var value = $(this).val();
if (value === "All") {
pictable.queries.remove("Prop");
} else if (value === "First Run") {
pictable.queries.add("Prop","span4 firstrun rejected");
pictable.queries.add("Prop","span4 firstrun");
} else if (value === "Rejected") {
pictable.queries.add("Prop","span4 firstrun rejected");
pictable.queries.add("Prop","span4 rejected");
};
pictable.process();
});
与网站的示例相比,我没有太大变化。我做的最多的是将列表示例与查询示例合并。同样,如果我对表应用类似的方法,它似乎有效,但对于我的列表则不起作用。出了什么问题?
这里的文档不是很清楚,但我今天早些时候为自己解决了同样的问题。以下是您的代码,处于工作状态:
var pictable = $('#picturelist')
.bind('dynatable:init', function(e, dynatable) {
dynatable.queries.functions['prop'] = function(record, queryValue) {
if ( record.prop == queryValue )
{
return true;
}
else
{
return false;
}
};
})
.dynatable({
table: {
bodyRowSelector: 'li'
},
features :{
recordCount: false,
sorting: false
},
dataset: {
perPageDefault: 10,
perPageOptions: [5, 10, 15, 20]
},
writers: {
_rowWriter: ulWriter
},
readers: {
_rowReader: ulReader
},
params: {
records: 'objects'
}
}).data('dynatable');
$('#filter-prop').change( function() {
var value = $(this).val();
if (value === "All")
{
pictable.queries.remove("prop");
}
else
{
pictable.queries.add("prop", value)
}
pictable.process();
});
干杯
相关文章:
- 列表样式在IE中未设置为none,但在IE中适用
- 如何在ExtJs中获得将应用于给定类列表的样式
- CKEditor自定义样式下拉列表,带有预览但没有内联
- 如何更改列表中一个元素中的文本样式
- 记事本++ Javascript格式样式和变量列表
- 如何在Javascript中设置随机生成的项目列表的样式
- jQuery Mobile-过滤复选框的列表视图会导致出现无样式的复选框
- 单击隐藏列表样式
- 如何设置下拉列表项的样式
- jQuery-构建一个树样式列表
- 使用子项设置列表项的样式
- 如何在TinyMCE 4.0.10版本中使用importcss插件?(无法加载content_css并查看样式下拉列表)
- 更改复选框列表项样式
- KendoUi 列表视图“按下以加载更多”无法使用 MVVM 样式
- jQuery 使用两个下拉列表更改输入 css 样式
- 数据表:列显示在“显示/隐藏列”列表中,即使它具有“显示:无”样式
- 使用可动态查询样式化列表
- 设置内容样式包含字体系列、字体大小和颜色的可编辑列表 (
- )
- JavaScript获取当前应用于元素的样式列表
- 如何使用jQuery动态更新CSS样式列表