一个关于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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 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
Laravel 5框架学习之表单验证
2015/04/08 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
javascript jQuery插件练习
2008/12/24 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
python sys.argv[]用法实例详解
2018/05/25 Python
在python 中实现运行多条shell命令
2019/01/07 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
Python 切分数组实例解析
2019/11/07 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
公司总经理岗位职责范本
2014/08/15 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
基于Python编写一个监控CPU的应用系统
2022/06/25 Python