jqgrid按钮、主题皮肤和弹窗

最新推荐文章于 2022-01-17 16:16:25 发布
最新推荐文章于 2022-01-17 16:16:25 发布
阅读量4.1k 收藏 1
点赞数
分类专栏： JavaScrip html jqgrid layer 文章标签： jqgrid layer 主题 弹出框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cx8218/article/details/81285522
版权
本文记录了在学习jqgrid过程中如何更换主题皮肤，并分享了找到的一个可用主题资源。同时，介绍了如何将layer弹出框与jqgrid结合使用的经验。
摘要由CSDN通过智能技术生成

最近学习jqgrid表格，想更换主题皮肤，但是网上找的很多更换主题的方法都没用，然后我之前无意中找到了一篇文章，上面给的链接下载的主题刚好我可以用。然后就想记录下来并分享！

首先先看代码：

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>夏季主题jqgrid表格</title>
	<link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css">
	<!--<link rel="stylesheet" type="text/css" style="white-space:pre" href="jqgrid/jquery.ui/jquery-ui.css">-->
	
        <!-- 主题 -->
	<!--<link rel="stylesheet" type="text/css" href="black-tie/jquery-ui.css" />-->
	<!--<link rel="stylesheet" type="text/css" href="flick/jquery-ui.css" />-->
	<!--<link rel="stylesheet" type="text/css" href="hot-sneaks/jquery-ui.css" />-->
	<!--<link rel="stylesheet" type="text/css" href="pepper-grinder/jquery-ui.css" />-->
	<link rel="stylesheet" type="text/css" href="sunny/jquery-ui.css" />
	
	<script type="text/javascript" src="jqgrid/js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></
最低0.47元/天 解锁文章
棠梨染青衣
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JQGRID简单介绍
weixin_45563184的博客
05-09 316
JQGRID 编写第一个JQGRID程序 1.https://blog.mn886.net/jqGrid/firstdemo/blog.mn886.net.zip 下载blog.mn886.net.zip 2.解压缩blog.mn886.net.zip jqgrid css js 3.把css与js文件夹引入到项目中 <!--引入CSS文件--> <!--引入BootStrap的css文件--> <link rel="stylesheet" href="${pageC
jqGrid学习笔记 完整整理
噬魂归来的专栏
04-15 237
一、jqGrid的加载。 1.引用相关头文件 引入CSS： &lt;link href="Scripts/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="Scripts/ui.jqgrid.css" rel=&quot
JqGrid样式
日常工作学习
10-28 1373
项目用的，不予注释。 .massage{border:#E9E9E9 solid;border-width:1 0 0 0; width:95%; height:95%; background:#fff; color:#222222; font-size:14px; line-height:150%}    .header{background:#5C9CCC; height:10%; fon
JqGrid插件+JqGridDemo+JqGrid主题
08-29
JqGrid插件+JqGridDemo+JqGrid主题，自己项目里引入的文件
jqGrid列表控件基本应用
坚强的尐2b゛的专栏
07-23 1625
jqGrid表格控件
Jqgrid学习（一）---基本介绍以及使用
qq_42112846的博客
03-06 1万+
最近再做项目的时候，遇到了一个新的知识点jqgrid表个控件，它再基于jquery的基础之上对页面的表单进行操作，而页面上仅仅只需要table标签，和与之匹配的命名即可； 下面我们来看一下，它的一些基本的概念： jqGrid皮肤 从3.5版本开始，jqGrid完全支持jquery UI的theme。我们可以从http://jqueryui.com/themeroller/下载我们所需要的th...
漂亮的自定义jQueryUI主题
GengV - 在Java的世界流浪
05-26 1万+
之前的项目中，使用的是jqueryUI的UI组件，jqueryUI的个性化定制确实不错，但大多是字体，颜色方面的小改动。而且不知大家是否看过jQuery的示例页面，貌似排版布局很精美，但是使用查看样式就能发现在body元素的样式中有一条针对font-size的设置。使用Firebug禁用这条样式再看看，排版一下子“肥”了n多。真的搞不懂，为什么jqueryUI的尺寸样式要这样奇怪？？ 之前
jqgrid自定义按钮
02-13
jqgrid自定义按钮，jqgrid自定义按钮，jqgrid自定义按钮
jqgrid 表格的增删改查以及modal弹出框
03-07
在这个项目文件“RuanTai.Finance”中，我们将深入探讨如何使用 jqGrid 实现这些功能，并且在修改和添加操作时使用 modal 弹出框来增强用户体验。 首先，让我们看看 jqGrid 的增删改查功能： **增加（Add）**：在 ...
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
11-29
JqGrid提供了丰富的API和回调函数，可以根据项目需求进行灵活配置和扩展。同时，对于前端开发来说，不断学习和掌握新的前端框架和技术，如React、Vue或Angular，也会对提升开发效率和代码质量大有裨益。
jQuery+Bootstrap美化弹出框
12-05
基于jQuery和Bootstrap的弹出框，替代使用浏览器弹出的警告框，优化后弹出框样式。
一个关于jqGrid使用的小例子(行按钮)
09-05
jqGrid 是一个非常强大的JavaScript组件，用于在Web页面上展示和操作表格数据。它支持多种数据源，包括JSON、XML、CSV等，并提供了丰富的功能，如排序、分页、搜索、编辑等。在这个小例子中，我们将深入理解如何在...
简单实现修改jqgrid的翻页栏显示效果
沙漠渔溏
08-20 4864
沙漠渔溏--时间小记:2018年8月2日 11:29:12         从今年五一开始接触软件开发行业，看到公司做的web程序应用很多jqgrid插件，说句实话好多地方感觉好丑 话不多说先上代码再看演示(写的很糙,看网上没有,仅做参考吧) js文件 /*** * 2018年7月26日 09:19:56 * 基于jqGrid 4.4.3 */ (function ($) { ...
java笔记：本身下手写javaEE框架（八）--为jqgrid换换皮肤然后加到我的框架里
jjjy00的专栏
12-14 1401
时候就是生命，浪费了时候就是就义了生命。　　今天让我倒腾半天的居然不是写我的javaEE框架，而是调换jqgrid的皮肤。我是相当的憎恶jqgrid的默认皮肤，它总让我想起一向想学而都没学过的EXTJS，看多了那种淡蓝色的皮肤太多了绝对视觉疲惫，所以这篇博文就从jqgrid换肤讲起吧，这个过程在收集上找到的材料斗劲少，是以我今天的博文还是很有实用价值的。不空话了，下面开端吧！ 最严重的浪费就是时
jqgrid 的例子
qq_27009517的博客
01-17 634
<!DOCTYPE html> <html lang="en"> <head> <title>员工管理</title> <#include "/common/common.html" /> <#include "/common/eav.html" /> <script> // edit $(document).on("click", ".jgBtnEdit", function (...
jqGrid 各种参数 详解
web开发自学
05-09 3106
JQGrid JQGrid是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。 JQGrid Demo 是一个在线的演示项目。在这里，可以知道jqgrid可以做什么事情。 下面是转自其他人blog的一个学习资料，与其说是学习资料，说成查询帮助文档更加合适。 jqGrid学习之 ------------- 安装 jqGrid安装很简单，只需把相应的c...
jqGrid使用方法
热门推荐
YoungRoc--FLY
09-25 1万+
jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面，其官方网址为：http://www.trirand.com。   一、jqGrid特性： ·        基于jquery UI主题，开发者可以根据客户要求更换不同的主题。 ·        兼容目前所有流行的web浏览器。 ·
jqGrid选中行、格式化、自定义按钮、隐藏
huana的博客
07-10 4580
jqGrid选中行、格式化、自定义按钮、隐藏获取选择一行的id：var id=$('#jqGrid').jqGrid('getGridParam','selrow');获取选择多行的id：var ids=$('#jqGrid').jqGrid('getGridParam','selarrrow');获取选择的行的数据 rowId(选择一行的id)：var rowData = $('#jqGrid')
jqgrid插件使用实例
痞子杨
01-10 900
function inittable() { var userTablevalue = { url: "/Manage/ActivityOrderManage/LoadData", datatype: "json", height:"100%", colNames: ['订单号', '订单
jqgrid 按钮添加到顶部
最新发布
06-03
要将 jqgrid 的按钮添加到顶部，你需要使用 `pager` 选项来控制分页栏的位置，并使用 `toppager` 选项来控制顶部栏的位置。具体步骤如下： 1. 在 jqgrid 的初始化选项中，将 `pager` 选项设置为 `true`，这将显示分页栏。 ```javascript $("#grid").jqGrid({ // ... 其他选项 pager: true, // ... 其他选项 }); ``` 2. 在 jqgrid 的初始化选项中，将 `toppager` 选项设置为 `true`，这将显示顶部栏。 ```javascript $("#grid").jqGrid({ // ... 其他选项 toppager: true, // ... 其他选项 }); ``` 3. 使用 `navGrid` 方法添加需要的按钮。该方法会自动将按钮添加到分页栏中，但你需要手动将它们添加到顶部栏中。你可以使用 `navButtonAdd` 方法将按钮添加到顶部栏中。以下是一个例子： ```javascript $("#grid").jqGrid('navGrid', '#grid_toppager', { // ... 其他选项 }).navButtonAdd('#grid_toppager', { caption: "Add", buttonicon: "ui-icon-plus", onClickButton: function () { // 处理添加按钮的点击事件 }, position: "last" }); ``` 在这个例子中，我们首先使用 `navGrid` 方法添加一组按钮，然后使用 `navButtonAdd` 方法将 `Add` 按钮添加到顶部栏中。`position` 选项用于指定按钮应该插入到哪个位置，这里我们设置为 `last`，表示将按钮添加到顶部栏的最后一个位置。 通过这些步骤，你就可以将 jqgrid 的按钮添加到顶部栏中了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值