一个关于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 相关文章推荐
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
layui使用label标签的方法
Sep 14 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
Echarts.js无法引入问题解决方案
Oct 30 Javascript
JS数组的常用方法整理
Mar 31 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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
js性能优化技巧
2015/11/29 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
Python中的ceil()方法使用教程
2015/05/14 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
经贸日语专业个人求职信范文
2013/12/28 职场文书
会计学自我鉴定
2014/02/06 职场文书
团日活动总结书格式
2014/05/08 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
丽江古城导游词
2015/02/03 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
个人承诺书格式范文
2015/04/29 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python