Web jquery表格组件 JQGrid 的使用 - 8.Pager新增数据查询刷新查看数据

Posted 2020-08-01 海龙的博客

 

系列索引

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;
}