jQuery Grid高級指南

上週覺得已經把jqgrid 表格這部分已經搞得差很少了，沒想到在實際用的時候，出現了很多問題，從新把這塊知識整理一下。

問題一：設置表格的自動刷新

問題的緣由：

　　使用表格自帶的增刪改查的功能，編輯完數據後表中數據會刷新。可是手寫方法修改數據，例如模態框，修改完成後並不會在表中進行數據的刷新。

解決的辦法：

　　在請求發送以後，模態框關閉以前使用jqgrid的reloadGrid。

$("#jqGrid").trigger("reloadGrid");

 

問題二：表中日期的顯示格式

問題的緣由：

　　當數據庫中的字段是date類型時，直接將數據加載到表格中，顯示得是一串數字，爲時間的毫秒值。

解決的辦法：

　　給字段後追加時間轉換的方法

{ label: '日期', name: 'birthday' ,align: 'center',editable: true, formatter:dateConvert },

　　編寫dateConvert方法

function dateConvert(cellvalue){
    var times= new Date(cellvalue) ;
    date = times.toLocaleString();
    return date;
}

 

問題三：設置表中每行交替顯示樣式不一樣

問題的緣由：

　　在設置表格的屬性altRows:true 後，表格的樣式並無發生改變

解決的辦法：

　　在添加altRows:true屬性以後，還須要設置altclass來規定須要交替顯示得樣式

altRows: true,  //設置行交替樣式
altclass: 'differ', //手動寫的交替的樣式

.differ{
    background-color: #DDDDDC;
}

 

問題四：表格完成響應式

問題的緣由：

　　這個問題原本已經在上一篇博客中獲得瞭解決，但是又發現了一個新的問題，就是當表格的列數比較多時，表格中不會出現滾動條，手動調整窗口大小時纔會出現。

解決的辦法：

// 初始化表格
function gridInit(){
　　// 獲取當前頁面的寬度 var Width = document.body.clientWidth; $("#jqGrid").jqGrid({ url: '<%=basePath%>theTypeController/queryPerform/query', mtype: "post", datatype: "json", colModel: [ { label: '這是文本', name: 'theText' ,align: 'center',editable: true }, { label: '這是日期', name: 'theDate' ,align: 'center',editable: true,formatter:dateConvert }, { label: '這是數字', name: 'theNumber' ,align: 'center',editable: true }, { label: '這是主鍵', name: 'theId',key:true ,align: 'center',editable: true }, { label: '操做', name: 'operator', align: 'center',formatter: operation} ], viewrecords: true,    //定義是否要顯示總記錄數
        rowNum: 5,            //每頁顯示的條數
        height: 'auto',        //自動行高
        width: Width-60, shrinkToFit:false,  //設置爲true時，列數充滿表格，當列數較多時，只會縮小列寬，並不會出現滾動條，須要將屬性設置爲false
        autoScroll: true, //設置滾動條 altRows: true,        //設置行交替樣式
        altclass: 'differ', //交替的樣式
        multiselect: true,  //是否能夠多選
        rowList: [5,10,20],    //用來改變顯示記錄數
        pager: "#jqGridPager"    //定義翻頁用的導航欄
 });
}

 

問題五：表格行中增長自定義按鈕

問題的緣由：

　　目前的項目中，須要給角色賦予增刪改查的權限，當角色沒有權限的時候，表中不該該出現對應的按鈕，即動態的生成按鈕。

解決的辦法：

　　首先在表格中添加操做的列

{ label: '操做', name: 'operator', align: 'center',formatter: operation}

　　根據權限動態生成按鈕，項目中是獲取到該角色沒有的權限名，根據權限名找到對應的按鈕name，將其設置爲隱藏

//根據權限動態生成表格中行按鈕
function operation(cellvalue, options, rowObject) { var id = "'"+options.rowId+"'";　　//id寫成這樣的理由下面進行解釋 var button = "";
　　//定義按鈕的name var menu = ["editBut","deleteBut","browseBut"];
　　//定義操做的方法名 var opera = ["update","deleteConfirm","browse"];
　　//按鈕的圖標名 var icons = ["fa fa-edit","fa fa-trash","fa fa-th"];
　　//得到全部沒有權限的集合 var stateValue = $("#PLATFORM_VIEWSTATE_49DFD9F16B6D11E6A077645A042EAA66_ID").val(); if (stateValue) {
　　　　 //將沒有權限的集合轉爲json數據 var values = JSON.parse(stateValue); for (var i = 0; i < values.length; i++) {
　　　　　　　//判斷按鈕是否在沒有權限的集合中，在表示爲沒有權限，返回其所在索引 if($.inArray(values[i].name,menu)!=-1){
　　　　　　　　　//數組中移除相關的name，方法名，圖標名，即不生成按鈕
　　　　　　　　　 var index = $.inArray(values[i].name); menu.splice(index,1); opera.splice(index,1); icons.splice(index,1); } }
　　　　 //循環生成按鈕 for(var i = 0; i < menu.length; i++) { button += '<a name="'+menu[i]+'" class="btn btn-sm btn-default" onclick="'+opera[i]+'('+id+')"><i class="'+icons[i]+'"></i></a>'+ '&nbsp'; } }else{ button = '<a name="editBut" class="btn btn-sm btn-default" onclick="update('+id+')"><i class="fa fa-edit"></i></a>'+ '&nbsp'+
        '<a name="deleteBut" class="btn btn-sm btn-default" onclick="deleteConfirm('+id+')"><i class="fa fa-trash"></i></a>'+ '&nbsp'+
        '<a name="browseBut" class="btn btn-sm btn-default" onclick="browse('+id+')"><i class="fa fa-th"></i></a>'; } return button; }

　　按鈕對應的方法

// 添加功能
function add(){ jQuery("#jqGrid").jqGrid('editGridRow',"new", {url:"<%=basePath%>ttttttController/createPerform/", left:500,width:300,reloadAfterSubmit:false,closeAfterEdit: true}); } // 編輯功能
function update(rowid){ if( rowid != null ) { jQuery("#jqGrid").jqGrid('editGridRow',rowid, {url:"<%=basePath%>ttttttController/updatePerform/", left:500,width:300,reloadAfterSubmit:false,closeAfterEdit: true}); } else{ alert("請選擇一行進行修改！"); } } // 刪除功能
function deleteConfirm(rowid){ if( rowid != null ) { jQuery("#jqGrid").jqGrid('delGridRow',rowid, {url:"<%=basePath%>ttttttController/deletePerform/", left:500,width:300,reloadAfterSubmit:false}); } else{ alert("請選擇一行進行刪除！"); } } // 瀏覽功能
function browse(rowid){ if( rowid != null ) { jQuery("#jqGrid").jqGrid('viewGridRow',rowid,{left:500,width:300,reloadAfterSubmit:false}); } else{ alert("請選擇一行進行查看！"); } // 刪除瀏覽中的操做按鈕
    $("#trv_operator").css({ "display":"none" }); }

 

問題六：表格中點擊行按鈕觸發事件，傳遞的參數爲[object HTMLTableRowElement]

問題的緣由：

　　在實現刪除和修改功能時，表中設置的key爲數字類型時，傳參過程正常進行。可是當key爲字符串時，參數傳入新方法中會變成[object HTMLTableRowElement]，沒法進行對應的操做。

解決的辦法：

　　通過調試發現，例如修改按鈕，點擊按鈕，觸發update(options.rowId)方法，參數值爲abc時，在瀏覽器中能夠看到，點擊事件爲update(abc)，參數會發生異常。

　　只需將options.rowId提早處理好後再傳遞到方法中，例如寫成這樣的形式，var id = " ' "+options.rowId+" ' "; 給參數兩端加上單引號以後，方法就會變爲update('abc')。

 

問題七：對錶格中的數據進行篩選

問題的緣由：

　　根據輸入框中輸入的條件，點擊修改按鈕，篩選出須要的數據

解決的辦法：

// 首先獲取查詢條件中的值
var theNumber = $("input[name='theNumber']").val(); var theId = $("input[name='theId']").val(); // 使用jqgrid中的方法
$("#jqGrid").jqGrid('setGridParam',{ postData:{ 'theNumber' : theNumber , 'theId' : theId } }).trigger("reloadGrid"); //從新載入

 

問題八：表格坐下角增刪改查刷新的方法

問題的緣由：

　　利用表格中自帶的方法進行數據操做，能夠在表格的屬性中設置editurl，不一樣操做向後臺傳遞的參數不一樣，後臺使用oper接收，編輯爲edit，刪除爲delete，增長爲add；若在彈框中設置了url，則會覆蓋editurl

解決的辦法：

$('#jqGrid').navGrid('#jqGridPager', { edit: false, add: false, del: true, search: false, refresh: false, view: false, position: "left", cloneToTop: false }, // 編輯信息彈框
 { url:"<%=basePath%>ttttttController/updatePerform/", editCaption: "編輯信息", recreateForm: true, left:650, width:300, beforeSubmit : function( postdata, form , oper) { if( confirm('肯定更新信息嗎?') ) { return [true,'']; } else { return [false, '不能提交!']; } }, closeAfterEdit: true, errorTextFormat: function (data) { return 'Error: ' + data.responseText; } }, // 新增信息彈框
 { url:"<%=basePath%>ttttttController/createPerform/", addCaption: "新增信息", closeAfterAdd: true, recreateForm: true, left:500, width:300, errorTextFormat: function (data) { return 'Error: ' + data.responseText; } }, // 刪除信息彈框
 { url:"<%=basePath%>ttttttController/deletePerform/", delCaption: "刪除信息", left:500, width:300, errorTextFormat: function (data) { return 'Error: ' + data.responseText; } }); }