如何使用jqwidget更改网格主题
我使用jqgrid来显示数据。我对此很陌生，我试过如何改变jqGrid的主题？，但这对我不起作用。有人能告诉我如何改变网格的主题吗？
回答 2
Stack Overflow用户
发布于 2016-01-29 07:00:55
对于jQWidgets网格，您应该做两件事:包含CSS主题文件，然后将小部件的主题属性设置为主题的名称。示例：造型与外观
Stack Overflow用户
发布于 2016-01-28 12:16:47
默认情况下，jqGrid对网格使用jQuery UI CSS。因此，您必须包括一些jQuery用户界面CSS。我建议您从著名的CSS中选择一个，并直接从Internet上使用它。有一些常见的CDN，它提供世界上不同位置的服务器，并且缓存时间间隔很长。因此，CSS将被快速加载，下一次加载将主要从本地缓存进行。作为结果，加载通常可以更快地从您的私人网站加载。
在jQuery UI博客上，您可以找到jQuery CDN、MaxCDN、Google ( CDN )、Microsoft等的URL。
标准主题的清单相对较长:黑色领带、布利策、库比蒂诺、深色蜂箱、点-勒夫、茄子、兴奋-自行车、电影、热运动鞋、人性、乐蛙、薄荷、阴天、胡椒粉、雷德蒙德、光滑、南街、起点、阳光、华丽的钱包、时髦、ui-黑暗、ui-轻盈和维德。你可以选择一个人并利用它。例如
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">同样，自由jqGrid (这是我开发的jqGrid的分支)也可以从另外两个CDN (泼尼士和jsDelivr CDN)中访问。有关详细信息，请参阅维基文章。
因此，使用免费jqGrid的典型代码看起来可以像描述的这里
<!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主题，但是应该只使用现有的主题。
https://stackoverflow.com/questions/35059146
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号