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 相关文章推荐
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
JsRender for object语法简介
Oct 31 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
详解react-redux插件入门
Apr 19 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
深入了解JS之作用域和闭包
Jun 16 Javascript
为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
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
php显示时间常用方法小结
2015/06/05 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
php文件上传类的分享
2017/07/06 PHP
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
React Native时间转换格式工具类分享
2017/10/24 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
python使用7z解压apk包的方法
2015/04/18 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
python实现简易通讯录修改版
2018/03/13 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
法学专业应届生求职信
2013/10/16 职场文书
客服专员岗位职责范本
2013/11/29 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
个人工作表现评语
2014/04/30 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
荆州古城导游词
2015/02/06 职场文书
个人自荐书范文
2015/03/09 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
mysql的单列多值存储实例详解
2022/04/05 MySQL