我希望用Dynatable替换我的表,但我需要能够隐藏并显示某些列组才能这样做。我在现有的常规html表中执行此操作,方法是为每个组提供一个组,例如:
<td class = "group1">cell value</td>
然后我有一些隐藏和显示javascript函数:
function hideCol(columnClass){
$('table .'+columnClass).each(function(index) {
$(this).hide();
});
$('ul#hiddenCols').append('<li id="'+columnClass+'"><a href="javascript:;" onclick="showCol(\''+columnClass+'\');">Show '+columnClass+'</a></li>');
}
function showCol(columnClass){
$('table .'+columnClass).each(function(index) {
$(this).show();
});
$('li#'+columnClass).remove();
}
$(document).ready(function() {
hideCol("Group2");
hideCol("Group3");
hideCol("Group4");
$('#radio1').click(function() {
/*$(this).parent().addClass("active").siblings().removeClass("active")*/
showCol("Group1");
hideCol("Group2");
hideCol("Group3");
hideCol("Group4");
});
有没有一种合理的直接方式我可以让Dynatable做类似的事情?有没有办法可以为每个类和Dynatable分配类?
非常感谢, 亚历
答案 0 :(得分:0)
有一个设置可以使每列中的数据继承列的标题类。但是,正如我在this question中提到的那样,在执行此操作时,隐藏列的排序似乎存在错误。
我无法使用Dynatable,所以我切换到Datatables,隐藏/排序列似乎更加稳定。
答案 1 :(得分:0)
您可以按如下方式编辑dynatable.js的源代码,然后使用show()和hide()方法......
function DomColumns(obj, settings) {
...
this.hide = function(indexOrId) {
var columns = settings.table.columns;
if (typeof indexOrId == "number")
columns[indexOrId].hidden = true;
else {
for (var i = columns.length - 1; i >= 0; i--) {
if (columns[i].id == indexOrId) {
columns[i].hidden = true;
break;
}
}
}
obj.$element.find(settings.table.headRowSelector).children('[data-dynatable-column="' + indexOrId + '"]')
.first().hide();
obj.dom.update();
};
this.show = function(indexOrId) {
var columns = settings.table.columns;
if (typeof indexOrId == "number")
columns[indexOrId].hidden = false;
else {
for (var i = columns.length - 1; i >= 0; i--) {
if (columns[i].id == indexOrId) {
columns[i].hidden = false;
break;
}
}
}
obj.$element.find(settings.table.headRowSelector).children('[data-dynatable-column="' + indexOrId + '"]')
.first().show();
obj.dom.update();
};
...
};