轉自:http://blog.csdn.net/gengv/article/details/5720707
在介紹排序與查詢之前,先介紹一下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作為參數,傳入對應的函數方法中。
將代碼修改如下:
- $(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 = "<div 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;">請選擇需要操作的數據行!</div>";
- $("#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("刪除操作失敗!");
- }
- }
- });
- };