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文件 document.createElement
Oct 14 Javascript
javascript学习随笔(使用window和frame)的技巧
Mar 08 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
vue keep-alive的简单总结
Jan 25 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
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
Python实现把数字转换成中文
2015/06/29 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
了解一下python内建模块collections
2020/09/07 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
高一学生期末评语
2014/04/25 职场文书
小学生安全演讲稿
2014/04/25 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
党员个人年度总结
2015/02/14 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
服务器nginx权限被拒绝解决案例
2022/09/23 Servers