Web jquery表格组件 JQGrid 的使用

系列索引

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

目录

使用翻页pager

增加数据

查看、刷新

查询

排序

8.Pager、新增数据、查询、刷新、查看数据  

使用翻页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;
}