一个关于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 相关文章推荐
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
JS函数进阶之继承用法实例分析
Jan 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无限分类的深入理解
2013/06/02 PHP
php简单判断文本编码的方法
2015/07/30 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
TensorFlow实现模型评估
2018/09/07 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
大学生评语大全
2014/04/18 职场文书
运动会方阵口号
2014/06/07 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
公务员处分决定书
2015/06/25 职场文书
仓库管理制度范本
2015/08/04 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers