jQuery學習筆記–豐富多彩的Pager Bar (底部 分頁工具條) – Javascript教程_JS教程_技術文章 – 程式設計聯盟

在介紹排序與查詢之前,先介紹一下Pager、Navigator和自定義按鈕。


默認情況下,Pager Bar分為3個部分:

  • 頁碼欄區域(Pager)
  • 導航按鈕區域(Navigator Buttons)
  • 記錄信息區域(Record Information)

 

1. Pager和Record Information的常用屬性

 

在jqGrid的options選項中,有許多是專門針對Pager的,之前的例子中已經使用瞭一個——“pager”選項,用來指明Pager Bar在頁面中對應的區域。

主要的屬性有:

  • pager :必須是一個有效的html元素。這個元素可以根據頁面的需要,被放置於頁面的任何位置。在指定pager選項的值的時候,可以使用三種形式:'pager'、'#pager'、$('#pager')。但推薦使用第二種,即'#pager'。
  • pgbuttons :決定在Pager Bar裡是否顯示用於翻頁的按鍵,默認為true。
  • pginput :決定在Pager Bar裡是否顯示用於輸入目標頁碼的輸入框,默認為true。
  • pgtext :顯示當前頁碼狀態的字符串,這個與所選用的language文件有關,具體的文本格式定義在裡面。例如默認的英文格式就是“Page {0} of {1}”,其中{0}代表當前載入的頁碼;{1}代表頁碼的總數。
  • pagerpos :用於定義頁碼欄在Pager Bar中的位置,默認情況下為center,還可以是left或right。
  • rowNum :定義一次性顯示多少條記錄,默認值為20;這個選項在第一篇文章中已經介紹過瞭。
  • rowList :定義rowNum可供選擇的值的數組,默認值為空數組;這個選項在第一篇文章中也已經介紹過瞭。
  • lastpage :隻讀屬性,返回頁碼總數,也即從response中解析出來的那個對應著“total”項的值(參見第一篇文章jsonReader部分)。
  • viewrecords :定義是否在Pager Bar中顯示記錄數信息。
  • recordpos :用於定義記錄信息在Pager Bar中的顯示位置,默認為right,還可以是left或center。
  • records :隻讀屬性,返回記錄總數,也即從response中解析出來的那個對應著“record”項的值(參見第一篇文章jsonReader部分)。
  • recordtext :記錄信息顯示時所使用的文本格式,隻有當viewrecords為true,且記錄總數大於0的時候才會顯示。其格式與所選用的language文件有關,具體的文本格式定義在裡面。例如默認的英文格式就是“View {0} – {1} of {2}”,其中{0}代表當前頁第一條記錄在整個記錄總數中的位置;{1}代表當前頁最後一條記錄在整個記錄總數中的位置;{2}代表所有記錄的總數。


註1:這些屬性(選項),並不都是可以用jqGrid的setGridParam方法在初始化之後改變值的。比如pgtext、recordtext、rowNum就是可以修改的,而其餘的都是不能修改的,也即隻能使用默認值,或者在jqGrid初始化的時候就定義好瞭。
註2:在jqGrid創建並初始化之後,修改這些關於Pager的屬性,都必須執行trigger("reloadGrid")才能生效。
註3:在第一篇文章中我曾寫到,經過測試jqGrid的caption似乎也不能用setGridParam方法改變並生效。我再次查瞭一下文檔,發現這個選項也明確標註著也是不能改變,除非使用相應的setCaption方法。

 

 

 

2. Navigator

 

默認有6個預定義好的按鈕:

  • 添加新行
  • 編輯選中的行
  • 查看選中的行
  • 刪除選中的行
  • 查找記錄
  • 重載表格

Navigator通過navGrid方法來配置導航欄,用法是:

$("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);

$("#grid_id").jqGrid('navGrid','#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);

 

關於各種參數的具體說明,請參考官方文檔(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator )

 

 

 

2.1 關於Navigator的參數

  • add :定義是否啟用添加操作的按鈕;
  • addicon :用於添加操作的按鈕上的圖標,目前隻能使用jQuery UI中的圖標樣式;
  • addtext :用於添加操作的按鈕上的文本;
  • addtitle :用於添加操作的按鈕上的tooltip;
  • del/delicon/deltext/deltitle :用於刪除按鈕的一套屬性,可以參照添加按鈕的幾個屬性;
  • edit/editicon/edittext/edittitle :用於編輯按鈕的一套屬性,可以參照添加按鈕的幾個屬性;
  • refresh/refreshicon/refreshtext/refreshtitle :用於刷新表格按鈕的一套屬性,可以參照添加按鈕的幾個屬性;當點擊這個按鈕時,將執行trigger("reloadGrid")並清除用於查詢的參數;
  • refreshstate :定義如何重新載入Grid表格,firstpage:重新載入表格的第一頁;current:重新載入當前頁,並保存當前選中的行;默認為firstpage;
  • afterRefresh :定義點擊刷新表格按鈕之後的事件函數;
  • beforeRefresh :定義點擊刷新表格按鈕之前的事件函數;
  • search/searchicon/searchtext/searchtitle :用於查詢按鈕的一套屬性,可以參照添加按鈕的幾個屬性;當點擊這個按鈕時,將會調用searchGrid方法;
  • view/viewicon/viewtext/viewtitle :用於查看記錄按鈕的一套屬性,可以參照添加按鈕的幾個屬性;
  • addfunc :如果定義,則用定義的函數替代原有的add函數,這個函數將不接受任何參數;
  • editfunc :如果定義,則用定義的函數替代原有的edit函數,編輯的行的id作為參數傳入這個函數;
  • delfunc :如果定義,則用定義的函數替代原有的del函數,編輯的行的id作為參數傳入這個函數;
  • alertcap :當未選中任何行而點擊編輯、刪除、查看按鈕時,彈出的提示框的標題;
  • alerttext :當未選中任何行而點擊編輯、刪除、查看按鈕時,彈出的提示信息;
  • cloneToTop :定義是否“拷貝”一套導航按鈕到Grid表格頂端的Pager中,默認為false;

借助這些選項,可以將上一篇中的例子,修改一下,更多的借助jqGrid內置的功能。例如,當載入行數據到對話框時,之前是通過在自定義的loadSelectedRowData方法中,調用jqGrid("getGridParam", "selrow")來檢查是否有選中的數據行。現在在點擊編輯或刪除按鈕的時候,可以通過jqGrid自己檢查是否有選中的數據行,如果沒有則彈出提示。如果有則選中的行,則還會將行id作為參數,傳入對應的函數方法中。

 

將代碼修改如下:

 

 

 

 

view plain

$(function(){ 

    … 

     

    $("#gridTable").jqGrid("navGrid", "#gridPager", { 

        addfunc : openDialog4Adding,    // (1) 點擊添加按鈕,則調用openDialog4Adding方法 

        editfunc : openDialog4Updating, // (2) 點擊編輯按鈕,則調用openDialog4Updating方法 

        delfunc : openDialog4Deleting,  // (3) 點擊刪除按鈕,則調用openDialog4Deleting方法 

        alerttext : "請選擇需要操作的數據行!"  // (4) 當未選中任何行而點擊編輯、刪除、查看按鈕時,彈出的提示信息 

    }); 

     

    … 

}); 

var openDialog4Adding = function() { 

    var consoleDlg = $("#consoleDlg"); 

    var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); 

    consoleDlg.find("input").removeAttr("disabled").val(""); 

    dialogButtonPanel.find("button:not(:contains('取消'))").hide(); 

    dialogButtonPanel.find("button:contains('創建')").show(); 

    consoleDlg.dialog("option", "title", "創建新聯系人").dialog("open"); 

}; 

var openDialog4Updating = function(rowid) { // (6) 接受選中行的id為參數 

    var consoleDlg = $("#consoleDlg"); 

    var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); 

     

    consoleDlg.find("input").removeAttr("disabled"); 

    dialogButtonPanel.find("button:not(:contains('取消'))").hide(); 

    dialogButtonPanel.find("button:contains('保存')").show(); 

    consoleDlg.dialog("option", "title", "修改聯系人信息"); 

     

    loadSelectedRowData(rowid); // (7) 將選中行id傳入loadSelectedRowData方法 

}; 

var openDialog4Deleting = function(rowid) { // (8) 接受選中行的id為參數 

    var consoleDlg = $("#consoleDlg"); 

    var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); 

     

    consoleDlg.find("input").attr("disabled", true); 

    dialogButtonPanel.find("button:not(:contains('取消'))").hide(); 

    dialogButtonPanel.find("button:contains('刪除')").show(); 

    consoleDlg.dialog("option", "title", "刪除聯系人"); 

     

    loadSelectedRowData(rowid); 

}; 

var loadSelectedRowData = function(selectedRowId) { // (9) 接受選中行的id為參數 

         

    var params = { 

        "contact.id" : selectedRowId 

    }; 

    var actionUrl = "viewContact.action"; 

    // 從Server讀取對應ID的JSON數據 

    $.ajax( { 

        url : actionUrl, 

        data : params, 

        dataType : "json", 

        cache : false, 

        error : function(textStatus, errorThrown) { 

            alert("系統ajax交互錯誤: " + textStatus); 

        }, 

        success : function(data, textStatus) { 

            // 如果讀取結果成功,則將信息載入到對話框中                  

            var rowData = data.contact; 

            var consoleDlg = $("#consoleDlg"); 

            consoleDlg.find("#selectId").val(rowData.id); 

            consoleDlg.find("#lastName").val(rowData.lastName); 

            consoleDlg.find("#firstName").val(rowData.firstName); 

            consoleDlg.find("#certificateNo").val(rowData.certificateNo); 

            consoleDlg.find("#email").val(rowData.email); 

            consoleDlg.find("#telNo").val(rowData.telNo); 

            consoleDlg.find("#address").val(rowData.address); 

            consoleDlg.find("#idCardNo").val(rowData.idCardNo); 

            consoleDlg.find("#nationality").val(rowData.nationality); 

             

            // 根據新載入的數據將表格中的對應數據行一並刷新一下 

            var dataRow = { 

                    id : rowData.id, 

                    lastName : rowData.lastName, 

                    firstName : rowData.firstName, 

                    email : rowData.email, 

                    telNo : rowData.telNo 

                }; 

             

            $("#gridTable").jqGrid("setRowData", data.contact.id, dataRow); 

                 

            // 打開對話框 

            consoleDlg.dialog("open"); 

        } 

    }); 

};    

 

 

說明:(2)(3)處意味著,當點擊編輯或刪除按鈕時,如果有數據行被選中,則將行id作為參數傳入對應的openDialog4Updating和openDialog4Deleting方法中;如果沒有選中的行,則將彈出窗口,提示信息。

 

 

2.2 關於prmEdit、prmAdd、prmDel、prmSearch、prmView的參數

jqGrid本身為這些參數定義瞭默認值,而且不同的language文件也有各自的定義來覆蓋原始的默認值。我們也可以在jqGrid重新定義新的值,以覆蓋默認的值。

例如:

 

 

 

 

 

$("#gridTable").jqGrid("navGrid", "#gridPager",  

    { 

        addfunc : openDialog4Adding, 

        editfunc : openDialog4Updating, 

        delfunc : openDialog4Deleting, 

        alerttext : "請選擇需要操作的數據行!" 

    }, 

    {}, // prmEdit 

    {}, // prmAdd 

    {}, // prmDel 

    {       // prmSearch 

        caption: "查找", 

        Find: "Let's go!", 

        multipleSearch : true 

    }, 

    {}  // prmView 

); 

 

 

 

 

具體的參數如下,也可參考官方文檔(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator )

 

 

 

 

$.jgrid = { 

… 

   search : { 

     caption: "Search…", 

     Find: "Find", 

     Reset: "Reset", 

     odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'], 

     groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ], 

     matchText: " match", 

     rulesText: " rules" 

   }, 

   edit : { 

     addCaption: "Add Record", 

     editCaption: "Edit Record", 

     bSubmit: "Submit", 

     bCancel: "Cancel", 

     bClose: "Close", 

     saveData: "Data has been changed! Save changes?", 

     bYes : "Yes", 

     bNo : "No", 

     bExit : "Cancel", 

  }, 

  view : { 

    caption: "View Record", 

    bClose: "Close" 

  }, 

  del : { 

    caption: "Delete", 

    msg: "Delete selected record(s)?", 

    bSubmit: "Delete", 

    bCancel: "Cancel" 

  }, 

  nav : { 

    edittext: "", 

    edittitle: "Edit selected row", 

    addtext:"", 

    addtitle: "Add new row", 

    deltext: "", 

    deltitle: "Delete selected row", 

    searchtext: "", 

    searchtitle: "Find records", 

    refreshtext: "", 

    refreshtitle: "Reload Grid", 

    alertcap: "Warning", 

    alerttext: "Please, select row", 

    viewtext: "", 

    viewtitle: "View selected row" 

  }, 

…   

 

 

 

 

 

 

 

3. 自定義按鈕

jqGrid還允許將自定義的按鈕加入Page Bar,具體API是:

$("#grid_id").navGrid("#pager",…).navButtonAdd("#pager",{parameters});

或者

$("#grid_id").jqGrid('navGrid',"#pager",…).jqGrid('navButtonAdd',"#pager",{parameters});

 

關於navButtonAdd的屬性:

  • caption :按鈕上的文本,可以是空值;
  • buttonicon :按鈕上的圖標,如果設為“none”,則隻顯示按鈕上的文本;
  • onClickButton :當點擊按鈕時所調用的方法函數,默認為null;
  • position :添加新按鈕的位置,first或last;默認為last;
  • title :新按鈕的tooltip
  • cursor :當鼠標滑過按鈕時的光標樣式,默認為pointer;
  • id :為按鈕設置id。

 

 

4. 自定義分隔符

$("#grid_id").navSeparatorAdd('#pager',{separator_parameters}); 

相關屬性:

  • sepclass :分隔符的CSS樣式;
  • sepcontent :分隔符中的內容;

 

 

 

 

附:相關代碼

javascript部分:

 

 

$(function(){ 

    // 配置jqGrid組件 

    $("#gridTable").jqGrid({ 

        url: "jqGrid03.action", 

        datatype: "json", 

        mtype: "GET", 

        height: 350, 

        width: 600, 

        colModel: [ 

              {name:"id",index:"id",label:"編碼",width:40},   

              {name:"lastName",index:"lastName",label:"姓",width:80,sortable:false}, 

              {name:"firstName",index:"firstName",label:"名",width:80,sortable:false}, 

              {name:"email",index:"email",label:"電子郵箱",width:160,sortable:false}, 

              {name:"telNo",index:"telNo",label:"電話",width:120,sortable:false} 

        ], 

        viewrecords: true, 

        rowNum: 15, 

        rowList: [15,50,100], 

        prmNames: {search: "search"}, 

        jsonReader: { 

            root:"gridModel", 

            records: "record", 

            repeatitems : false 

        }, 

        pager: "#gridPager", 

        caption: "聯系人列表", 

        hidegrid: false, 

        shrikToFit: true 

    }); 

     

    var alertText = "<p style="margin:0.3em; background:#FFFFFF; border:1px solid #A6C9E2; padding: 0.5em;" mce_style="margin:0.3em; background:#FFFFFF; border:1px solid #A6C9E2; padding: 0.5em;">請選擇需要操作的數據行!</p>"; 

     

    $("#gridTable").jqGrid("navGrid", "#gridPager", { 

        addfunc : openDialog4Adding,    // (1) 點擊添加按鈕,則調用openDialog4Adding方法 

        editfunc : openDialog4Updating, // (2) 點擊添加按鈕,則調用openDialog4Updating方法 

        delfunc : openDialog4Deleting,  // (3) 點擊添加按鈕,則調用openDialog4Deleting方法 

        alerttext : alertText   // (4) 當未選中任何行而點擊編輯、刪除、查看按鈕時,彈出的提示信息 

    },{},{},{},{    // (5) 修改於查詢相關的prmSearch參數 

        caption: "查找", 

        Find: "Let's go!", 

        multipleSearch: true, 

        groupOps: [{ op: "AND", text: "全部" }], 

    },{}); 

     

    // 配置對話框 

    $("#consoleDlg").dialog({ 

        autoOpen: false,     

        modal: true,    // 設置對話框為模態(modal)對話框 

        resizable: true,     

        width: 480, 

        buttons: {  // 為對話框添加按鈕 

            "取消": function() {$("#consoleDlg").dialog("close")}, 

            "創建": addContact, 

            "保存": updateContact, 

            "刪除": deleteContact 

        } 

    }); 

}); 

var openDialog4Adding = function() { 

    var consoleDlg = $("#consoleDlg"); 

    var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); 

    consoleDlg.find("input").removeAttr("disabled").val(""); 

    dialogButtonPanel.find("button:not(:contains('取消'))").hide(); 

    dialogButtonPanel.find("button:contains('創建')").show(); 

    consoleDlg.dialog("option", "title", "創建新聯系人").dialog("open"); 

}; 

var openDialog4Updating = function(rowid) { // (6) 接受選中行的id為參數 

    var consoleDlg = $("#consoleDlg"); 

    var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); 

     

    consoleDlg.find("input").removeAttr("disabled"); 

    dialogButtonPanel.find("button:not(:contains('取消'))").hide(); 

    dialogButtonPanel.find("button:contains('保存')").show(); 

    consoleDlg.dialog("option", "title", "修改聯系人信息"); 

     

    loadSelectedRowData(rowid); // (7) 將選中行id傳入loadSelectedRowData方法 

var openDialog4Deleting = function(rowid) { // (8) 接受選中行的id為參數 

    var consoleDlg = $("#consoleDlg"); 

    var dialogButtonPanel = consoleDlg.siblings(".ui-dialog-buttonpane"); 

     

    consoleDlg.find("input").attr("disabled", true); 

    dialogButtonPanel.find("button:not(:contains('取消'))").hide(); 

    dialogButtonPanel.find("button:contains('刪除')").show(); 

    consoleDlg.dialog("option", "title", "刪除聯系人"); 

     

    loadSelectedRowData(rowid); 

var loadSelectedRowData = function(selectedRowId) { // (9) 接受選中行的id為參數 

    var params = { 

        "contact.id" : selectedRowId 

    }; 

    var actionUrl = "viewContact.action"; 

    // 從Server讀取對應ID的JSON數據 

    $.ajax( { 

        url : actionUrl, 

        data : params, 

        dataType : "json", 

        cache : false, 

        error : function(textStatus, errorThrown) { 

            alert("系統ajax交互錯誤: " + textStatus); 

        }, 

        success : function(data, textStatus) { 

            // 如果讀取結果成功,則將信息載入到對話框中                  

            var rowData = data.contact; 

            var consoleDlg = $("#consoleDlg");  

            consoleDlg.find("#selectId").val(rowData.id); 

            consoleDlg.find("#lastName").val(rowData.lastName); 

            consoleDlg.find("#firstName").val(rowData.firstName); 

            consoleDlg.find("#certificateNo").val(rowData.certificateNo); 

            consoleDlg.find("#email").val(rowData.email); 

            consoleDlg.find("#telNo").val(rowData.telNo); 

            consoleDlg.find("#address").val(rowData.address); 

            consoleDlg.find("#idCardNo").val(rowData.idCardNo); 

            consoleDlg.find("#nationality").val(rowData.nationality); 

             

            // 根據新載入的數據將表格中的對應數據行一並刷新一下 

            var dataRow = { 

                    id : rowData.id, 

                    lastName : rowData.lastName, 

                    firstName : rowData.firstName, 

                    email : rowData.email, 

                    telNo : rowData.telNo 

                }; 

             

            $("#gridTable").jqGrid("setRowData", data.contact.id, dataRow); 

                 

            // 打開對話框 

            consoleDlg.dialog("open"); 

        } 

    }); 

}; 

var addContact = function() { 

    var consoleDlg = $("#consoleDlg"); 

         

    var pLastName = $.trim(consoleDlg.find("#lastName").val()); 

    var pFirstName = $.trim(consoleDlg.find("#firstName").val()); 

    var pEmail = $.trim(consoleDlg.find("#email").val()); 

    var pTelNo = $.trim(consoleDlg.find("#telNo").val()); 

    var pAddress = $.trim(consoleDlg.find("#address").val()); 

    var pIdCardNo = $.trim(consoleDlg.find("#idCardNo").val()); 

    var pNationality = $.trim(consoleDlg.find("#nationality").val()); 

     

    var params = { 

        "contact.lastName" : pLastName, 

        "contact.firstName" : pFirstName, 

        "contact.email" : pEmail, 

        "contact.telNo" : pTelNo, 

        "contact.address" : pAddress, 

        "contact.idCardNo" : pIdCardNo, 

        "contact.nationality" : pNationality 

    }; 

     

    var actionUrl = "createContact.action" 

     

    $.ajax( { 

        url : actionUrl, 

        data : params, 

        dataType : "json", 

        cache : false, 

        error : function(textStatus, errorThrown) { 

            alert("系統ajax交互錯誤: " + textStatus); 

        }, 

        success : function(data, textStatus) { 

            if(data.ajaxResult == "success") { 

                var dataRow = { 

                    id : data.contact.id,   // 從Server端得到系統分配的id 

                    lastName : pLastName, 

                    firstName : pFirstName, 

                    email : pEmail, 

                    telNo : pTelNo 

                }; 

                 

                var srcrowid = $("#gridTable").jqGrid("getGridParam", "selrow"); 

                 

                if(srcrowid) { 

                    $("#gridTable").jqGrid("addRowData", data.contact.id, dataRow, "before", srcrowid); 

                } else { 

                    $("#gridTable").jqGrid("addRowData", data.contact.id, dataRow, "first"); 

                } 

                consoleDlg.dialog("close"); 

                 

                alert("聯系人添加操作成功!"); 

                 

            } else { 

                alert("添加操作失敗!"); 

            } 

        } 

    }); 

}; 

var updateContact = function() { 

    var consoleDlg = $("#consoleDlg"); 

     

    var pId = $.trim(consoleDlg.find("#selectId").val()); 

    var pLastName = $.trim(consoleDlg.find("#lastName").val()); 

    var pFirstName = $.trim(consoleDlg.find("#firstName").val()); 

    var pEmail = $.trim(consoleDlg.find("#email").val()); 

    var pTelNo = $.trim(consoleDlg.find("#telNo").val()); 

    var pAddress = $.trim(consoleDlg.find("#address").val()); 

    var pIdCardNo = $.trim(consoleDlg.find("#idCardNo").val()); 

    var pNationality = $.trim(consoleDlg.find("#nationality").val()); 

    var params = { 

        "contact.id" : pId, 

        "contact.lastName" : pLastName, 

        "contact.firstName" : pFirstName, 

        "contact.email" : pEmail, 

        "contact.telNo" : pTelNo, 

        "contact.address" : pAddress, 

        "contact.idCardNo" : pIdCardNo, 

        "contact.nationality" : pNationality 

    }; 

    var actionUrl = "updateContact.action"; 

    $.ajax( { 

        url : actionUrl, 

        data : params, 

        dataType : "json", 

        cache : false, 

        error : function(textStatus, errorThrown) { 

            alert("系統ajax交互錯誤: " + textStatus); 

        }, 

        success : function(data, textStatus) { 

            if (data.ajaxResult == "success") { 

                var dataRow = { 

                    id : data.contact.id, 

                    lastName : pLastName, 

                    firstName : pFirstName, 

                    email : pEmail, 

                    telNo : pTelNo 

                }; 

                $("#gridTable").jqGrid("setRowData", data.contact.id, dataRow, {color:"#FF0000"}); 

                 

                alert("聯系人信息更新成功!"); 

                 

                consoleDlg.dialog("close"); 

                 

            } else { 

                alert("修改操作失敗!"); 

            } 

        } 

    }); 

}; 

var deleteContact = function() { 

    var consoleDlg = $("#consoleDlg"); 

     

    var pId = $.trim(consoleDlg.find("#selectId").val()); 

    var params = { 

        "contact.id" : pId 

    }; 

    var actionUrl = "deleteContact.action"; 

    $.ajax({ 

        url : actionUrl, 

        data : params, 

        dataType : "json", 

        cache : false, 

        error : function(textStatus, errorThrown) { 

            alert("系統ajax交互錯誤: " + textStatus); 

        }, 

        success : function(data, textStatus) { 

            if (data.ajaxResult == "success") { 

                $("#gridTable").jqGrid("delRowData", pId); 

                 

                consoleDlg.dialog("close"); 

                alert("聯系人刪除成功!"); 

            } else { 

                alert("刪除操作失敗!"); 

            } 

        } 

    }); 

}; 

摘自 Hurry的專欄

發佈留言