系列索引
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.问题研究
目录
使用翻页pager
增加数据
查看、刷新
查询
排序
8.Pager、新增数据、查询、刷新、查看数据
设置jqGrid属性：
pager: pager_selector,
需要一个div：
<div id="grid-pager"></div>
注意
loadonce: true,必须设置，否则翻页不可用的。
需要设置pager属性。一个pager上不只有翻页功能，还有6个已定义的按钮，当然还可以添加自定义
按钮，参考上面。定义代码如下，这样就可以进行增加，查找，刷新和查看了。
//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" />') } } )
if (strOperation == "add")
{
if (CheckUserExist(user.UserCode, ""))
{
strResponse = "用户名重复，请确认！";
}
else
{
strResponse = AddUser(user) ? "用户添加成功！" : "用户添加失败，请
确认！";
}
}
context.Response.Write(strResponse);
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; }
无需代码。刷新等于重新加载一次。
一般无需代码，当然可以自己写，或者遇到问题查询失效时。
//查找
if (context.Request.Params.Get("_search") == "true")
{
string sfilters = context.Request.Params.Get("filters");
context.Response.Write(GetJson(SearchUsersDT(sfilters)));
return;
}
/// <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; } }
属于和不属于没试出来是什么操作，直接无视。可以在grid.locale-cn.js文件里找到对应的，删除
后保存即可，其他不需要的查询关系都可以这样。
有时也会遇到不能排序的情况。下面就单列排序提供例子，多列暂不考虑。
Oper=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;
}
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; }
扫一扫
677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
