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 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
JQuery 获得绝对,相对位置的坐标方法
Feb 09 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 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
PHP实现网上点歌(二)
2006/10/09 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
js常用代码段收集
2011/10/28 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
2016/07/11 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
面向对象设计的原则是什么
2013/02/13 面试题
4s店总经理岗位职责
2013/12/31 职场文书
单位刻章介绍信范文
2014/01/11 职场文书
小学生环保演讲稿
2014/04/25 职场文书
小学运动会报道稿
2014/10/04 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
一文搞懂Redis中String数据类型
2022/04/03 Redis