Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
本文中,讓我們嘗試構(gòu)建自定義 HTML Hepler以在 .NET Core MVC 應(yīng)用程序中提供分頁(yè)。首先對(duì)不熟悉的人簡(jiǎn)單介紹一下,什么是HTML Helper(助手):
在Web應(yīng)用程序中,如果要顯示大量記錄,則需要提供分頁(yè)。在本文中,我們通過創(chuàng)建自定義 HTML Helper 在 .NET Core MVC 應(yīng)用程序中實(shí)現(xiàn)分頁(yè)。為了簡(jiǎn)單起見,我們只能使用數(shù)字來表示數(shù)據(jù)。
假設(shè)我們需要在多頁(yè)中顯示 55 條記錄,每頁(yè)有 10 個(gè)項(xiàng)目,如上所示。
打開 Visual Studio 2019 > 創(chuàng)建 .NET Core MVC 應(yīng)用程序,如下所示。
項(xiàng)目命名為 HTMLHelpersApp。
選擇 .NET 框架版本。
創(chuàng)建所需的模型和幫助文件。
在 Number.cs 中添加代碼。該模型捕獲用戶輸入。它只有一個(gè)屬性:“InputNumber”。
using System;
using System.ComponentModel.DataAnnotations;
namespace HTMLHelpersApp.Models
{
public class Number
{
//validation for required, only numbers, allowed range-1 to 500
[Required(ErrorMessage = "Value is Required!. Please enter value between 1 and 500.")]
[RegularExpression(@"^\d+$", ErrorMessage = "Only numbers are allowed. Please enter value between 1 and 500.")]
[Range(1, 500, ErrorMessage = "Please enter value between 1 and 500.")]
public int InputNumber = 1;
}
}
現(xiàn)在讓我們添加一個(gè)公共類 PageInfo.cs。創(chuàng)建新文件夾 Common 并添加 PageInfo.cs 類。
在 PageInfo.cs 中添加代碼:
根據(jù)總項(xiàng)目數(shù)和每頁(yè)項(xiàng)目數(shù),計(jì)算頁(yè)面的總頁(yè)數(shù)、第一個(gè)項(xiàng)目和最后一個(gè)項(xiàng)目。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace HTMLHelpersApp.Common
{
public class PageInfo
{
public int TotalItems { get; set; }
public int ItemsPerPage { get; set; }
public int CurrentPage { get; set; }
public PageInfo()
{
CurrentPage = 1;
}
//starting item number in the page
public int PageStart
{
get { return ((CurrentPage - 1) * ItemsPerPage + 1); }
}
//last item number in the page
public int PageEnd
{
get
{
int currentTotal = (CurrentPage - 1) * ItemsPerPage + ItemsPerPage;
return (currentTotal < TotalItems ? currentTotal : TotalItems);
}
}
public int LastPage
{
get { return (int)Math.Ceiling((decimal)TotalItems / ItemsPerPage); }
}
}
}
現(xiàn)在我們來到最重要的部分:創(chuàng)建自定義 HTML 助手。
public static IHtmlContent PageLinks(this IHtmlHelper htmlHelper, PageInfo pageInfo, Func<int, string> PageUrl)
5.取2個(gè)參數(shù)
使用標(biāo)簽構(gòu)建器創(chuàng)建錨標(biāo)簽。
TagBuilder tag = new TagBuilder("a");
Add attributes
tag.MergeAttribute("href", hrefValue);
tag.InnerHtml.Append(" "+ innerHtml + " ");
樣式也可以用作屬性。
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering;
using System;
using System.Text;
namespace HTMLHelpersApp.Common
{
public static class PagingHtmlHelpers
{
public static IHtmlContent PageLinks(this IHtmlHelper htmlHelper, PageInfo pageInfo, Func<int, string> PageUrl)
{
StringBuilder pagingTags = new StringBuilder();
//Prev Page
if (pageInfo.CurrentPage > 1)
{
pagingTags.Append(GetTagString("Prev", PageUrl(pageInfo.CurrentPage - 1)));
}
//Page Numbers
for (int i = 1; i <= pageInfo.LastPage; i++)
{
pagingTags.Append(GetTagString(i.ToString(), PageUrl(i)));
}
//Next Page
if (pageInfo.CurrentPage < pageInfo.LastPage)
{
pagingTags.Append(GetTagString("Next", PageUrl(pageInfo.CurrentPage + 1)));
}
//paging tags
return new HtmlString(pagingTags.ToString());
}
private static string GetTagString(string innerHtml, string hrefValue)
{
TagBuilder tag = new TagBuilder("a"); // Construct an <a> tag
tag.MergeAttribute("class","anchorstyle");
tag.MergeAttribute("href", hrefValue);
tag.InnerHtml.Append(" "+ innerHtml + " ");
using (var sw = new System.IO.StringWriter())
{
tag.WriteTo(sw, System.Text.Encodings.Web.HtmlEncoder.Default);
return sw.ToString();
}
}
}
}
在“Models”文件夾中添加一個(gè)新類“ShowPaging.cs”。
using HTMLHelpersApp.Common;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
namespace HTMLHelpersApp.Models
{
public class ShowPaging
{
//validation for required, only numbers, allowed range-1 to 500
[Required(ErrorMessage = "Value is Required!. Please enter value between 1 and 500.")]
[RegularExpression(@"^\d+$", ErrorMessage = "Only positive numbers are allowed. Please enter value between 1 and 500.")]
[Range(1, 500, ErrorMessage = "Please enter value between 1 and 500.")]
public int InputNumber { get; set; }
public List<string> DisplayResult { get; set; }
public PageInfo PageInfo;
}
}
添加一個(gè)新控制器:“HTMLHelperController”
右鍵單擊控制器文件夾并在上下文菜單中選擇控制器。
選擇“MVCController-Empty”。
在“HTMLHelperController”中添加代碼。
using HTMLHelpersApp.Common;
using HTMLHelpersApp.Models;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
namespace HTMLHelpersApp.Controllers
{
public class HTMLHelperController : Controller
{
private const int PAGE_SIZE = 10;
public IActionResult Number()
{
return View();
}
public IActionResult ShowPaging(ShowPaging model, int page = 1, int inputNumber = 1)
{
if (ModelState.IsValid)
{
var displayResult = new List<string>();
string message;
//set model.pageinfo
model.PageInfo = new PageInfo();
model.PageInfo.CurrentPage = page;
model.PageInfo.ItemsPerPage = PAGE_SIZE;
model.PageInfo.TotalItems = inputNumber;
//Set model.displayresult - numbers list
for (int count = model.PageInfo.PageStart; count <= model.PageInfo.PageEnd; count++)
{
message = count.ToString();
displayResult.Add(message.Trim());
}
model.DisplayResult = displayResult;
}
//return view model
return View(model);
}
}
}
在 Views 文件夾中創(chuàng)建一個(gè)新文件夾“HTMLHelper”,并創(chuàng)建一個(gè)新視圖“Number.cshtml”。
在“Number.cshtml”中添加代碼。
@model HTMLHelpersApp.Models.Number
<h4>Number</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="ShowPaging" method="get">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input asp-for="InputNumber" class="form-control"/>
</div>
<div class="form-group">
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
</form>
</div>
</div>
同樣,創(chuàng)建一個(gè)新視圖“ShowPaging.cshtml”。
@model HTMLHelpersApp.Models.ShowPaging
@using HTMLHelpersApp.Common
<link rel="stylesheet" href ="~/css/anchorstyles.css"/>
<form>
<h4>Show Paging</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<dl class="row">
<dt class="col-sm-2">
<b>Number: </b> @Html.DisplayFor(model => model.InputNumber)
</dt>
<dd>
<a asp-action="Number">Change Number</a>
</dd>
</dl>
<div>
@if (Model != null && Model.DisplayResult != null)
{
<ul>
@foreach (var item in Model.DisplayResult)
{
<li>@Html.Raw(item)</li>
}
</ul>
<div>
@Html.PageLinks(@Model.PageInfo, x => Url.Action("ShowPaging",
new { page = x.ToString(), inputNumber = @Model.InputNumber }))
</div>
}
</div>
</form>
解決方案資源管理器如下所示:
在“startup.cs”中配置默認(rèn)控制器和操作。
編譯并運(yùn)行應(yīng)用程序,輸入數(shù)字 35。
點(diǎn)擊提交。
你會(huì)在底部看到分頁(yè),每頁(yè)顯示10個(gè)數(shù)字,一共4頁(yè),且每頁(yè)都一個(gè)鏈接。
qPaginator是一個(gè)簡(jiǎn)潔、高度自定義的jQuery分頁(yè)組件 !而且自帶BootStrap的樣式!當(dāng)然你入股不喜歡BootStrap的樣式,完全可以自定義!
GitHub地址: https://github.com/DangJin/jqPaginator!
好了我們接下來介紹下這么優(yōu)美的東西該如何使用吧!
引入Js文件
這里需要說明的是因?yàn)閮?nèi)置BootStrap樣式,所以需要引入BootStrap的Css樣式哦!
配置參數(shù)
參數(shù) | 默認(rèn)值 | 說明 |
---|---|---|
totalPages | 0 | 設(shè)置分頁(yè)的總頁(yè)數(shù) |
totalCounts | 0 | 設(shè)置分頁(yè)的總條目數(shù) |
pageSize | 0 | 設(shè)置每一頁(yè)的條目數(shù)注意:要么設(shè)置totalPages,要么設(shè)置totalCounts + pageSize,否則報(bào)錯(cuò);設(shè)置了totalCounts和pageSize后,會(huì)自動(dòng)計(jì)算出totalPages。 |
currentPage | 1 | 設(shè)置當(dāng)前的頁(yè)碼 |
visiblePages | 7 | 設(shè)置最多顯示的頁(yè)碼數(shù)(例如有100也,當(dāng)前第1頁(yè),則顯示1 - 7頁(yè)) |
disableClass | 'disabled' | 設(shè)置首頁(yè),上一頁(yè),下一頁(yè),末頁(yè)的“禁用狀態(tài)”樣式 |
activeClass | 'active' | 設(shè)置當(dāng)前頁(yè)碼樣式 |
first | bootstrap風(fēng)格 | 設(shè)置“首頁(yè)”的Html結(jié)構(gòu) |
prev | bootstrap風(fēng)格 | 設(shè)置“上一頁(yè)”的Html結(jié)構(gòu) |
next | bootstrap風(fēng)格 | 設(shè)置“下一頁(yè)”的Html結(jié)構(gòu) |
last | bootstrap風(fēng)格 | 設(shè)置“末頁(yè)”的Html結(jié)構(gòu) |
page | bootstrap風(fēng)格 | 設(shè)置頁(yè)碼的Html結(jié)構(gòu),其中可以使用{{page}}代表當(dāng)前頁(yè),{{totalPages}}代表總頁(yè)數(shù),{{totalCounts}}代表總條目數(shù)(例如:上面的“極簡(jiǎn)風(fēng)格”的Demo,就是使用了{(lán){占位符}},并將visiblePages設(shè)為1實(shí)現(xiàn)的。)注意:first、prev、next、last。page只要設(shè)置一個(gè),其余未設(shè)置的會(huì)變?yōu)榭铡?/td> |
wrapper | (無) | 分頁(yè)結(jié)構(gòu)的Html包裹,例如:<div class="your class"></div>,一般不會(huì)用到 |
onPageChange | (無) | 回調(diào)函數(shù),當(dāng)換頁(yè)時(shí)觸發(fā)(包括初始化第一頁(yè)的時(shí)候),會(huì)傳入兩個(gè)參數(shù):1、“目標(biāo)頁(yè)"的頁(yè)碼,Number類型2、觸發(fā)類型,可能的值:“init”(初始化),“change”(點(diǎn)擊分頁(yè)) |
如果不是自定義樣式,用默認(rèn)的記得一定要加這個(gè)屬性 wrapper 如果不加,會(huì)出現(xiàn)這種奇葩的情況
BootStrap默認(rèn)wrapper 是<nav></nav>
當(dāng)報(bào)表展示的數(shù)據(jù)量比較多的時(shí)候,有兩種辦法可以有效提升預(yù)覽速度。
一種情況是sql查詢速度比較快,頁(yè)面展示比較慢。此時(shí)直接使用帆軟內(nèi)置的分頁(yè)預(yù)覽方式就可以大幅提升預(yù)覽速度。
另一種情況是,sql查詢本身就比較慢。這種就需要通過sql分頁(yè)來提升預(yù)覽速度。
帆軟本身提供行式引擎來解決這種問題,不過使用行式引擎有其自身的局限性,具體詳情可以查看帆軟幫助文檔:?jiǎn)⒂眯惺揭鎴?zhí)行層式報(bào)表- FineReport幫助文檔 - 全面的報(bào)表使用教程和學(xué)習(xí)資料
自定義帆軟的工具欄,使用js來實(shí)現(xiàn)對(duì)應(yīng)的翻頁(yè)功能,并且提供兩個(gè)參數(shù)來供sql調(diào)用,能滿足所有數(shù)據(jù)庫(kù)sql分頁(yè)的使用場(chǎng)景。最終效果如下:
1、創(chuàng)建分頁(yè)sql
sql語(yǔ)句如下:
select * from 銷量 order by 銷量
${if(len(pageno)=0,"","limit "+((pageno-1)*pagesize)+","+pagesize)}
同時(shí)創(chuàng)建一個(gè)計(jì)算總行數(shù)和總頁(yè)數(shù)的sql,需要注意,數(shù)據(jù)集名稱命名為pagetool,總行數(shù)重新名為totalcnt,總頁(yè)數(shù)重命名為totalpage,后面js中調(diào)用會(huì)用到。
select count(1) as totalcnt,
ceiling(count(1)*1.0/${pagesize}) as totalpage
from 銷量
2、報(bào)表設(shè)計(jì)
報(bào)表設(shè)計(jì)沒有限制,根據(jù)實(shí)際項(xiàng)目需求設(shè)計(jì)。這里的設(shè)計(jì)如下:
3、引入js文件
點(diǎn)擊工具欄進(jìn)行分頁(yè)的時(shí)候,需要向頁(yè)面?zhèn)鬟f參數(shù),并刷新頁(yè)面。這里采用動(dòng)態(tài)參數(shù)傳參的方式,因?yàn)槎嗵幾远x事件均使用到傳參,因此將它定義成一個(gè)函數(shù),以實(shí)現(xiàn)復(fù)用。代碼如下:
var reload=function(param){
FR.ajax({
url:'/webroot/decision/view/report?op=fr_dialog&cmd=parameters_dynamic',
type:'POST',
data:param,
headers: {sessionID:FR.SessionMgr.getSessionID()},
complete:function(res, status){
if(window.FR && FR.Chart && FR.Chart.WebUtils){
FR.Chart.WebUtils.clearCharts(); }
if(window.FR && FR.destroyDialog) {
FR.destroyDialog(); }
_g().loadContentPane();
}
})
}
將其保存為reload.js文件,并在模板>模板web屬性>引用JavaScript處將其導(dǎo)入,如下所示:
5、自定義工具欄
考慮到實(shí)現(xiàn)效果后可以自定義每頁(yè)顯示的條數(shù),導(dǎo)致報(bào)表展示的頁(yè)面大小無法估計(jì)。因此使用填報(bào)預(yù)覽的方式來實(shí)現(xiàn)。
1)打開模板>模板web屬性>填報(bào)頁(yè)面設(shè)置,選擇為該模板單獨(dú)設(shè)置,將默認(rèn)的工具欄按鈕全部清除掉,然后依次添加兩個(gè)自定義按鈕,一個(gè)郵件按鈕,四個(gè)自定義按鈕,一個(gè)PDF按鈕。如下所示:
2)為自定義按鈕重命名并添加自定義事件
如圖所示,六個(gè)自定義的重命名分別為
①重命名:首頁(yè),自定義事件如下:
reload({"pageno":1})
②重命名:上一頁(yè),自定義事件如下:
var pageno = FR.remoteEvaluate("=$pageno");
reload({"pageno":pageno-1});
③重命名:下一頁(yè),自定義事件如下:
var pageno = FR.remoteEvaluate("=$pageno");
reload({"pageno":pageno*1+1})
④重命名:末頁(yè),自定義事件如下:
var totalpage = FR.remoteEvaluate("=value('pagetool',2,1)");
reload({"pageno":totalpage});
⑤重命名:導(dǎo)出Excel,自定義事件如下:
var url = "${servletURL}?viewlet=${reportName}&format=excel&pageno=";
window.location=encodeURI(encodeURI(url));
⑥重命名:數(shù)據(jù)總量,無自定義事件。
5、添加加載結(jié)束事件
在模板>模板web屬性>填報(bào)頁(yè)面設(shè)置>為該模板單獨(dú)設(shè)置中,添加加載結(jié)束事件,如下圖所示
其中代碼如下:
setTimeout(function(){
// 定義變量獲取總行數(shù)、總頁(yè)數(shù)、頁(yè)碼、每頁(yè)顯示行數(shù)
var totalcnt = FR.remoteEvaluate("=value('pagetool',1,1)");
var totalpage = FR.remoteEvaluate("=value('pagetool',2,1)");
var pageno = FR.remoteEvaluate("=$pageno");
var pagesize = FR.remoteEvaluate("=$pagesize");
//定義當(dāng)前頁(yè)和每頁(yè)顯示行數(shù)的html代碼
var currentpageStr = "<input id='currentpage' min='1' type='number' style='width:50px;'/><label id='totalpage' style='font:400 13.3333px Arial;'></label>";
var pagesizeStr = "<label style='font:400 13.3333px Arial;'>每頁(yè)顯示條數(shù):</label><input id='pagesize' min='10' max='100' type='number' style='width:50px'/>";
//將email按鈕和pdf按鈕替換成當(dāng)前頁(yè)和每頁(yè)顯示行數(shù),并設(shè)置按鈕屬性
$("div[widgetname=Email]").replaceWith(currentpageStr);
$("div[widgetname=PDF]").replaceWith(pagesizeStr);
$("#currentpage").val(pageno);
$("#currentpage").attr("max",totalpage);
$("#totalpage").text(" / "+totalpage);
$("#pagesize").val(pagesize);
_g().toolbar.options.items[6].setValue("數(shù)據(jù)總量:"+totalcnt);
//當(dāng)前頁(yè)的值有變化時(shí)觸發(fā)的操作
$("#currentpage").change(function(){
var val = $(this).val();
if(val <1 || val>totalpage){
$(this).val(pageno);
}else{
reload({"pageno":val})
}
})
//每頁(yè)顯示行數(shù)的值有變化時(shí)觸發(fā)的操作
$("#pagesize").change(function(){
var val = $(this).val();
if(val <10 || val>100){
$(this).val(pagesize);
}else{
reload({"pagesize":val})
}
})
//當(dāng)頁(yè)碼為1時(shí),首頁(yè)和上一頁(yè)不可用
if(pageno == 1){
_g().toolbar.options.items[0].setEnable(false);
_g().toolbar.options.items[1].setEnable(false);
}
//當(dāng)頁(yè)碼等于最后一頁(yè)時(shí),下一頁(yè)和末頁(yè)不可用
if(pageno == totalpage){
_g().toolbar.options.items[3].setEnable(false);
_g().toolbar.options.items[4].setEnable(false);
}
},10)
11.0.5(Build#persist-2022.06.15.17.11.21.865)
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。