給jqGrid資料行新增修改和刪除操作連結(可以執行)

阿新 • • 發佈：2019-01-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>

給jqGrid資料行新增修改和刪除操作連結(可以執行)

給jqGrid資料行新增修改和刪除操作連結(可以執行)

Java Web如何操作Cookie的新增修改和刪除

mongodb修改和刪除操作

JDBC實現修改和刪除操作

Git 本地的撤銷修改和刪除操作

實現對easyui-datagrid的資料行批量修改（包括修改內容和刪除）

Hive的DDL資料定義(二)表的修改和刪除

實驗三表資料的插入、修改和刪除

C#對DataGridView中的資料進行新增、修改、刪除操作c#操作datatable

phpMyAdmin 安裝，建立、修改和刪除資料庫及插入、瀏覽、搜尋資料表中的資料

Linux中新增、修改和刪除使用者和使用者組

用java實現對MySql資料庫中資料的讀取、插入、修改和刪除

【C#】C#操作XML方法：新增、修改和刪除節點與屬性

Android管理聯絡人（包含新增，查詢，修改和刪除；以及不同版本區別）

MyBatis批量新增，修改和刪除

sharepoint 2016 學習系列篇(14)-自定義列表應用篇-(3)列表資料的新增,修改,刪除操作

Quartz 2.2 動態新增、修改和刪除定時任務

C# 新增、修改和刪除PDF書籤

Ajax實現新增、修改和刪除提示

web前端之Ajax遍歷json後對每一條資料進行相應的修改和刪除

給jqGrid資料行新增修改和刪除操作連結(可以執行)

相關推薦