系列索引

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文件

 

目录

9.http handler 里的全部代码  

10.前端的全部代码

 

 

9.http handler 里的全部代码  

public class UserHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
//查找
if (context.Request.Params.Get("_search") == "true")
{
string sfilters = context.Request.Params.Get("filters");
context.Response.Write(GetJson(SearchUsersDT(sfilters)));
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()))
{
context.Response.Write(GetJson(GetUserDTSorted(context.Request.Params.Get("sidx").ToStr
ing(), context.Request.Params.Get("sord").ToString())));
return;
}
strResponse = GetJson(GetUserDT()); //load data
}
else if (strOperation == "del")
{
strResponse = DeleteUser(forms.Get("delId").ToString()) ? "删除成功!" :
"删除失败,请确认!";
}
else
{
AddEdit(forms, out strResponse);
}
context.Response.Write(strResponse);
}
private void AddEdit(NameValueCollection forms, out string strResponse)
{
string strOperation = forms.Get("oper");
string strEmpId = string.Empty;
User user = new User();
user.UserCode = forms.Get("UserCode").ToString();
user.Password = forms.Get("Password").ToString();
string sTmp = string.Empty;
if (strOperation == "add")
{
if (CheckUserExist(user.UserCode, ""))
{
sTmp = "用户名重复,请确认!";
}
else
{
sTmp = AddUser(user) ? "用户添加成功!" : "用户添加失败,请确认!";
}
}
else if (strOperation == "edit")
{
user.UserId = int.Parse(forms.Get("UserId").ToString());
if (CheckUserExist(user.UserCode, user.UserId.ToString()))
{
sTmp = "用户名重复,请确认!";
}
else
{
sTmp = UpdateUser(user) ? "用户更新成功!" : "用户更新失败,请确认!
";
}
}
strResponse = sTmp;
}
public bool IsReusable
{
get
{
return false;
}
}
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);
}
/// <summary>
/// 根据jqgrid的查询操作符和字段拼接sql语句
/// </summary>
/// <param name="op">jqgrid的查询操作符</param>
/// <returns>sql wehere语句</returns>
/// <param name="field">查询字段名称</param>
private string GetSQLOperater(string op, string field)
{
string s = string.Empty;
switch (op)
{
case "eq": return field + " = @" + field;//等于
case "ne": return field + " <> @" + field;//不等于
case "bw": return field + " like @" + field + "\'%\'"; //开始于
case "bn": return field + " not like @" + field + "\'%\'"; //不开始于
case "ew": return field + " like \'%\' + @" + field; //结束于
case "en": return field + " not like \'%\' + @" + field; //不结束于
case "cn": return field + " like + \'%\' + " + field + "\'%\'"; //包含
case "nc": return field + " not like + \'%\' + @" + field + "\'%\'"; //不包
case "nu": return "(" + field + " = \'\' or is null)"; //空值
case "nn": return "(" + field + " <> \'\' or is not null)"; //非空值
case "in": return ""; //属于
case "ni": return ""; //不属于
default: return "";
}
}
private DataTable SearchUsersDT(string filters)
{
string jsonRes = string.Empty;
System.Runtime.Serialization.Json.DataContractJsonSerializer json = new
System.Runtime.Serialization.Json.DataContractJsonSerializer(typeof(GridSearch));
using (MemoryStream stream = new
MemoryStream(System.Text.Encoding.UTF8.GetBytes(filters)))
{
GridSearch gridSearch = (GridSearch)json.ReadObject(stream);
string groupOp = gridSearch.groupOp;
List<GridSearchRules> Rules = gridSearch.rules;
string sql = "select UserId, UserCode, Password FROM T_User";
MySqlParameter[] paras = new MySqlParameter[Rules.Count];
bool bFirst = true;
for (int i = 0; i < Rules.Count; i++)
{
GridSearchRules r = Rules[i];
string field = r.field;
string op = r.op;
string data = r.data;
sql = bFirst ? sql + " where " + GetSQLOperater(op, field) : sql +
groupOp + GetSQLOperater(op, field);
paras[i] = new MySqlParameter("@" + field, data);
}
SQLHelper sqlhelper = new SQLHelper();
DataTable dt = sqlhelper.Selectinfo(sql);
return dt;
}
}
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;
}
private bool AddUser(User objuser)
{
bool flag = false;
string cmdText = "INSERT INTO T_User (UserCode,Password) VALUES (\'" +
objuser.UserCode + "\',\'" + objuser.Password + "\')";
try
{
SQLHelper sqlhelper = new SQLHelper();
flag = sqlhelper.AddDelUpdate(cmdText) > 0;
}
catch (Exception ex)
{
throw ex;
}
return flag;
}
/// <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 DataTable GetUserDTSorted(string field, string oper)
{
string cmdText = "SELECT UserId, UserCode, UserName, Password, RoleId,
CreateBy, CreateTime FROM T_User order by " + field + " " + oper;
SQLHelper sqlhelper = new SQLHelper();
DataTable dt = sqlhelper.Selectinfo(cmdText);
return dt;
}
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);
}
}

 

10.前端的全部代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="JQGrid/jquery-1.11.1.min.js"></script>
<link href="JQGrid/jquery-ui-1.11.1.custom/jquery-ui.css" rel="stylesheet" />
<script src="JQGrid/grid.locale-cn.js"></script>
<script src="JQGrid/jquery.jqGrid.js"></script>
<link href="JQGrid/ui.jqgrid.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<script type="text/javascript">
jQuery(function ($) {
var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";
jQuery(grid_selector).jqGrid({
url: "WebService/UserHandler.ashx",
datatype: "json",
height: 390,
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]
}
}
},
}
},
{ name: \'UserId\', index: \'UserId\', width: 60, sorttype: "int",
editable: true, hidden: true },
{ name: \'UserCode\', index: \'UserCode\', width: 90, editable: true,
editrules: { required: true } },
{ name: \'Password\', index: \'Password\', type: "password", width: 120,
editable: true, editrules: { required: true } },
],
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: pager_selector,
altRows: true,
multiselect: true,
multiboxonly: true,
loadonce: true, //设置这个才会分页
loadComplete: function (xhr) {
},
editurl: "WebService/UserHandler.ashx",
caption: "用户管理", //"User Information Management"
autowidth: true
});
//enable search/filter toolbar
//jQuery(grid_selector).jqGrid(\'filterToolbar\',{defaultSearch:true,stringResult:true})
//switch element when editing inline
function aceSwitch(cellvalue, options, cell) {
setTimeout(function () {
$(cell).find(\'input[type=checkbox]\')
.wrap(\'<label class="inline" />\')
.addClass(\'ace ace-switch ace-switch-5\')
.after(\'<span class="lbl"></span>\');
}, 0);
}
//enable datepicker
function pickDate(cellvalue, options, cell) {
setTimeout(function () {
$(cell).find(\'input[type=text]\')
.datepicker({ format: \'yyyy-mm-dd\', autoclose: true });
}, 0);
}
//navButtons
jQuery(grid_selector).jqGrid(\'navGrid\', pager_selector,
{ //navbar options
edit: true,
editicon: \'ui-icon-pencil blue\',
edittext: \'编辑\',
add: true,
addicon: \'ui-icon-circle-plus\',
addtext: \'新增\',
del: true,
delicon: \'ui-icon-circle-close red\',
deltext: \'删除\',
search: true,
searchicon: \'ui-icon-search orange\',
searchtext: \'查找\',
refresh: true,
refreshicon: \'ui-icon-refresh green\',
refreshtext: \'刷新\',
view: true,
viewicon: \'ui-icon-circle-zoomin grey\',
viewtext: \'查看\',
},
{
//edit record form
closeAfterEdit: true,
recreateForm: true,
beforeShowForm: function (e) {
var form = $(e[0]);
form.closest(\'.ui-jqdialog\').find(\'.ui-jqdialogtitlebar\').
wrapInner(\'<div class="widget-header" />\')
style_edit_form(form);
},
afterSubmit: function (response, postdata) {
if (response.responseText != "") {
$(this).jqGrid(\'setGridParam\', { datatype: \'json\'
}).trigger(\'reloadGrid\');
alert(response.responseText);
return [true, response.responseText]
}
}
},
{
//new record form
closeAfterAdd: true,
recreateForm: true,
viewPagerButtons: false,
beforeShowForm: function (e) {
var form = $(e[0]);
form.closest(\'.ui-jqdialog\').find(\'.ui-jqdialogtitlebar\').
wrapInner(\'<div class="widget-header" />\')
style_edit_form(form);
},
afterSubmit: function (response, postdata) {
if (response.responseText != "") {
$(this).jqGrid(\'setGridParam\', { datatype: \'json\'
}).trigger(\'reloadGrid\');
alert(response.responseText);
return [true, response.responseText]
}
}
},
{ //DELETE
delData: {
delId: function () {
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], \'UserId\');
}
if (value.charAt(0) == \',\') {
value = value.substr(1);
}
return value;
}
},
closeOnEscape: true,
closeAfterDelete: true,
reloadAfterSubmit: true,
closeOnEscape: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText != "") {
alert(response.responseText);
return [true, response.responseText]
}
}
},
{
//search form
closeOnEscape: true,
closeAfterSearch: true,
reloadAfterSubmit: true,
recreateForm: true,
afterShowSearch: function (e) {
var form = $(e[0]);
form.closest(\'.ui-jqdialog\').find(\'.ui-jqdialogtitle\').
wrap(\'<div class="widget-header" />\')
style_search_form(form);
},
afterRedraw: function () {
style_search_filters($(this));
},
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(grid_selector).trigger("reloadGrid", [{ current: true }]);
return [false, response.responseText]
}
else {
$(this).jqGrid(\'setGridParam\', { datatype: \'json\'
}).trigger(\'reloadGrid\')
return [true, response.responseText]
}
},
multipleSearch: true
},
{
//view record form
recreateForm: true,
beforeShowForm: function (e) {
var form = $(e[0]);
form.closest(\'.ui-jqdialog\').find(\'.ui-jqdialogtitle\').
wrap(\'<div class="widget-header" />\')
}
}
)
function style_edit_form(form) {
//enable datepicker on "sdate" field and switches for "stock" field
//form.find(\'input[name=sdate]\').datepicker({ format: \'yyyy-mm-dd\',
autoclose: true })
// .end().find(\'input[name=stock]\')
// .addClass(\'ace ace-switch ace-switch-5\').wrap(\'<label
class="inline" />\').after(\'<span class="lbl"></span>\');
//update buttons classes
var buttons = form.next().find(\'.EditButton .fm-button\');
buttons.addClass(\'btn btn-sm\').find(\'[class*="-icon"]\').remove();//uiicon,
s-icon
buttons.eq(0).addClass(\'btn-primary\').prepend(\'<i class="iconok"></
i>\');
buttons.eq(1).prepend(\'<i class="icon-remove"></i>\')
buttons = form.next().find(\'.navButton a\');
buttons.find(\'.ui-icon\').remove();
buttons.eq(0).append(\'<i class="icon-chevron-left"></i>\');
buttons.eq(1).append(\'<i class="icon-chevron-right"></i>\');
}
function style_delete_form(form) {
var buttons = form.next().find(\'.EditButton .fm-button\');
buttons.addClass(\'btn btn-sm\').find(\'[class*="-icon"]\').remove();//uiicon,
s-icon
buttons.eq(0).addClass(\'btn-danger\').prepend(\'<i class="icontrash"></
i>\');
buttons.eq(1).prepend(\'<i class="icon-remove"></i>\')
}
function style_search_filters(form) {
form.find(\'.delete-rule\').val(\'X\');
form.find(\'.add-rule\').addClass(\'btn btn-xs btn-primary\');
form.find(\'.add-group\').addClass(\'btn btn-xs btn-success\');
form.find(\'.delete-group\').addClass(\'btn btn-xs btn-danger\');
}
function style_search_form(form) {
var dialog = form.closest(\'.ui-jqdialog\');
var buttons = dialog.find(\'.EditTable\')
buttons.find(\'.EditButton a[id*="_reset"]\').addClass(\'btn btn-sm btninfo\').
find(\'.ui-icon\').attr(\'class\', \'icon-retweet\');
buttons.find(\'.EditButton a[id*="_query"]\').addClass(\'btn btn-sm btninverse\').
find(\'.ui-icon\').attr(\'class\', \'icon-comment-alt\');
buttons.find(\'.EditButton a[id*="_search"]\').addClass(\'btn btn-sm btnpurple\').
find(\'.ui-icon\').attr(\'class\', \'icon-search\');
}
function beforeDeleteCallback(e) {
var form = $(e[0]);
if (form.data(\'styled\')) return false;
form.closest(\'.ui-jqdialog\').find(\'.ui-jqdialogtitlebar\').
wrapInner(\'<div class="widget-header" />\')
style_delete_form(form);
form.data(\'styled\', true);
}
function beforeEditCallback(e) {
var form = $(e[0]);
form.closest(\'.ui-jqdialog\').find(\'.ui-jqdialogtitlebar\').
wrapInner(\'<div class="widget-header" />\')
style_edit_form(form);
}
//it causes some flicker when reloading or navigating grid
//it may be possible to have some custom formatter to do this as the grid
is being created to prevent this
//or go back to default browser checkbox styles for the grid
function styleCheckbox(table) {
/**
$(table).find(\'input:checkbox\').addClass(\'ace\')
.wrap(\'<label />\')
.after(\'<span class="lbl align-top" />\')
$(\'.ui-jqgrid-labels th[id*="_cb"]:first-child\')
.find(\'input.cbox[type=checkbox]\').addClass(\'ace\')
.wrap(\'<label />\').after(\'<span class="lbl align-top" />\');
*/
}
//unlike navButtons icons, action icons in rows seem to be hard-coded
//you can change them like this in here if you want
function updateActionIcons(table) {
/**
var replacement =
{
\'ui-icon-pencil\' : \'icon-pencil blue\',
\'ui-icon-trash\' : \'icon-trash red\',
\'ui-icon-disk\' : \'icon-ok green\',
\'ui-icon-cancel\' : \'icon-remove red\'
};
$(table).find(\'.ui-pg-div span.ui-icon\').each(function(){
var icon = $(this);
var $class = $.trim(icon.attr(\'class\').replace(\'ui-icon\', \'\'));
if($class in replacement) icon.attr(\'class\', \'ui-icon
\'+replacement[$class]);
})
*/
}
//replace icons with FontAwesome icons like above
function updatePagerIcons(table) {
var replacement =
{
\'ui-icon-seek-first\': \'icon-double-angle-left bigger-140\',
\'ui-icon-seek-prev\': \'icon-angle-left bigger-140\',
\'ui-icon-seek-next\': \'icon-angle-right bigger-140\',
\'ui-icon-seek-end\': \'icon-double-angle-right bigger-140\'
};
$(\'.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .uiicon\').
each(function () {
var icon = $(this);
var $class = $.trim(icon.attr(\'class\').replace(\'ui-icon\', \'\'));
if ($class in replacement) icon.attr(\'class\', \'ui-icon \' +
replacement[$class]);
})
}
function enableTooltips(table) {
$(\'.navtable .ui-pg-button\').tooltip({ container: \'body\' });
$(table).find(\'.ui-pg-div\').tooltip({ container: \'body\' });
}
//var selr = jQuery(grid_selector).jqGrid(\'getGridParam\',\'selrow\');
});
</script>
<body>
<form id="form1" runat="server">
<div>
<table id="grid-table"></table>
<div id="grid-pager"></div>
</div>
</form>
</body>
</html>

 

版权声明:本文为jhlong原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/jhlong/p/5627797.html