一个关于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 面向对象编程基础:继承
Aug 21 Javascript
js event事件的传递与冒泡处理
Dec 06 Javascript
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
深入浅析var,let,const的异同点
Aug 07 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
前端开发基础javaScript的六大作用
Aug 06 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加密解密示例分享
2014/01/29 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
PHP实现小偷程序实例
2016/10/31 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
python django 实现验证码的功能实例代码
2017/05/18 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
python 批量修改/替换数据的实例
2018/07/25 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
物理系毕业生自荐信
2013/11/01 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
绘画专业自荐信
2014/07/04 职场文书
临时租车协议范本
2014/09/23 职场文书
一般党员对照检查材料
2014/09/24 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
事业单位聘任报告
2015/03/02 职场文书
办公室卫生管理制度
2015/08/04 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技