給jqGrid數據行添加修改和刪除操做連接

時間 2019-11-17

標籤 jqgrid 數據添加修改刪除連接简体版

原文原文鏈接

我這裏用的不是jqGrid的自帶的編輯和刪除操做，我已經把分頁導航欄下的編輯，刪除，搜索都取消掉了,就是這句$("#list1").navGrid("#pager1",{edit:false,del:false, search:false}), 而後在數據加載完成後，給每行添加了修改和刪除連接javascript

jqGrid完成的事件是gridComplete:function(){}（能夠理解爲數據都準備好了）, 由於從數據庫獲取到的json數據沒有帶修改和刪除兩項,因此在以後的處理就是，在gridComplete事件中循環爲每一行添加這兩個連接，而且都給他們加上了onclick事件。先看截圖：css

修改的操做使用了jquery ui 的 dialog彈窗, 運行效果以下:(圖上彈出的alert框是我點擊肯定按鈕後彈出的，也就是說要修改數據，在這個肯定按鈕事件中進行）html

頁面代碼 :java

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。