一个关于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 相关文章推荐
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 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
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
python读取和保存图片5种方法对比
2018/09/12 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
python自动下载图片的方法示例
2020/03/25 Python
python tkinter实现连连看游戏
2020/11/16 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
医学毕业生自荐信
2013/10/11 职场文书
甘南现象心得体会
2014/09/11 职场文书
医院领导班子整改方案
2014/10/01 职场文书
整改报告怎么写
2014/11/06 职场文书
聚会通知怎么写
2015/04/23 职场文书
教师素质教育心得体会
2016/01/19 职场文书
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫