第63章 Jquery JSON Table 重构定义Jquery DataTables

zhoujian_911

已于 2022-08-19 21:03:28 修改

阅读量250

点赞数

分类专栏： nopCommerce_4.40.4 文章标签： .NetCore JqueryDataTable 无刷新

于 2022-08-17 10:13:26 首次发布

本文链接：https://blog.csdn.net/zhoujian_911/article/details/126379767

版权

nopCommerce_4.40.4 专栏收录该内容

67 篇文章 7 订阅

订阅专栏

1 System.Linq自定义扩展

public static class QueryableExtension

{

///<typeparam name="TSource">泛型类型实例(1个指定类的类型实例)。</typeparam>

///<param name="source">以枚举数接口实例进行存储的1个指定类型的数据源(枚举数接口实例=长串型，包含：数组、列表、字典等)。</param>

///<param name="LongCount">需要跳过项的总计值。</param>

/// <summary>

/// 【长整型跳过】

/// <remarks>

/// 摘要：

/// 由于“System.Linq.Queryable.Skip”方法只支持类型为“int”或“Int32”类型的需要跳过项的总计值，为了支持类型为“long”或“Int64”的需要跳过项的总计值，从而定义了该扩展方法。

/// </remarks>

/// </summary>

public static IQueryable<TSource> LongSkip<TSource>(this IQueryable<TSource> source, long LongCount)

{

//“Math.DivRem()”方法在 C＃中的用于除法和计算两个数的商：“quotients”(取整操作，“quotients”必须被定义为“long”或“Int64”类型，因为“quotients”的最大值远远大于“int.MaxValue”)；

//并在输出参数中返回余数：“remainder”(取余，“remainder”可以转换为“int”或“Int32”类型，因为“remainder”的最大值一定小于“int.MaxValue”)。

long quotients = Math.DivRem(LongCount, int.MaxValue, out long remainder);

//先执行从数据源中跳过quotients*int.MaxValue项操作。

for (long i = 0; i < quotients; i += 1)

source = source.Skip(int.MaxValue);

//如果余数(“remainder”)不为:0，则在上一个操作的基础上，再执行跳过remainder项操作。

if (remainder != 0)

source = source.Skip((int)remainder);

return source;

}

///<typeparam name="TSource">泛型类型实例(1个指定类的类型实例)。</typeparam>

///<param name="source">以枚举数接口实例进行存储的1个指定类型的数据源(枚举数接口实例=长串型，包含：数组、列表、字典等)。</param>

///<param name="propertyName">定类的指定属性成员名(或对应表中的相应字段名)。</param>

/// <summary>

/// 【正序排序】

/// <remarks>

/// 摘要：

/// 对“System.Linq.Queryable.OrderBy”方法进行扩展，使用支持以指定类的指定属性成员名(或对应表中的相应字段名)字符串进行“正序”排序操作。

/// </remarks>

/// </summary>

public static IOrderedQueryable<TSource> OrderBy<TSource>(this IQueryable<TSource> source, string propertyName)

{

//如果用于排序操作的参数实例(指定类的指定属性成员名(或对应表中的相应字段名)为空，则直接返回原数据源。

if (string.IsNullOrEmpty(propertyName))

{

return (IOrderedQueryable<TSource>)source;

}

//为指定类的排序操作构建相应的“lambda”表达式。

//“lambda”表达式的“指针”。

var param = Expression.Parameter(typeof(TSource), "p");

//“lambda”表达式的“指针”与指定类的指定属性成员(或对应表中的相应字段)实例的组合。

var property = Expression.Property(param, propertyName);

为指定类组合出完整的“lambda”表达式。

var exp = Expression.Lambda(property, param);

//委托方法参数实例，通过委托方法参数实例，生成一个指定的“正序”排序“lambda”表达式。

MethodCallExpression resultExpression = Expression.Call(typeof(Queryable), "OrderBy", new Type[] { source.ElementType, exp.Body.Type }, source.Expression, exp);

//返回经过“正序”排序后的数据源。

return (IOrderedQueryable<TSource>)source.Provider.CreateQuery<TSource>(resultExpression);

}

///<typeparam name="TSource">泛型类型实例(1个指定类的类型实例)。</typeparam>

///<param name="source">以枚举数接口实例进行存储的1个指定类型的数据源(枚举数接口实例=长串型，包含：数组、列表、字典等)。</param>

///<param name="propertyName">定类的指定属性成员名(或对应表中的相应字段名)。</param>

/// <summary>

/// 【倒序排序】

/// <remarks>

/// 摘要：

/// 对“System.Linq.Queryable.OrderByDescending”方法进行扩展，使用支持以指定类的指定属性成员名(或对应表中的相应字段名)字符串进行“倒序”排序操作。

/// </remarks>

/// </summary>

public static IOrderedQueryable<TSource> OrderByDescending<TSource>(this IQueryable<TSource> source, string propertyName)

{

//如果用于排序操作的参数实例(指定类的指定属性成员名(或对应表中的相应字段名)为空，则直接返回原数据源。

if (string.IsNullOrEmpty(propertyName))

{

return (IOrderedQueryable<TSource>)source;

}

//为指定类的排序操作构建相应的“lambda”表达式。

//“lambda”表达式的“指针”。

var param = Expression.Parameter(typeof(TSource), "p");

//“lambda”表达式的“指针”与指定类的指定属性成员(或对应表中的相应字段)实例的组合。

var property = Expression.Property(param, propertyName);

为指定类组合出完整的“lambda”表达式。

var exp = Expression.Lambda(property, param);

//委托方法参数实例，通过委托方法参数实例，生成一个指定的“倒序”排序“lambda”表达式。

MethodCallExpression resultExpression = Expression.Call(typeof(Queryable), "OrderByDescending", new Type[] { source.ElementType, exp.Body.Type }, source.Expression, exp);

//返回经过“倒序”排序后的数据源。

return (IOrderedQueryable<TSource>)source.Provider.CreateQuery<TSource>(resultExpression);

}

public static class EnumerableExtension

{

///<typeparam name="TSource">泛型类型实例(1个指定类的类型实例)。</typeparam>

///<param name="source">以枚举数接口实例进行存储的1个指定类型的数据源(枚举数接口实例=长串型，包含：数组、列表、字典等)。</param>

///<param name="LongCount">需要跳过项的总计值。</param>

/// <summary>

/// 【长整型跳过】

/// <remarks>

/// 摘要：

/// 由于“System.Linq.Enumerable.Skip”方法只支持类型为“int”或“Int32”类型的需要跳过项的总计值，为了支持类型为“long”或“Int64”的需要跳过项的总计值，从而定义了该扩展方法。

/// </remarks>

/// </summary>

public static IEnumerable<TSource> LongSkip<TSource>(this IEnumerable<TSource> source, long LongCount)

{

//并在输出参数中返回余数：“remainder”(取余，“remainder”可以转换为“int”或“Int32”类型，因为“remainder”的最大值一定小于“int.MaxValue”)。

long quotients = Math.DivRem(LongCount, int.MaxValue, out long remainder);

//先执行从数据源中跳过quotients*int.MaxValue项操作。

for (long i = 0; i < quotients; i += 1)

source = source.Skip(int.MaxValue);

//如果余数(“remainder”)不为:0，则在上一个操作的基础上，再执行跳过remainder项操作。

if (remainder != 0)

source = source.Skip((int)remainder);

return source;

}

2 SerachModel重构

/// <summary>

/// 【查询模型--类】

/// <remarks>

/// 摘要：

/// 通过该实体类及其属性成员，获取/设置页面中的查询字段所对应的值。

/// </remarks>

/// </summary>

public class SerachModel

{

#region 拷贝构造方法

/// <summary>

/// 【拷贝构造方法】

/// <remarks>

/// 摘要：

/// 通过拷贝构造方法为列表属性成员实例和字典属性成员实例分配内存空间。

/// </remarks>

/// </summary

public SerachModel()

{

Length = 10;

}

#endregion

#region 属性--Jquery DataTable插件

/// <summary>

/// 【绘制】

/// <remarks>

/// 摘要：

/// 获取/设置1个指定的Jquery DataTable插件被操作的次数值。

/// </remarks>

/// </summary>

public int Draw { get; set; }

/// <summary>

/// 【开始】

/// <remarks>

/// 摘要：

/// 获取/设置1个指定的Jquery DataTable插件当前显示页面，需要跳过的行数值：=(页数-1)*pageSize(或length：(默认值)10，20，50，100)，Start>=0。

/// </remarks>

/// </summary>

public long Start { get; set; }

/// <summary>

/// 【长度】

/// <remarks>

/// 摘要：

/// 获取/设置1个指定的Jquery DataTable插件每页最多的行数值：(默认值)10，Length>=1。

/// </remarks>

/// </summary>

public int Length { get; set; }

/// <summary>

/// 【总计】

/// <remarks>

/// 摘要：

/// 获取/设置1个指定实体所有实例的总计值。

/// </remarks>

/// </summary>

public long RecordsTotal { get; set; }

/// <summary>

/// 【过滤总计】

/// <remarks>

/// 摘要：

/// 获取/设置符合指定过滤条件的1个指定实体所有实例的总计值。

/// </remarks>

/// </summary>

public long RecordsFiltered { get; set; }

/// <summary>

/// 【数据】

/// <remarks>

/// 摘要：

/// 获取/设置以枚举数接口进行存储的学生实体的所有实例。

/// 注意：

/// 为了与Jquery DataTable插件能够在浏览器中渲染出这些数据，该属性必须被命名为“Data”，也只能被命名为“Data”，否则浏览器中将不会渲染出这些数据。

/// </remarks>

/// </summary>

public IEnumerable<Student> Data { get; set; }

#endregion

#region 属性--学生实体

/// <summary>

/// 【姓名】

/// <remarks>

/// 摘要：

/// 获取/设置查询模型类1个指定实例的学生姓名。

/// </remarks>

/// </summary>

[Display(Name = "姓名")]

public string StudnetName { get; set; }

#endregion

}

3 HomeController重构

public IActionResult JqueryDataTable()

{

return View();

}

[HttpPost]

public IActionResult PrepareJquerySearch(SerachModel searchParm)

{

try

{

searchParm.RecordsTotal = 0;

searchParm.RecordsFiltered = 0;

//获取1个指定的Jquery DataTable插件被操作的次数值。

searchParm.Draw = string.IsNullOrEmpty(Request.Form["draw"].FirstOrDefault()) ? 0 : Convert.ToInt32(Request.Form["draw"].FirstOrDefault());

//获取1个指定的Jquery DataTable插件当前显示页面，需要跳过的行数值：=(页数-1)*pageSize(或length：(默认值)10，20，50，100)，Start>=0。

searchParm.Start = string.IsNullOrEmpty(Request.Form["start"].FirstOrDefault()) ? 0 : Convert.ToInt64(Request.Form["start"].FirstOrDefault());

searchParm.Start = Math.Max(searchParm.Start, 0);

//获取1个指定的Jquery DataTable插件每页最多的行数值：(默认值)10，Length>=1。

searchParm.Length = string.IsNullOrEmpty(Request.Form["length"].FirstOrDefault()) ? 0 : Convert.ToInt32(Request.Form["length"].FirstOrDefault());

searchParm.Length = Math.Max(searchParm.Length, 1);

//Jquery DataTable插件中用于排序列的列名。

var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();

//排序方式：(asc, desc) ,默认以“顺序：asc”方式进行排序。

var sortColumnDirection = string.IsNullOrEmpty(Request.Form["order[0][dir]"].FirstOrDefault()) ? "asc": Request.Form["order[0][dir]"].FirstOrDefault();

// 获取Jquery DataTable插件中搜索控件中的查询字符串。

if (!string.IsNullOrEmpty(Request.Form["search[value]"].FirstOrDefault()) && string.IsNullOrEmpty(searchParm.StudnetName))

searchParm.StudnetName = Request.Form["search[value]"].FirstOrDefault();

// 获取指定实体的所有实例。

var customerData = (from studentsQuery in _context.Student select studentsQuery);

//根据指定字段值，对所有实例进行排序操作。

if (sortColumnDirection.Equals("asc") && !string.IsNullOrEmpty(sortColumn))

{

customerData = customerData.OrderBy(sortColumn);

}

else if(sortColumnDirection.Equals("desc") && !string.IsNullOrEmpty(sortColumn))

{

customerData = customerData.OrderByDescending(sortColumn);

}

//根据指定查询字符串，对所有实例进行查询操作。

if (!string.IsNullOrEmpty(searchParm.StudnetName))

{

customerData = customerData.Where(m => m.StudnetName.Contains(searchParm.StudnetName));

}

//获取所有符合条件的实例的总计值。

searchParm.RecordsTotal = customerData.LongCount();

searchParm.RecordsFiltered = searchParm.RecordsTotal;

//根据页面设置参数值，从所有符合条件的实例中，获取在页面中进行显示的实例，并把显示实例存储到列表实例中。

searchParm.Data = customerData.LongSkip(searchParm.Start).Take(searchParm.Length).ToList();

//返回以JSON格式储存的

return Json(searchParm);

}

catch (Exception)

{

throw;

}

public IActionResult AddJqueryDataTable()

{

return View();

}

[HttpPost]

public IActionResult AddJqueryDataTable(Student model)

{

_context.Student.Add(model);//添加单个学生信息到数据库的指定表中

_context.SaveChanges();

ViewBag.RefreshPage = true;

return View();

}

public IActionResult EditJqueryDataTable(long studentId)

{

Student _model = _context.Student.SingleOrDefault(s => s.Id == studentId);

return View(_model);

}

[HttpPost]

public IActionResult EditJqueryDataTable(Student model, long studentId)

{

if (model.Id == 0 && studentId != 0)

model.Id = studentId;

_context.Student.Update(model);//对数据库指定表1指定行中的学生信息进行更新操作

_context.SaveChanges();

ViewBag.RefreshPage = true;

return View();

}

[HttpPost]

public IActionResult DeleteJqueryDataTable(long studentId)

{

try

{

int result = 0;

Student _model = _context.Student.SingleOrDefault(s => s.Id == studentId);

//1、单独删除方法

_context.Student.Remove(_model);//删除单个学生信息。

//_context.Remove(_model);//直接在context上Remove()方法传入model，它会通过指定实体的实例，判断泛型实体的类型(Student)。

result = _context.SaveChanges();

if (result > 0)

{

return Json(new { isDeleted = true });

}

else

{

return Json(new { isDeleted = false });

}

catch (Exception)

{

throw;

}

[HttpPost]

public IActionResult DeleteJqueryDataTableArray(long [] studentIdArray)

{

try

{

int result = 0;

List<Student> _studentList = new List<Student>();

foreach (var id in studentIdArray)

{

Student _model = _context.Student.SingleOrDefault(s => s.Id == id);

_studentList.Add(_model);

}

foreach (var item in _studentList)

{

//1、单独删除方法

_context.Student.Remove(item);//删除单个学生信息。

//_context.Remove(_model);//直接在context上Remove()方法传入model，它会通过指定实体的实例，判断泛型实体的类型(Student)。

_context.SaveChanges();

}

result = studentIdArray.Length;

if (result > 0)

{

return Json(new { isDeleted = true});

}

else

{

return Json(new { isDeleted = false});

}

catch (Exception)

{

throw;

}

4 JqueryDataTable.cshtml重构

@model JsonTable.Models.SerachModel

ViewData["Title"] = "JqueryDataTable";

}

@section styles {

}

</div>

查询

</button>

重置

</button>

批量删除

</button>

添加

</button>

@*“btnRefreshProducts”按钮标签必须定义在“Form”标签中或去掉对“window.opener.document.getElementById("@Context.Request.Query["btnId"]").click();”的注释。*@

</div>

</form>

</div>

</table>

</div>

@section Scripts

{

@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

var tableModel;

$(document).ready(function() {

tableModel = $("#example").DataTable({

language: {

url : '../../lib/dataTables-1.12.1/language/zh.json' //DataTables语言配置选项

processing : true, //是否显示“处理中...”(排序的时候，数据很多耗费时间长的话，也会显示这个)

serverSide : true, //是否开启服务器模式

paging : true, //是否允许翻页

//"rowId": "userId", //指定用于行ID的属性名默认是：DT_RowId

lengthMenu : [10, 20, 50, 100], //DataTableJquery插件下拉框控件中的数量选择内容。

pageLength : 10, // 每页的行数的默认值：10。

searching : true, //是否在DataTableJquery插件中显示搜索框控件。

autoWidth : true, //自适应宽度

//bSort : false, //禁止排序

pagingType: "numbers",//使用该类型，为在“表中数据为空”时，禁止在DataTableJquery插件中，显示“上页”、“下页”按钮。

order: [[1, "desc"]],//默认设置第二列以“倒序”方式对DataTableJquery插件进行排序显示。

ajax: {

url : "/Home/PrepareJquerySearch",

type: "POST",

datatype : "JSON",

cache :false, //禁用缓存

data : function(searchParm) { //传递参数

searchParm.studnetName=$("#StudnetName").val();

columnDefs : [ { //设置列定义初始化属性

"defaultContent" : "", //为列设置默认的静态内容

"targets" : "_all" //指定所有列

} ],

//注意："data"对应的字段（实体属性）的第1个字母必是小写，否则实体实例的值将不会被浏览器渲染出来。

"columns": [

{

"orderable": false,//禁用DataTableJquery插件第1列中的“排序”按钮。

"data": "id", "title": "<input type='checkbox' id='checkAll' class='form-check-input checkBox25' />",

"render": function (data, type, row, meta) {

return "<input type='checkbox' name='checkItem' value=" + data + " class='form-check-input checkBox25' />";

"sWidth": "25px",

{ "data": "id", "name": "id", "title": "编号", "autoWidth": true },//“name”属性及其对应值对DataTableJquery插件进行排序操作。

{ "data": "code", "name": "code", "title": "学号", "autoWidth": true },//“name”属性及其对应值对DataTableJquery插件进行排序操作。

{ "data": "studnetName", "name": "studnetName", "title": "姓名", "autoWidth": true },//“name”属性及其对应值对DataTableJquery插件进行排序操作。

{ "data": "specialty", "name": "specialty", "title": "专业", "autoWidth": true },//“name”属性及其对应值对DataTableJquery插件进行排序操作。

{ "data": "grade", "name": "grade", "title": "年级", "autoWidth": true },//“name”属性及其对应值对DataTableJquery插件进行排序操作。

{ "data": "category", "name": "category", "title": "班级", "autoWidth": true },//“name”属性及其对应值对DataTableJquery插件进行排序操作。

{

"orderable": false,//禁用DataTableJquery插件第8列中的“排序”按钮。

"render": function (data, type, full, meta)

{

//注意：“,500,500,true”参数实例中的“，”之间不能存在空格，否则“编辑”按钮点击无效，即“编辑”弹出窗口将不会出现。

return "<a href='#' class='btn btn-info' οnclick=OpenWindow('/Home/EditJqueryDataTable?studentId=" + full.id + "&btnId=btnRefreshProducts&formId=JqueryDataTableForm',500,500,true);>编辑</a>";

"sWidth": "30px",

{

"orderable": false,//禁用DataTableJquery插件第9列中的“排序”按钮。

data: null,

render: function (data, type, row)

{

return "<a href='#' class='btn btn-danger' οnclick=deleteData('" + data.id + "'); >删除</a>";

"sWidth": "30px",

});

// init：初始化和数据都加载完成，和 initComplete配置等价

tableModel.on("draw", function ()

{

$("#checkAll").prop("checked", false);//每次翻页；或跳转到上一页；或跳转到指定，DataTableJquery插件中已经处于全选状态的全选复选框控件，处于不选中状态。

//全选

$("#checkAll").click(function(){

$("[name=checkItem]:checkbox").prop("checked",this.checked);

});

//复选框组的联动效果

$("[name=checkItem]:checkbox").click(function(){

var flag = true;

$("[name=checkItem]:checkbox").each(function(index){

if(!this.checked)

{

flag = false;

}

});

$("#checkAll").prop("checked",flag);

});

//查询列表

$("#searchStudent").on("click", function() {

//重新加载DataTable插件，并返回第1页。

$("#example").DataTable().ajax.reload();

});

//重置列表

$("#resetStudent").on("click", function() {

//重新加载DataTable插件，并返回第1页。

$("#StudnetName").val("");

$("#example").DataTable().ajax.reload();

});

$("#btnRefreshProducts").on("click", function () {

$("#example").DataTable().page(tableModel.page()).draw(false); //刷新当前页；或跳转到指定页。

});

$("#resetStudent").on("click", function() {

//重新加载DataTable插件，并返回第1页。

$("#StudnetName").val("");

$("#example").DataTable().ajax.reload();

});

//删除单个指定用户

function deleteData(id)

{

if (!confirm("确定删除该记录吗？")) {

return;

}

if (id <= 0) {

alert("参数错误！");

return;

}

//执行您的删除操作

alert("删除学生的编号：" + id);

$.post("/Home/DeleteJqueryDataTable/", { studentId: id}, function(data) {

if (data.isDeleted)

{

var pageIndex = tableModel.page();//当前页页码值，但是Jquery DataTables插件的页面是从“0”开始，而不从“1”。

var pageLength = tableModel.page.info().length;//每1页最多显示的行数值。

var pageStart = tableModel.page.info().start; //获取Jquery DataTable插件当前显示页面，需要跳过的行数值：=(页数-1)*pageSize(或length：(默认值)10，20，50，100)。

var pageCount = tableModel.page.info().pages;//获取Jquery DataTable插件中的总页面值。

var recordsTotal = tableModel.page.info().recordsTotal - 1;;//执行删除操作后Jquery DataTable插件中的总项数。

//alert("pageIndex：" + pageIndex);

//alert("pageLength：" + pageLength);//当前每页显示多少 .

//alert("pageStart：" + pageStart);

//alert("pageCount：" + pageCount);

//alert("recordsTotal：" + recordsTotal);

if ((recordsTotal - pageStart) <= 0 && pageStart > 0) {

$("#example").DataTable().page('previous').draw("page");//返回上一页

}

else

{

$("#example").DataTable().page(pageIndex).draw(false); //刷新当前页；或跳转到指定页。

}

else

{

alert("Something Went Wrong!");

}

});

}

//批量删除

$("#deleteStudentList").on("click", function() {

var idArray = new Array(); //批量删除的用户ID数组

$("[name=checkItem]:checkbox:checked").each(function(index){

idArray.push($(this).val());

});

if(idArray.length==0)

{

alert("请选择要删除的员工！");

return;

}

if (!confirm("确定删除记录吗？")) {

return;

}

//执行您的删除操作

alert("删除用户的编号：" + idArray);

$.post("/Home/DeleteJqueryDataTableArray/", { studentIdArray: idArray}, function(data) {

if (data.isDeleted)

{

var pageIndex = tableModel.page();//当前页页码值，但是DataTables插件的页面是从“0”开始，而不从“1”。

var pageLength = tableModel.page.info().length;//每1页最多显示的行数值。

var pageStart = tableModel.page.info().start; //获取Jquery DataTable插件当前显示页面，需要跳过的行数值：=(页数-1)*pageSize(或length：(默认值)10，20，50，100)。

var pageCount = tableModel.page.info().pages;//获取Jquery DataTable插件中的总页面值。

var recordsTotal = tableModel.page.info().recordsTotal - idArray.length;//执行删除操作后Jquery DataTable插件中的总项数。

//alert("pageIndex：" + pageIndex);

//alert("pageLength：" + pageLength);//当前每页显示多少 .

//alert("pageStart：" + pageStart);

//alert("pageCount：" + pageCount);

//alert("recordsTotal：" + recordsTotal);

if ((recordsTotal - pageStart) <= 0 && pageStart > 0) {

$("#example").DataTable().page('previous').draw("page");//返回上一页

}

else

{

$("#example").DataTable().page(pageIndex).draw(false); //刷新当前页；或跳转到指定页。

}

else

{

alert("Something Went Wrong!");

}

});

</script>

}

注意：“OpenWindow ”Jquery方法是由nopCommerce开发者定义在“admin.common.js”文件中。

对以上功能更为具体实现和注释见：22-08-17-063_ JsonTable(重构定义Jquery DataTables)

zhoujian_911

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第63章 Jquery JSON Table 重构定义Jquery DataTables

通过对Jquery DataTables插件的重构实现表的无刷新查询、删除、添加和编辑等操作
复制链接

扫一扫

专栏目录

第63章 Jquery JSON Table 重构定义Jquery DataTables

“相关推荐”对你有帮助么？