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 可排列的表实现代码
Nov 13 Javascript
Javascript模块化编程详解
Dec 01 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
javascript cookie的简单应用
Feb 24 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 Javascript
Vue多选列表组件深入详解
Mar 02 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
JAVA/JSP学习系列之四
2006/10/09 PHP
php生成随机密码的几种方法
2011/01/17 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
python使用分治法实现求解最大值的方法
2015/05/12 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
Python中的With语句的使用及原理
2020/07/29 Python
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
实习生自荐信范文
2013/11/13 职场文书
2014年教师节寄语
2014/04/03 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
八年级数学教学反思
2016/02/17 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript