一个关于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 相关文章推荐
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
js实现日期级联效果
Jan 23 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
原生js实现吸顶效果
Mar 13 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 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下关于中英数字混排的字符串分割问题
2010/04/06 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
jquery dialog键盘事件代码
2010/08/01 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
python3实现SMTP发送邮件详细教程
2018/06/19 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
Python运行DLL文件的方法
2020/01/17 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
python -v 报错问题的解决方法
2020/09/15 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
武汉瑞得软件笔试题
2015/10/27 面试题
建筑施工员岗位职责
2013/11/26 职场文书
小学生新年寄语
2014/04/03 职场文书
同志主要表现材料
2014/08/21 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
追讨欠款律师函
2015/06/24 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python