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 last-child 列表最后一项的样式
Jan 22 Javascript
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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设计模式 Factory(工厂模式)
2011/06/26 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
php生成随机颜色的方法
2014/11/13 PHP
比较完整的微信开发php代码
2016/08/02 PHP
php中的依赖注入实例详解
2019/08/14 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
简单学习vue指令directive
2016/11/03 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
python实现机器学习之多元线性回归
2018/09/06 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
python如何变换环境
2020/07/21 Python
使用Python封装excel操作指南
2021/01/29 Python
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
大学生物业管理求职信
2013/10/24 职场文书
工作过失检讨书
2014/02/23 职场文书
任命书范本大全
2014/06/06 职场文书
解除劳动合同证明书
2014/09/26 职场文书
商务邀请函
2015/01/30 职场文书
团员年度个人总结
2015/02/26 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android