如何使用 jqwidgets 更改网格的主题

Question

我正在使用 jqgrid 来显示数据。我对此很陌生我试过 How to change the theme of the jqGrid? 但它对我不起作用。谁能告诉我如何更改网格的主题？

Answer 1

jqGrid 默认使用 jQuery UI CSS 作为网格。因此，您必须包括一些 jQuery UI CSS。我建议您从著名的 CSS 中选择一个并直接从 Internet 上使用它。有一些常见的CDNs，它提供了世界不同位置的服务器，并且缓存的时间间隔很长。结果，CSS 将被加载 quickly 并且下一次加载将主要从本地缓存进行。结果是，从您的私人网站加载时，加载通常会更频繁 uickly。

在 jQuery UI blog 上，您可以找到 jQuery CDN、MaxCDN、Google Ajax 库 API (CDN)、Microsoft Ajax CDN等。

标准主题列表比较长：black-tie、blitzer、cupertino、dark-hive、dot-luv、eggplant、excite-bike、flick、hot-sneaks、humanity、le-frog、mint- choc、阴天、胡椒研磨机、redmond、smoothness、south-street、start、sunny、swanky-purse、trontastic、ui-darkness、ui-lightness 和 vader。你可以选择一个人并使用它。例如

<link rel="stylesheet"
       href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">

同理free jqGrid (it's the fork of jqGrid, which I develop) is accessible from two other CDNs too (cdnjs and jsDelivr CDN). See the wiki文章详解

因此，使用免费 jqGrid 的典型代码看起来像 here:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Your page title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.1/css/ui.jqgrid.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js"></script>
    <script>
    //<![CDATA[
    $(function () {
        "use strict";
        $("#grid").jqGrid({
            colModel: [
                { name: "firstName" },
                { name: "lastName" }
            ],
            data: [
                { id: 10, firstName: "Angela", lastName: "Merkel" },
                { id: 20, firstName: "Vladimir", lastName: "Putin" },
                { id: 30, firstName: "David", lastName: "Cameron" },
                { id: 40, firstName: "Barack", lastName: "Obama" },
                { id: 50, firstName: "François", lastName: "Hollande" }
            ]
        });
    });
    //]]>
    </script>
</head>
<body>
<table id="grid"></table>
</body>
</html>

也请参阅 JSFiddle 演示。

换句话说，您不需要生成自定义的 jQuery UI 主题，但您应该只使用现有的主题。

Answer 2

对于jQWidgets Grid, you should do two things: include the CSS theme file and then set the widget's theme property to the theme's name. Example: Styling and Appearance

如何使用 jqwidgets 更改网格的主题

how to change theme of grid using jqwidgets

jqgrid

jqgrid-asp.net