一个关于jqGrid使用的小例子(行按钮)


Posted in Javascript onNovember 04, 2011
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jqGrid的JSON数据显示</title> 
<style type="text/css"> 
body{font-size:12px;} 
</style> 
<link href="../css/redmond/jquery-ui-1.8.14.custom.css" rel="Stylesheet"/> 
<link href="../css/ui.jqgrid.css" rel="Stylesheet"/> 
<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="../js/jquery-ui-1.8.14.custom.min.js"></script> 
<script type="text/javascript" src="../js/grid.locale-cn.js"></script> 
<script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script> 
<script type="text/javascript"> 
function Modify(id) { //单击修改链接的操作 
var model = jQuery("#list1").jqGrid('getRowData', id); 
//alert(model.Id); 
$("#txtCityCode").val(model.Code); 
$("#txtCityName").val(model.Name); 
$("#txtFID").val(model.Fid); 
$("#modifyform").dialog({ 
height:230, 
width:400, 
resizable:false, 
modal:true, //这里就是控制弹出为模态 
buttons:{ 
"确定":function(){ 
alert("在这里对数据进行修改!"); 
$(this).dialog("close"); 
}, 
"取消":function(){$(this).dialog("close");} 
} 
}); 
} 
function Delete(id) { //单击删除链接的操作 
alert("在这里执行异步删除操作,此时点击了id为 "+id+" 的行!"); 
} 
$(document).ready(function(){ 
$("#list1").jqGrid({ 
url:'JsonDataHandler2.aspx', 
datatype:"json", 
mtype:'GET', 
height:200, 
colNames:['编号','城市编号','城市名称','所属省份编号','修改','删除'], //注意在colNames和colModel中都不要忘记加修改和删除这两列 
colModel:[ 
{name:'Id',index:'Id',width:55}, 
{name:'Code',index:'Code',width:100}, 
{name:'Name',index:'Name',width:180, sortable:false}, 
{name:'Fid',index:'Fid',width:180}, 
{name:'Modify',index:'Id',width:80,align:"center",sortable:false}, 
{name:'Delete',index:'Id',width:80,align:'center',sortable:false} 
], 
//autowidth:true, 
jsonReader:{ 
page:"page", 
total:"total", 
repeatitems:false, 
id:"Id" 
}, 
pager:jQuery('#pager1'), 
rowNum:20, 
rowList:[10,20,30], 
sortname:'Id', 
sortorder:'asc', 
viewrecords:true, 
caption:'jqGrid使用JSON数据测试', 
gridComplete:function(){ //在此事件中循环为每一行添加修改和删除链接 
var ids=jQuery("#list1").jqGrid('getDataIDs'); 
for(var i=0; i<ids.length; i++){ 
var id=ids[i]; 
modify ="<a href='#' style='color:#f60' onclick='Modify("+ id +")'>修改</a>"; //这里的onclick就是调用了上面的javascript函数 Modify(id) 
del ="<a href='#' style='color:#f60' onclick='Delete("+ id +")' >删除</a>"; 
jQuery("#list1").jqGrid('setRowData', ids[i], { Modify: modify, Delete: del }); 
} 
} 
}).navGrid("#pager1",{edit:false,add:false,del:false,search:false}); }); 
</script> 
</head> 
<body> 
<table id="list1"></table> 
<div id="pager1"></div> 
<div id="modifyform" title="修改城市资料" style="display:none;"><!-- 该Div的作用就是当点击jqGrid表格中的修改链接时弹出的dialog, 注意是在上面的Modify(id)函数中给下面的input赋值 --> 
<p>城市编号:<input type="text" id="txtCityCode"/></p> 
<p>城市名称:<input type="text" id="txtCityName"/></p> 
<p>所属省份编号:<input type="text" id="txtFID"/></p> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 #Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 #Javascript
关于URL中的特殊符号使用介绍
Nov 03 #Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 #Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 #Javascript
遍历jquery对象的代码分享
Nov 02 #Javascript
jquery 笔记 事件
Nov 02 #Javascript
You might like
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
瑞士国际航空官网:SWISS
2016/07/21 全球购物
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
升职自荐信范文
2015/03/27 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
MySQL 数据丢失排查案例
2021/05/08 MySQL
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL