jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法


Posted in Javascript onOctober 22, 2010

一般的,一个jqGrid的基本属性有一下几个常用的。

$("#id").jqGrid({ 
url: "", 
datatype: "local", 
postData: { strJson: Data }, 
mtype: "post", 
height: 45, 
width: 450, 
rowNum: rum, //每页的记录数 
pgtext: "第{0}页 共{1}页", 
pgbuttons: true, 
autoheight: true, 
rownumbers: false, // 是否显示行数 
pgbuttons: true, // 分页按钮是否显示 
pginput: true, // 是否允许输入分页页数 
scrollrows: false, // 是否显示行滚动条 
viewrecords: true, // 是否显示总记录数 
multiselect: true, // 是否显示复选框 
recordpos: "left", // 记录数显示位置 
sortorder: "asc", //排序方式 
pager: "#Pager" )}

在初始化的时候,若不想执行表格的初始化方法,则需要设置url为空,datatype设置为"local",否则会有js错误,导致页面上的button按钮不起作用。

如果需要在开始时候执行表格的初始化,则需要设置url的值,在.net mvc架构下,即“/controller/action/”这样的格式,第一个"/"是必须的,否则不能进入后台的action中,最后一个“/”好像不是必需的,一般都加上。在设置了url后,还要注意的问题就是datatype要与postData的数据类型相匹配,否则会有错误。例如datatype:"json",那么postData需要传的是json对象。

如果想动态的执行表格的初始化,那么刚开始可以不用设置url值,datatype设置为"local"(否则报错)。然后动态的触发jqGrid的初始化action。

比如,在一张表中双击后后触发,代码如下:

//双击行事件 
ondblClickRow: function () { 
courseData = JSON.stringify({ 
stuNum: studentNum, 
rowNum: rum, 
page: 1 
}); 
jQuery("#courseInfoGrid").jqGrid("setGridParam", { 
url: "/PersonalArrearsSettlement/GetStudentCourseInfo", //设置表格的url 
datatype: "json", //设置数据类型 
postData: { strJson: courseData } 
});

这样就可以动态的显示表格的数据了。

Javascript 相关文章推荐
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
extjs render 用法介绍
Sep 11 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 #Javascript
使用jQuery模板来展现json数据的代码
Oct 22 #Javascript
jQuery 表单验证扩展(四)
Oct 20 #Javascript
jQuery 表单验证扩展(三)
Oct 20 #Javascript
jQuery 表单验证扩展代码(二)
Oct 20 #Javascript
事件模型在各浏览器中存在差异
Oct 20 #Javascript
自写简单JS判断是否已经弹出页面
Oct 20 #Javascript
You might like
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
深入php之规范编程命名小结
2013/05/15 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
Python 的 Socket 编程
2015/03/24 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
python实现杨氏矩阵查找
2019/03/02 Python
Python转换时间的图文方法
2019/07/01 Python
python word转pdf代码实例
2019/08/16 Python
python编写计算器功能
2019/10/25 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
现金出纳岗位职责
2014/03/15 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
二手房购房协议书范本
2014/10/05 职场文书
后进生评语大全
2015/01/04 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL