如何在同一页面上为多个(jQuery)jTable设置不同的主题

Question

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

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

我试过这样的东西：

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

但它不起作用。

Answer 1

从jTable的文档中可以很清楚地看出，他们正在使用jquery ui themeroler作为主题，

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

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

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

有关更多详细信息，请参阅本问答。

因此，在您使用CSS Scope下载主题后，主题文件将看起来像

• CSS范围=表1
• 主题=阳光

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;
}
..................
.....................
.....................

因此，您可以手动将其添加到主题中，也可以从jqueryui下载中捆绑它。

对于jTable，将其用作

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