给jqGrid数据行添加修改和删除操作链接

来源：互联网发布：52java手机游戏破解网编辑：程序博客网时间：2024/04/26 07:16

我这里用的不是jqGrid的自带的编辑和删除操作，我已经把分页导航栏下的编辑，删除，搜索都取消掉了,就是这句$("#list1").navGrid("#pager1",{edit:false,del:false, search:false}), 然后在数据加载完成后，给每行添加了修改和删除链接

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>