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

Question

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

如何为每个table设置不同的主题？

我试过类似的方法：

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

但是没用。

Answer 1

来自 documentation of jTable It is pretty clear that they are using jquery-ui themeroller 主题，

jTable has it's own themes those can be used easily. But, you may want to use color schema and styles of your jQueryUI as jTable's theme. So, this option can be used to declare jTable to use jQueryUI's colors and styles. To do it, set jqueryuiTheme: true in your jTable initialization code

所以，那么对于如何在单个页面中使用多个主题的问题。

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

请参阅此 Q/A 了解更多详情。

因此，在您使用 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;
}
..................
.....................
.....................

因此，您可以手动将它添加到您的主题中，或者从 jquery ui 下载中捆绑它。

对于 jTable，将其用作，

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

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

How can I set different themes to multiple (jQuery) jTable on the same page?

jquery

jquery-jtable