Question

我需要在同一页面上放置不同的jTable。

如何为每张桌子设置不同的主题？

我尝试过类似的事情：

$('#TableContainer').jtable({
                    jqueryuiTheme: 'js/jtable/themes/metro/blue/jtable.min.css',
                    title: 'My table title',
                    actions: {
                       .......

但它没有用。

Answer 1

来自documentation of jTable很明显，他们正在使用jquery-ui themeroller作为主题，

jTable拥有可以轻松使用的主题。但是，你可能想要使用jQueryUI的颜色模式和样式作为jTable的主题。所以，此选项可用于声明jTable以使用jQueryUI的颜色和样式。为此，请在jTable中设置jqueryuiTheme: true 初始化代码

那么，接着问一个如何在一个页面中使用多个主题的问题。

jQuery UI提供了一种在主题中定义CSS Scope的方法。因此，您可以为主题定义自己的包装器，从而允许您在单个页面中使用多个主题。

有关详细信息，请参阅此Q/A。

因此，在您使用CSS Scope下载主题后，主题文件将会是，

CSS Scope = table1
theme = Sunny

jquery-ui.theme

/* Component containers
----------------------------------*/
table1 .ui-widget {
    font-family: Segoe UI,Arial,sans-serif;
    font-size: 1.1em;
}
table1 .ui-widget .ui-widget {
    font-size: 1em;
}
table1 .ui-widget input,
table1 .ui-widget select,
table1 .ui-widget textarea,
table1 .ui-widget button {
    font-family: Segoe UI,Arial,sans-serif;
    font-size: 1em;
}
..................
.....................
.....................

因此，您可以手动将其添加到主题中，也可以从jquery ui downloads中捆绑它。

对于jTable，使用它，

<div class='table1'>//jTable here</div>
<div class='table1'>//jTable here</div>
<div class='table2'>//jTable here</div>

如何在同一页面上为多个（jQuery）jTable设置不同的主题？

1 个答案: