Web jquery表格組件 JQGrid 的使用 - 11.問題研究

 

系列索引

Web jquery表格組件 JQGrid 的使用 - 從入門到精通 開篇及索引

Web jquery表格組件 JQGrid 的使用 - 4.JQGrid參數、ColModel API、事件及方法

Web jquery表格組件 JQGrid 的使用 - 5.Pager翻頁、搜索、格式化、自定義按鈕

Web jquery表格組件 JQGrid 的使用 - 6.准備工作 & Hello JQGrid

Web jquery表格組件 JQGrid 的使用 - 7.查詢數據、編輯數據、刪除數據

Web jquery表格組件 JQGrid 的使用 - 8.Pager、新增數據、查詢、刷新、查看數據

Web jquery表格組件 JQGrid 的使用 - 全部代碼

Web jquery表格組件 JQGrid 的使用 - 11.問題研究

 

JQGrid導出Excel文件

 

目錄

1. 翻頁按鈕不可用

2. 編輯和刪除時傳值

3. 一列修改為button 按鈕

4. 動態修改url

5.下拉聯動效果

6. 使用webservice加載數據

 

 

 

11.問題研究  

1. 翻頁按鈕不可用

Grid 的

 loadonce: true,

 

2. 編輯和刪除時傳值

Deldata 或editdata
delData: {
delId: function () { var sel_id = $(grid_selector).jqGrid('getGridParam', 'selrow'); var value = $(grid_selector).jqGrid('getCell', sel_id, 'UserId'); return value; } },

 

如上面的代碼，http handler 可以獲取到delId 這個參數。context.Request.Params 里獲取

 

3. 一列修改為button 按鈕

聲明一列：

{ name: 'Manage', index: 'Name', width: 30, edittype: "button", sortable: false,
align: 'center' }, 然后去loadComplete 事件里增加： loadComplete: function () { var rowIds = $(grid_selector).jqGrid('getDataIDs'); if (rowIds) { for (var i = 0, j = rowIds.length; i < j; i++) { id = $(grid_selector).jqGrid('getCell', rowIds[i], 'UserId'); var Btn = "<a href='#' id='id-btn-dialog2' class='btn btninfo btn-sm' onclick='EditClick(" + id + ")'>編輯</a>"; $(grid_selector).jqGrid('setRowData', rowIds[i], { 'Manage': Btn }); } } },

 

遍歷每一列，找到對應行，新建一個button，EditClick()事件是點擊按鈕后需要做什么，

id 為傳的參數。{ 'Manage': Btn } 即為這一行的名為'Manage'的單元格替換為button

 

4. 動態修改url

可以實現傳參等方法。如

url: "WebService/ UserHandler.ashx?UserID=" + userID,
$(grid_selector).jqGrid('setGridParam', { url: "WebService/ UserHandler.ashx?UserID=" + userID,}); //重新加載jqgrid $(grid_selector).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');

 

5.下拉聯動效果

edittype類型為‘select’，其editoptions屬性中有一個dataEvents可以定義事件

{
                        name: 'a', index: 'a', width: 90, sortable: true, editable: true, edittype: "select", editrules: { required: true }, editoptions: { value: function () { var s = ""; return s; }, dataEvents:[{type:'change',fn:function(e){ var ID= $("select#ID");//select#ID 表示jqgrid的一列，名稱為ID，這是需要聯動的select var a= this.value; //a為當前單元格select對象的value var s = ""; try { $.ajax({ type: "POST", //訪問WebService使用post方式請求 contentType: "application/json;utf-8", //WebService會返回json類型 url: "../WebService/a.asmx/a", //調用WebService的地址和方法名稱組合 data: "{a:" + a+ "}", //傳個參數，根據當前select的value獲取要聯動的內容 dataType: "json", async: false, //不能異步，需同步 success: function (result) { var theString = result.d; var ids= [];//一系列id對象，有ID和Name兩個字段  ids= eval('(' + theString + ')'); for (var i = 0; i < ids.length; i++) { s = s + "<option value='" + ids[i].ID+ "'>" + aaidsi].Name+ "</option>"; //注意這里是要用option的，不能value:name這樣的設置value  } ID.html(s); //這里要html一下  } }) } catch (ex) { bootbox.alert(ex); } }}] } },

 

6. 使用webservice加載數據

 

前端頁面定義

var req = new XMLHttpRequest();

並增加函數：

function resAjaxRequestGetData() {
if (req.readyState == 4) {
var res = JSON.parse(req.responseText);
var thegrid = $(grid_selector)[0];
thegrid.addJSONData(JSON.parse(res.d));
}
}
function AjaxRequestGetData() {
req.open("POST", "WebService/WebService.asmx/LoadDataDT", true);
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
req.onreadystatechange = resAjaxRequestGetData;
req.send(null);
}

然后修改Jqgird 的屬性datatype，此時無需設置url 屬性

datatype: function (pdata) {
AjaxRequestGetData();
},

 

WebService 代碼：

[WebMethod]
public object LoadAlarmTodayDT() { string cmdText = "SELECT UserId, UserCode, Password FROM T_User"; SQLHelper sqlhelper = new SQLHelper(); DataTable dt = sqlhelper.Selectinfo(cmdText); return DAL.UserManagerDAL.GetJson(dt); }

 

或者：

jqgrid的datatype這樣設置：

datatype: function (pdata) {
                   AjaxRequestGetData("LoadDT"); },

 

  js調用webservice：

function resAjaxRequestGetData() {
            if (req.readyState == 4) { var res = JSON.parse(req.responseText); var thegrid = $(grid_selector)[0]; thegrid.addJSONData(JSON.parse(res.d)); } } function AjaxRequestGetData(method) { req.open("POST", "../WebService/WS.asmx/" + method, true); req.setRequestHeader("Content-Type", "application/json; charset=utf-8"); req.onreadystatechange = resAjaxRequestGetData; req.send(null); }