dwz中jqGrid的主题变更

骑猪看日落 2021-05-12 11:50 515阅读 0赞

**前言**：本篇来介绍如何对dwz框架中的jqGrid组件变更主题。

## 第一步：从[jquery ui官网下载主题][jquery ui]，我挑选了三种比较常用的主题，然后放在如下目录中 ##

![20141112100529344][]

## 第二步：在index.jsp文件表头中增加如下代码，作用是加入jqGrid的CSS布局 ##

<link href="${ctx}/common/jqueryui/default/jquery-ui.css" rel="stylesheet" type="text/css" />

**第三步：在dwz.theme.js文件中增加对应内容，作用是当点击主题色调变化时进行对应css样式的变更，这样就会对jqGrid的主题风格进行变化了**

var _jqueryuiHref = op.jqueryuiBase + "/#theme#/jquery-ui.css";
    			return this.each(function(){
    				var jThemeLi = $(this).find(">li[theme]");
    				var setTheme = function(themeName){
    				    // 设置dwz颜色
    					$("head").find("link[href$='style.css']").attr("href", _themeHref.replace("#theme#", themeName));
    					
    					// 设置jqueryui颜色
    					// 获取head表头jquery对象，从其中获取属性值以jquery-ui.css结束的link标记，替换href属性中的变量theme为对应的主题风格
    					$("head").find("link[href$='jquery-ui.css']").attr("href", _jqueryuiHref.replace("#theme#", themeName));

# #

## 实现效果：当在主页中切换主题时，jqgrid的颜色方案也进行了变更，见如下效果 ##

![20141112101207768][]

![20181222173051615.png][]

[jquery ui]: http://jqueryui.com/resources/download/jquery-ui-themes-1.10.4.zip
[20141112100529344]: /images/20210511/0d332ae286da473dabb6e4c7faedff58.png
[20141112101207768]: /images/20210511/d9bee8e11a0d4f42b2d75297fd61c473.png
[20181222173051615.png]: /images/20210511/34933cef384e402ba3e9ee8f6212fb9f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，515人围观）

还没有评论，来说两句吧...

相关阅读

相关 jqgrid

最近在写前端的一些东西用到了jqgrid.可是页面显示的日期总是无法成功变成想要的格式.![20200317110810276.png][] 这样写页面出现的是NaN,按照网

快来打我*/ 2023年10月07日 11:14/ 0 赞/ 52 阅读

相关 jqgrid

[http://www.trirand.com/blog/jqgrid/jqgrid.html][http_www.trirand.com_blog_jqgrid_jqgrid

墨蓝/ 2022年08月07日 02:54/ 0 赞/ 262 阅读

相关【JqGrid】jqgrid合并单元格

1、jqgrid官方的事件和方法 [http://www.trirand.com/jqgridwik ... %5B%5D=gridcomplete][http_www.t

川长思鸟来/ 2022年07月14日 04:55/ 0 赞/ 302 阅读

相关【JqGrid】JqGrid日期格式化处理

使用JqGrid显示日期是转换后的结果，即显示的毫秒数。需要自己进行手工处理，处理后的代码如下： {label:'日期',name: 'departure_date'

偏执的太偏执、/ 2022年07月13日 21:09/ 0 赞/ 254 阅读

相关对jqgrid中的日期格式化

对jqgrid中的日期格式化 / 函数名称: <ATFunc>currencyFmatter</ATFunc> 函数功能: <ATFuncD

野性酷女/ 2022年04月02日 04:55/ 0 赞/ 285 阅读

相关 dwz之jqgrid请求重复提交bug修复

dwz之jqgrid请求重复提交bug修复。问题描述 <span style="font-family:Microsoft YaHei;font-size:1

我不是女神ヾ/ 2021年09月10日 11:58/ 0 赞/ 408 阅读

相关 dwz嵌入jqGrid

前言：本篇主要介绍如何在dwz框架中嵌入jqGrid组件，因为dwz自带的表格组件功能不够全面，而jqGrid使用起来的确非常的不错，于是我们来看看两者结合起来有什么不一样吧。

待我称王封你为后i/ 2021年09月10日 10:38/ 0 赞/ 400 阅读

相关 dwz中对jqGrid设置a标签

前言：本篇来介绍在DWZ框架中，如何对jqGrid组件进行a标签设置，防止其在点击的时候跳出dwz框架。 ![Center][] 第一步在dwz.a

r囧r小猫/ 2021年09月10日 10:38/ 0 赞/ 386 阅读

相关 dwz之BaseConditionVO

前言：dwz中，从view到controller再到model，对于查询条件，dwz将其封装到BaseConditionVO对象中，通过这个对象对前端提交的查询条件和mybat

忘是亡心i/ 2021年06月24日 13:59/ 0 赞/ 371 阅读

相关 dwz中jqGrid的主题变更

前言：本篇来介绍如何对dwz框架中的jqGrid组件变更主题。第一步：从[jquery ui官网下载主题][jquery ui]，我挑选了三种比较常用的主题，然后放在如下

骑猪看日落/ 2021年05月12日 11:50/ 0 赞/ 516 阅读