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 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
基于JavaScript实现飘落星星特效
Aug 10 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
小程序表单认证布局及验证详解
Jun 19 Javascript
JS实现简单的九宫格抽奖
Jun 28 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开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
Python代码的打包与发布详解
2014/07/30 Python
python如何实现一个刷网页小程序
2018/11/27 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
python之mock模块基本使用方法详解
2019/06/27 Python
python flask框架实现重定向功能示例
2019/07/02 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
经济信息系毕业生自荐信范文
2014/03/15 职场文书
日化店促销方案
2014/03/26 职场文书
保护动物的标语
2014/06/11 职场文书
市场部经理岗位职责
2015/02/02 职场文书
python之基数排序的实现
2021/07/26 Python