系列索引
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.問題研究
目錄
查詢數據
編輯數據
刪除數據
7.查詢數據、編輯數據、刪除數據
在ProcessRequest 函數下修改:
public void ProcessRequest(HttpContext context)
{
//查找
if (context.Request.Params.Get("_search") == "true") { return; } NameValueCollection forms = context.Request.Form; string strOperation = forms.Get("oper"); string strResponse = string.Empty; if (strOperation == null) { //排序 if (context.Request.Params.Get("sidx") != null && !string.IsNullOrEmpty(context.Request.Params.Get("sidx").ToString()) && context.Request.Params.Get("sord") != null && !string.IsNullOrEmpty(context.Request.Params.Get("sord").ToString())) { return; } strResponse = GetJson(GetUserDT()); //load data } context.Response.Write(strResponse); } private DataTable GetUserDT() { string cmdText = "SELECT UserId, UserCode, Password FROM T_User"; SQLHelper sqlhelper = new SQLHelper(); DataTable dt = sqlhelper.Selectinfo(cmdText); return dt; } private string GetJson(DataTable dt) { JavaScriptSerializer serializer = new JavaScriptSerializer(); List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>(); Dictionary<string, object> row = null; foreach (DataRow dr in dt.Rows) { row = new Dictionary<string, object>(); foreach (DataColumn col in dt.Columns) { string s = dr[col].ToString(); //特殊情況 if (col.ColumnName == "IsAdmin") { s = s == "1" ? "是" : "否"; } if (col.ColumnName == "HasWrite") { s = s == "1" ? "是" : "否"; } row.Add(col.ColumnName.Trim(), s); } rows.Add(row); } return serializer.Serialize(rows); }
稍加留意便可發現context.Request.Params里存有大量的參數，比如第一次加載時如下所示：
{_search=false&nd=1410940615486&rows=10&page=1&sidx=&sord=asc&CNZZDATA155540=cnzz_eid%2
53D900936271-1409219704-%2526ntime%253D1409219704&ALL_HTTP=HTTP_CONNECTION%3akeepalive%
0d%0aHTTP_ACCEPT%3aapplication%2fjson%2c+text%2fjavascript%2c+*%2f*%3b+q%3d0.01%0d%0aH
TTP_ACCEPT_ENCODING%3agzip%2cdeflate%2csdch%0d%0aHTTP_ACCEPT_LANGUAGE%3azh-
CN%2czh%3bq%3d0.8%2czh-
TW%3bq%3d0.6%0d%0aHTTP_COOKIE%3aCNZZDATA155540%3dcnzz_eid%253D900936271-1409219704-
%2526ntime%253D1409219704%0d%0aHTTP_HOST%3alocalhost%3a12590%0d%0aHTTP_REFERER%3ahttp%3a%2f%
2flocalhost%3a12590%2fJQGrid2.aspx%0d%0aHTTP_USER_AGENT%3aMozilla%2f5.0+(Windows+NT+6.1)+App
leWebKit%2f537.36+(KHTML%2c+like+Gecko)+Chrome%2f37.0.2062.120+Safari%2f537.36%0d%0aHTTP_X_R
EQUESTED_WITH%3aXMLHttpRequest%0d%0a&ALL_RAW=Connection%3a+keepalive%
0d%0aAccept%3a+application%2fjson%2c+text%2fjavascript%2c+*%2f*%3b+q%3d0.01%0d%0aAccep
t-Encoding%3a+gzip%2cdeflate%2csdch%0d%0aAccept-Language%3a+zh-CN%2czh%3bq%3d0.8%2czh-
TW%3bq%3d0.6%0d%0aCookie%3a+CNZZDATA155540%3dcnzz_eid%253D900936271-1409219704-
%2526ntime%253D1409219704%0d%0aHost%3a+localhost%3a12590%0d%0aReferer%3a+http%3a%2f%2flocalh
ost%3a12590%2fJQGrid2.aspx%0d%0aUser-
Agent%3a+Mozilla%2f5.0+(Windows+NT+6.1)+AppleWebKit%2f537.36+(KHTML%2c+like+Gecko)+Chrome%2f
37.0.2062.120+Safari%2f537.36%0d%0aX-Requested-
With%3a+XMLHttpRequest%0d%0a&APPL_MD_PATH=%2fLM%2fW3SVC%2f17%2fROOT&APPL_PHYSICAL_PATH=c%3a%
5cusers%5cjhl%5cdocuments%5cvisual+studio+2013%5cProjects%5cJqGrid%5cJqGrid%5c&AUTH_TYPE=&AU
TH_USER=&AUTH_PASSWORD=&LOGON_USER=&REMOTE_USER=&CERT_COOKIE=&CERT_FLAGS=&CERT_ISSUER=&CERT_
KEYSIZE=&CERT_SECRETKEYSIZE=&CERT_SERIALNUMBER=&CERT_SERVER_ISSUER=&CERT_SERVER_SUBJECT=&CER
T_SUBJECT=&CONTENT_LENGTH=0&CONTENT_TYPE=&GATEWAY_INTERFACE=CGI%2f1.1&HTTPS=off&HTTPS_KEYSIZE=&HTTPS_SECRETKEYSIZE=&HTTPS_SERVER_ISSUER=&HTTPS_SERVER_SUBJECT=&INSTANCE_ID=17&INSTANCE_M
ETA_PATH=%2fLM%2fW3SVC%2f17&LOCAL_ADDR=%3a%3a1&PATH_INFO=%2fWebService%2fUserHandler.ashx&PA
TH_TRANSLATED=c%3a%5cusers%5cjhl%5cdocuments%5cvisual+studio+2013%5cProjects%5cJqGrid%5cJqGr
id%5cWebService%5cUserHandler.ashx&QUERY_STRING=_search%3dfalse%26nd%3d1410940615486%26rows%
3d10%26page%3d1%26sidx%3d%26sord%3dasc&REMOTE_ADDR=%3a%3a1&REMOTE_HOST=%3a%3a1&REMOTE_PORT=1
1798&REQUEST_METHOD=GET&SCRIPT_NAME=%2fWebService%2fUserHandler.ashx&SERVER_NAME=localhost&S
ERVER_PORT=12590&SERVER_PORT_SECURE=0&SERVER_PROTOCOL=HTTP%2f1.1&SERVER_SOFTWARE=Microsoft-
IIS%2f8.0&URL=%2fWebService%2fUserHandler.ashx&HTTP_CONNECTION=keepalive&
HTTP_ACCEPT=application%2fjson%2c+text%2fjavascript%2c+*%2f*%3b+q%3d0.01&HTTP_ACCEPT_E
NCODING=gzip%2cdeflate%2csdch&HTTP_ACCEPT_LANGUAGE=zh-CN%2czh%3bq%3d0.8%2czh-
TW%3bq%3d0.6&HTTP_COOKIE=CNZZDATA155540%3dcnzz_eid%253D900936271-1409219704-
%2526ntime%253D1409219704&HTTP_HOST=localhost%3a12590&HTTP_REFERER=http%3a%2f%2flocalhost%3a
12590%2fJQGrid2.aspx&HTTP_USER_AGENT=Mozilla%2f5.0+(Windows+NT+6.1)+AppleWebKit%2f537.36+(KH
TML%2c+like+Gecko)+Chrome%2f37.0.2062.120+Safari%2f537.36&HTTP_X_REQUESTED_WITH=XMLHttpReque
st} System.Collections.Specialized.NameValueCollection {System.Web.HttpValueCollection}
搜索時_search=true
增刪改時有參數oper。第一次加載時可以看出這個參數為null。此時就要加載數據了。查詢出一個
datatable序列化后返回就好了，前端自會處理。
增加時oper=add
修改時oper=edit
刪除時oper=del
數據加載完成后有個事件loadComplete，在這里可以進行一些操作比如遍歷表格修改一些顯示。
比如下面這個例子，遍歷所有行，把每行的UserCode修改為行號：
loadComplete: function (xhr) {
var users = $(grid_selector).jqGrid('getDataIDs'); if (users) { for (var i = 0, j = users.length; i < j; i++) { ParkId = $(grid_selector).jqGrid('getCell', users[i], 'UserCode'); $(grid_selector).jqGrid('setRowData', users[i], {'UserCode': i}); } } },
需要在colNames里新增一列為第一列，值自定義或為空即可，colNames: [' ', 'Id', '用戶名',
'密碼'],對應的，colModel里需要增加這些內容：
{
name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions', formatoptions: { keys: true, //editbutton: true, editformbutton: true, // extraparam: { oper: 'edit' }, editOptions: { //編輯操作，這個很重要，實現編輯時傳送參數 什么的。 reloadAfterSubmit: true, //editData: { // editkey: function () { // var sel_id = $(grid_selector).jqGrid('getGridParam', 'selrow'); // var value = $(grid_selector).jqGrid('getCell', sel_id, 'UserId'); // return value; // } //}, closeAfterEdit: true, afterSubmit: function (response, postdata) { if (response.responseText != "") { alert(response.responseText); $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); return [true, response.responseText] } }, }, delOptions: { //刪除操作，這個很重要，實現刪除時傳送參數什 么的。 這處網上沒有例子的。 reloadAfterSubmit: true, delData: { delId: function () { var sel_id = $(grid_selector).jqGrid('getGridParam', 'selrow'); var value = $(grid_selector).jqGrid('getCell', sel_id, 'UserId'); return value; } }, afterSubmit: function (response, postdata) { if (response.responseText != "") { alert(response.responseText); $(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); return [true, response.responseText] } } }, } },
Formatoptions下有delbutton和editbutton，可以設置為true或false。默認為true。一般不要管就
好了。
Width只能為數字不能為百分比，grid會根據全部列自己計算比例。
Fixed表示不會隨下面的滾動軸一起滾動。
Sortable表示能否排序。
Editformbutton表示是在彈出窗口中編輯還是行編輯。
editOptions和delOptions為設置編輯或刪除時的一些參數。reloadAfterSubmit為操作完成后是否
重新加載表格數據，一般數據變動后必須重新加載一次的：
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
closeAfterEdit為彈出窗體編輯時，提交后是否關閉編輯框。
editData和delData很重要，這里可以向http handler傳遞一些參數，比如獲取行id傳給處理函數：
var sel_id = $(grid_selector).jqGrid('getGridParam', 'selrow');
var value = $(grid_selector).jqGrid('getCell', sel_id, 'UserId');
以上兩行代碼實現的是獲取選擇行的'UserId'。
多個選擇需要遍歷：
var sel_id = [];
sel_id = $(grid_selector).jqGrid('getGridParam', 'selarrrow'); var value = ''; for (var i = 0; i < sel_id.length; i++) { value = value + ',' + $(grid_selector).jqGrid('getCell', sel_id[i], 'ParkId'); } if (value.charAt(0) == ',') { value = value.substr(1); }
http handler處理程序：
if (strOperation == "edit")
{
user.UserId = int.Parse(forms.Get("UserId").ToString()); if (CheckUserExist(user.UserCode, user.UserId.ToString())) { strResponse = "用戶名重復，請確認！"; } else { strResponse = UpdateUser(user) ? "用戶更新成功！" : "用戶更新失敗， 請確認！"; } context.Response.Write(strResponse); } /// <summary> /// 更新用戶信息 /// </summary> /// <param name="objuser"></param> /// <returns>更新成功與否</returns> private bool UpdateUser(User objuser) { string sql = "UPDATE T_User SET UserCode = '" + objuser.UserCode + "',Password = '" + objuser.Password + "' WHERE UserId=" + objuser.UserId; SQLHelper sqlhelper = new SQLHelper(); return sqlhelper.AddDelUpdate(sql) > 0; } private bool CheckUserExist(string UserCode, string UserId) { string sql = "select * from T_User where UserCode = '" + UserCode + "' and UserId <> " + UserId; SQLHelper sqlhelper = new SQLHelper(); DataTable dt = sqlhelper.Selectinfo(sql); return dt == null || (dt != null && dt.Rows.Count == 1); }
代碼參考編輯數據即可。
http handler處理程序：
if (strOperation == "del")
{
strResponse = DeleteUser(forms.Get("delId").ToString()) ? "刪除成功！" : "刪除失敗，請確認！"; } context.Response.Write(strResponse); private bool DeleteUser(string userId) { bool flag = true; string[] idlist = userId.Split(','); foreach (var sid in idlist) { string sql = "DELETE FROM T_User WHERE UserId=" + userId; SQLHelper sqlhelper = new SQLHelper(); flag = sqlhelper.AddDelUpdate(sql) > 0; } return flag; }