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高级程序设计 DOM学习笔记
Sep 10 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
vant 中van-list的用法说明
Nov 11 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
PHP时间函数使用详解
2019/03/21 PHP
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
Python Socket编程入门教程
2014/07/11 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
Python3实现定时任务的四种方式
2019/06/03 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
香港礼品网站:GiftU eshop
2017/09/01 全球购物
若干个Java基础面试题
2015/05/19 面试题
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
创业计划书六个要素
2013/12/26 职场文书
党员实事承诺书
2014/03/26 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
社区重阳节活动总结
2015/03/24 职场文书
初中数学教学随笔
2015/08/15 职场文书
导游词之无锡梅园
2019/11/28 职场文书
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技