给jqGrid数据行添加修改和删除操作链接
2011-09-01 18:06
393 查看
我这里用的不是jqGrid的自带的编辑和删除操作,我已经把分页导航栏下的编辑,删除,搜索都取消掉了,就是这句$("#list1").navGrid("#pager1",{edit:false,del:false, search:false}), 然后在数据加载完成后,给每行添加了 修改和删除链接
jqGrid完成的事件是gridComplete:function(){}(可以理解为数据都准备好了), 因为从数据库获取到的json数据没有带修改和删除两项,所以在之后的处理就是,在gridComplete事件中循环为每一行添加这两个链接,并且都给他们加上了onclick事件。先看截图:
修改的操作使用了jquery ui 的 dialog弹窗, 运行效果如下:(图上弹出的alert框是我点击确定按钮后弹出的,也就是说要修改数据,在这个确定按钮事件中进行)
页面代码:
来自:/article/5622232.html
jqGrid完成的事件是gridComplete:function(){}(可以理解为数据都准备好了), 因为从数据库获取到的json数据没有带修改和删除两项,所以在之后的处理就是,在gridComplete事件中循环为每一行添加这两个链接,并且都给他们加上了onclick事件。先看截图:
修改的操作使用了jquery ui 的 dialog弹窗, 运行效果如下:(图上弹出的alert框是我点击确定按钮后弹出的,也就是说要修改数据,在这个确定按钮事件中进行)
页面代码:
<!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>
来自:/article/5622232.html
相关文章推荐
- 给jqGrid数据行添加修改和删除操作链接(之一)
- 给jqGrid数据行添加修改和删除操作链接(之一)
- 给jqGrid数据行添加修改和删除操作链接
- 给jqGrid数据行添加修改和删除操作链接(可以执行)
- 给jqGrid数据行添加修改和删除操作链接(之一)
- Java读取json文件并对json数据进行读取、添加、删除与修改操作
- 基本查询语句及利用SQL语句完成数据的添加、删除、修改操作
- 通过Dataset操作xml数据(添加,删除,修改)
- asp.net(VB)操作Access数据库(链接/添加/修改/删除)
- jqgrid实现多行数据弹出框添加修改查询操作
- Java读取json文件并对json数据进行读取、添加、删除与修改操作
- C#对DataGridView中的数据进行添加、修改、删除操作c#操作datatable
- Ext.grid.Panel远程加载数据分页,提供添加删除修改等操作
- Zookeeper客户端基本操作java实现——创建连接、创建节点、添加修改节点内容、获取子节点、获取节点数据、删除节点
- mysql查看和修改数据库表字段编码格式及添加删除外键操作
- java操作sql server数据添加,修改,删除记录
- ArcGIS shape文件 要素类包括点,面,折线,多点,多面数据表字段以及数据的查看,添加,删除,修改四大操作
- 对DataGridView进行添加、修改、删除数据操作----C#
- oracle约束+disable与enable约束+为表添加约束+修改表约束的状态+primary key+not null+unique+foreign key+外键删除数据,可以使用的级联操作
- 数据库-T-SQL 语句-创建表,删除表,CRUD操作的添加数据,修改数据,删除数据