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 相关文章推荐
javascript Keycode对照表
Oct 24 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
jQuery 选择器详解
Jan 19 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
个人小程序接入支付解决方案
May 23 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 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
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
php中return的用法实例分析
2015/02/28 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
情侣吵架检讨书
2014/02/05 职场文书
财务管理专业自荐书
2014/09/02 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
Python实现文字pdf转换图片pdf效果
2022/04/03 Python
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers