如何利用jqGrid表格方法重新设置caption属性值

最新推荐文章于 2022-12-06 23:14:06 发布
最新推荐文章于 2022-12-06 23:14:06 发布
阅读量5.9k 收藏
点赞数 1
分类专栏： JQuery 文章标签： jquery jqgrid
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/you23hai45/article/details/72906480
版权
本文介绍了如何在jqGrid中动态改变表格的caption属性值，以实现标题随年份变化的效果。通过设置初始caption和使用setCaption方法可以完成标题的更新。
摘要由CSDN通过智能技术生成

1、问题背景

     （1）jqGrid生成表格带有标题，固定不变的

     （2）表格标题随着年份进行变化


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>如何设置表格caption值</title>
		<link rel="stylesheet" href="../css/ui.jqgrid-bootstrap-ui.css" />
		<link rel="stylesheet" href="../css/ui.jqgrid-bootstrap.css" />
		<link rel="stylesheet" href="../css/ui.jqgrid.css" />
		<
最低0.47元/天 解锁文章
翱翔天地
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jqGrid中文文档之选项设置
09-03
- `width`：设置表格的宽度，可以是像素值或百分比。 - `height`：设定表格的高度，同样可以是像素值或百分比。例如，`height: 'auto'` 可以让表格自动适应内容。 2. **数据类型**： - `datatype`：定义表格数据...
jqGrid属性中文详细说明
10-11
### jqGrid属性中文详细说明 #### 一、引言 ...理解这些属性的具体含义和作用有助于开发者更高效地使用jqGrid来构建高质量的表格展示界面。希望本文能为正在学习和使用jqGrid的朋友提供一定的参考价值。
jqgrid-2动态改变列编辑属性
xcc_2269861428的博客
06-15 5013
JqGrid 的列属性见链接：http://www.qinbin.me/jquery-colmodel-property-descriptioneditType是列的编辑属性，可为text、textarea，select、checkbox、password、button、image、file等。     更详细的编辑属性见：http://www.trirand.com/jqgridwiki/do
jQuery之 jqGrid的caption居中
weixin_34226706的博客
11-21 1577
2019独角兽企业重金招聘Python工程师标准>>> ...
html caption属性的值,如何设置caption属性
weixin_39640265的博客
06-04 2849
如何修改 表单 的 Caption 属性。直接给表单中对应的元素设置相应的css样式就是可以实现设置字体等属相的样式的。 设置表单输入框字体样式的代码实例如下： float #text{ color: red; font-style: italic; /*设置了字体颜色为红色。在学VB设计时，对象名称为command1的caption属性设command1 是一个按钮控件。设置它的值为“显示”，目...
html caption属性的值,然后在属性面板中更改控件的Caption属性值
weixin_42599908的博客
06-04 890
使用VBA程序制作随机播放PPT幻灯片的的方法1、启动PowerPoint 2013并打开演示文稿，该演示文稿已经完成了标题页的制作和题目的添加。使用技巧429介绍的方法在幻灯片中添加一个按钮控件，并在“属性”面板中更改控件的“Caption”属性值，如图1所示。图1　更改控件的“Caption”属性值2、右击幻灯片中的按钮控件，选择快捷菜单中的“查看代码”命令，在打开的Visual Basi...
Jqgrid属性详解[定义].pdf
10-11
JqGrid是一款强大的...这些属性只是JqGrid众多配置选项的一小部分，它们提供了极大的灵活性，可以根据具体需求定制表格的行为和外观。理解并熟练使用这些属性，能够帮助开发者创建出功能强大且用户友好的数据网格。
jqgrid使用步骤及说明
lbxhappy的专栏
05-17 415
                                      jqgrid使用说明   jqGrid 是一个用来显示网格数据的jQuery插件，可以动态的对数据网格的数据进行添加、删除、修改、查询、排序、拖拽等操作，数据源可以是json、xml   官网下载地址：http://www.trirand.com/blog/?page_id=6 官网文档：http://ww...
Jqgrid教程（简单上手）
FromNowOnUntilTheEnd
04-03 3985
这里不用我多说Jqgrid怎么好，通过下图给大家演示一下：下面说一说如何轻松使用它：1.首先需要下载jqgrid的相关包：http://www.trirand.com/blog/?page_id=6（根据需要自行下载）2.然后需要下载jqgrid皮肤文件：可以用jquery-ui，jqgrid本身支持jquery-ui，下载地址：http://jqueryui.com/themeroller/（选...
jqgrid动态生成colnames和colmodel
风轻云淡 勇往直前
07-31 8523
jqgrid动态生成column和row，不能编辑这个问题我查了2天，怎么都不理解，为什么使用jqgrid.(‘editRow’,id)不能编辑。 开始时方向错了一直以为是库和js文件代码错误，最后才发现，json传递过来的model的editable属性没起作用。 在前端重新在设置一次即可。 var grid = $("#list");
jqgrid动态列动态生成colModel和colNames
热门推荐
mofeimo110的博客
05-19 3万+
参考网站：http://blog.mn886.net/jqGrid/ demo下载自该网站》参数-方法-事件-文档》新手demo下载》点击此处下载此demo 在应用过程中稍作修改（只修改index.js文件）： 静态colModel： function pageInit(){ var jqdata=[{"userid":01,"username":"皮皮虾","password"...
Bootstrap-jqgrid学习（十六）
dengfengling999的博客
12-06 844
表格属性 分页属性：显示总条数 每页显示多少条：定义下拉列表，展示每页显示条数： 列排序：给表格定义标题： 定义是否隐藏表格的下拉按钮： 自适应父容器： 指定表格的高度：设置页面初始的页码： 指定分页栏的位置：是否显示翻页按钮： 是否展示跳转页面输入框： listpage.json：
前端基于JQgrid实现自定义列头展示
weixin_30242907的博客
06-06 439
先上效果图 因为公司项目的需要，并且公司只有我这一个能写js的前端，这个自定义展示jqgrid列选项的需求依然是交由我写，辣么就分享一下我的工作成果。 1 //初始化函数 2 multiSelectColInit(); 3 //调用下拉多选点击事件以及对应传参 4 5 function multiSelectColInit() { 6 ...
jqgrid 常用样式设置
ljj920645236的专栏
07-02 673
.如果要使用jqgrid中caption中文字居中显示
jqgrid动态列动态生成colModel和colNames（支持分页）
mofeimo110的博客
09-06 7338
详细代码请看：jqgrid动态列动态生成colModel和colNames 之前的做法，由于是进行了一次查询，jqgrid本质上并未向后台查询数据，所以jqgrid自带的分页是不工作的，之前我做的需求不需要分页，只是需要动态生成列，所以没发现这个问题，有道友在帖子下问，我才注意到。 目前来说我能想到的有两种解决方式： 一、比较麻烦，需要手写第一次分页 sql： select use...
jqGrid 自定义按钮
07-16 150
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters}); jQuery("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButtonAdd',"#pager",{parameters}); {caption:"NewButto...
Jqgrid 详解
qq_27009517的博客
05-19 1万+
Jqgrid入门-显示基本的表格(一) 首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中，Jqgrid的特点是非常鲜明的。 特点如下: 完整的表格呈现与运算功能，包含换页、栏位排序、grouping、新增、修改及删除资料等功能。 自定义的工具列。 预设的Navigator工具列，可以很容易的使用新增、删除、编辑、检视及搜寻等功能。 完整的分页功能。 按下任一栏位的标头，皆可以该栏位为排序项目。无论是升序或降序皆可。 预设的action formatter，可以快...
设置 jqgrid表格样式
最新发布
06-06
可以通过以下步骤设置 jqGrid 表格样式： 1. 引入 jqGrid 插件和样式文件。 ``` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.4.0/css/ui.jqgrid.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.4.0/js/jquery.jqgrid.min.js"></script> ``` 2. 在 HTML 页面中添加一个 div 元素作为表格容器。 ``` <div id="grid"></div> ``` 3. 使用 JavaScript 代码初始化 jqGrid 表格并设置样式。 ``` $(function(){ $("#grid").jqGrid({ url: "data.json", datatype: "json", colModel: [ { name: "id", label: "ID", width: 50 }, { name: "name", label: "Name", width: 150 }, { name: "age", label: "Age", width: 50 }, { name: "address", label: "Address", width: 200 } ], rowNum: 10, rowList: [10, 20, 30], pager: "#pager", sortname: "id", viewrecords: true, sortorder: "asc", caption: "Sample Grid" }); $("#grid").jqGrid("navGrid", "#pager", { edit: false, add: false, del: false }); }); ``` 4. 在 CSS 文件中添加样式。 ``` .ui-jqgrid { font-size: 14px; } .ui-jqgrid tr.jqgrow td { padding: 5px; } .ui-jqgrid .ui-jqgrid-hdiv { background-color: #f2f2f2; } .ui-jqgrid .ui-jqgrid-btable { border-collapse: separate; border-spacing: 0px; } .ui-jqgrid .ui-jqgrid-pager { background-color: #f2f2f2; border-top: none; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-table { margin: 0; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-table .ui-pg-button { border: none; margin: 0 5px; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-table .ui-pg-button:hover { background-color: #e6e6e6; } ``` 注意：样式文件中的样式可以根据需要进行修改，以上只是一个示例。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值