Question

我正在使用jqgrid来显示数据。我对此很新我试过How to change the theme of the jqGrid?，但它不适合我。谁能告诉我如何改变网格主题？

Answer 1

jqGrid默认使用jQuery UI CSS作为网格。因此，您必须包含一些jQuery UI CSS。我建议您从着名的CSS中选择一个并直接从Internet使用它。有一些常见的CDNs，它提供世界上不同位置的服务器，并且具有很长的缓存时间间隔。结果，CSS将被快速加载，下一次加载将主要来自本地缓存。作为结果，加载通常可以更快地从您的私人网站加载。

在jQuery UI blog上，您可以找到jQuery CDN，MaxCDN，Google Ajax Libraries API（CDN），Microsoft Ajax CDN等网址。

标准主题列表相对较长：黑色领带，blitzer，cupertino，黑暗蜂巢，dot-luv，茄子，激动自行车，轻弹，热偷偷摸摸，人性化，le-frog，mint-choc，阴，胡椒研磨机，雷德蒙德，光滑，南街，开始，阳光，时髦的钱包，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（我开发的jqGrid的分支）也可以从其他两个CDN（cdnjs和jsDelivr CDN）访问。有关详细信息，请参阅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网格，您应该做两件事：包括CSS主题文件，然后将小部件的主题属性设置为主题的名称。示例：Styling and Appearance

如何使用jqwidgets更改网格主题

2 个答案: