淺談Bootstrap中使用Grid++報表的方法-Bootstrap教程-PHP中文網

首頁

web前端

Bootstrap教程

淺談Bootstrap中使用Grid++報表的方法

青灯夜游

Jun 15, 2021 am 11:23 AM

bootstrap

這篇文章跟大家介紹一下Bootstrap中使用Grid 報表的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

淺談Bootstrap中使用Grid++報表的方法

這篇隨筆介紹在Bootstrap開發框架中使用Grid 報表，也就是Web環境中使用Grid 報表，對於我上篇提到的二維碼條碼的資產資訊表，我係統透過Web方式進行呈現，或是展示其報表的PDF也可以，本篇隨筆一步步介紹如何使用Web報表的展示出來。

1、Grid 報表在Web端的處理

Grid 在Web端，提供了插件的方式展示，不過由於插件是採用COM方式處理的，這種模式限制了它支援瀏覽器有限。

透過上面表格，也就是說基本上我們應用比較廣泛的Chrome和FireFox最新的都不支援了，由於我專案需求，我希望客戶能夠在不同的瀏覽器上實現報表的展示，那這種插件方式顯示的方式就不太適合了。

【相關推薦：《bootstrap教學》】

不過Grid 報表還是提供了另一種方式，也就是HTML5的方式展示，HTML5報表運作在所有支援HTML5的瀏覽器(目前較新版本的各種瀏覽器都支援HTML5)。

例如在Chrome瀏覽器裡面展示HTML報表，效果如下圖所示。

這種方式還挺棒的，不過我在做二維碼列印的時候，發現和我設計的報表不太一樣，我設計的報表樣式效果如下圖所示。

而HTML報表給我的效果是如下圖。

也就是沒能照我所需要的排列來展示，因此我希望在服務端產生PDF格式展示，因為PDF的效果還是最好的，不會變形，而且我可以透過PDFJS的插件實現線上預覽效果，需要的時候，下載PDF列印內容即可。

2、Grid 報表在Web端的實作過程

前面介紹了我需要的報表效果和特定選型過程，在得出最終結果之前，我們來一步步看看具體的實現效果。

對於一些簡單的二維表，如果使用直接報表展示的方式還是很棒的，下面我們先來介紹透過HTML報表直接呈現的方式實作流程。

由於我這個Bootstrap開發框架是採用MVC開發的，我想把報表的展示放在Report.cshtml視圖裡面，那麼我需要建立一個視圖Action，如下圖所示。

        public ActionResult Report()
        {
            return View("Report");
        }

這樣，我們再建立一個Report.cshtml視圖頁面，如下圖所示。首先引入我們需要的JS，一般來說，引入grhtml5-6.6-min.js檔案就可以了，由於我們需要使用Jquery的一些處理方式，因此JQueryJS也需要引入的。

@*此处添加一些Jquery相关的脚本，方便开发时刻自定义脚本的智能提示*@
    <script src="~/Content/metronic/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="~/Content/metronic/assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="~/Content/metronic/assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>

    <!--Grid++报表需要的JS文件-->
    <script src="~/Content/JQueryTools/GridReport/grhtml5-6.6-min.js"></script>

這樣我們呼叫報表物件進行資料的處理即可，如下面我們測試一個案例的報表內容處理。

<script language="javascript" type="text/javascript">
        function loadReport() {

            rubylong.grhtml5.barcodeURL = "/Barcode.ashx";
            //创建报表显示器，参数指定其在网页中的占位标签的ID，报表模板URL与报表数据URL不指定，而是在后面的AJAX操作中提供相关数据
            var reportViewer = window.rubylong.grhtml5.insertReportViewer("report_holder");
            reportViewer.reportPrepared = false; //指定报表生成需要加载报表模板
            reportViewer.dataPrepared = false;   //指定报表生成需要加载报表数据

            //报表在模板与数据都载入后会自动生成

            //测试报表
            $.ajax({
                type: "GET",
                url: "/Report/1a.SimpleList.grf",
                data: "",
                success: function (msg) {
                    reportViewer.loadReport(msg);
                }
            });
            $.ajax({
                type: "GET",
                //url: "/Report/xmlCustomer.txt", //xml格式
                url: "/Report/jsonCustomer.txt",//json格式
                data: "",
                success: function (msg) {
                    reportViewer.loadData(msg);
                }
            });

        //页面初始化
        $(function () {
            loadReport();
        });
    </script>

報表內容呈現在HTML元素裡面，如下程式碼所示。

<body>
    <div id="report_holder">
    </div>
</body>

透過上面我們了解到它的報表內容的賦值處理，我們首先需要確定報表範本文件，以及動態產生報表呈現的數據，取代 jsonCustomer.txt 文件內容。

我們來看看這個檔案的格式如下。

也就是我們如果需要動態生成數據，則建構這一個JSON格式輸出即可。測試報表介面效果如下所示，二維表格顯示效果還是很好的。

實際報表處理的時候，由於我需要動態展示數據，因此在JS接收一個參數，並根據參數動態建立資料即可。

如下是我實際的專案報表資料展示。

function loadReport(ids) {

            rubylong.grhtml5.barcodeURL = "/Barcode.ashx";
            //创建报表显示器，参数指定其在网页中的占位标签的ID，报表模板URL与报表数据URL不指定，而是在后面的AJAX操作中提供相关数据
            var reportViewer = window.rubylong.grhtml5.insertReportViewer("report_holder");
            reportViewer.reportPrepared = false; //指定报表生成需要加载报表模板
            reportViewer.dataPrepared = false;   //指定报表生成需要加载报表数据

            //报表在模板与数据都载入后会自动生成
            //正式报表
            $.ajax({
                type: "GET",
                url: "/Report/barcode.grf",
                data: "",
                success: function (msg) {
                    reportViewer.loadReport(msg);
                }
            });
            $.ajax({
                type: "GET",
                //url: "/Report/jsonbarcode.txt", //json文件格式
                url: "/Asset/GetRepotData?ids=" + ids,//动态json格式
                data: "",
                success: function (msg) {
                    reportViewer.loadData(msg);
                }
            });
        };

我透過 Asset / GetRepotData 的方法實現資料的動態產生。

/// <summary>
        /// 获取Grid++的JSON格式报表数据
        /// </summary>
        /// <returns></returns>
        public ActionResult GetRepotData(string ids)
        {
            ActionResult result = Content("");
            if (!string.IsNullOrEmpty(ids))
            {
                var list = BLLFactory<Asset>.Instance.FindByIDs(ids);
                //构建一个合法格式的对象，进行序列号
                var table = new
                {
                    Table = list
                };
                result = ToJsonContent(table);
            }
            return result;
        }

其實就是建立一個頂層節點的Table對象，然後序列化為JSON即可。

這樣我們就可以輸出所需要的報表了，如下所示。

不過這樣的報表，沒有按照我需要的兩列排列（估計也是報表的一個Bug吧），沒有達到我的期望，因此我希望透過展示PDF的方式，實現嚴格格式的輸出報表。

3、Grid++报表在Web端的PDF处理

报表控件，后台通过PDF的生成方式，如果在Winform下直接导出PDF方式，具体如下所示。

private void btnExportPdf_Click(object sender, EventArgs e)
        {
            List<ProductInfo> list = BLLFactory<Product>.Instance.GetAll();

            //从对应文件中载入报表模板数据
            string reportPath = Path.Combine(Application.StartupPath, "Reports\\testList.grf");
            GridExportHelper helper = new GridExportHelper(reportPath);

            string fileName = "d:\\my.pdf";
            var succeeded = helper.ExportPdf(list, fileName);
            if(succeeded)
            {
                Process.Start(fileName);
            }
        }

而其中辅助类的ExportPdf方法就是直接利用报表客户端控件对象导出PDF的，如下代码所示。

/// <summary>
        /// 导出PDF，并返回路径
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="list"></param>
        /// <returns></returns>
        public bool ExportPdf<T>(List<T> list, string filePath)
        {
            //从对应文件中载入报表模板数据
            Report.LoadFromFile(this.ReportPath);
            Report.FetchRecord += () =>
            {
                FillRecordToReport<T>(Report, list);
            };
            Report.ExportBegin += (IGRExportOption option) =>
            {
                option.AbortOpenFile = true;  //导出后不用关联程序打开导出文件，如导出Excel文件之后不用Excel打开
                option.FileName = filePath;
                switch (option.ExportType)
                {
                    case GRExportType.gretPDF:
                        option.AsE2PDFOption.Author = "My Author";
                        option.AsE2PDFOption.Subject = "My Subject";
                        break;
                }
            };

            var succeeded = Report.ExportDirect(GRExportType.gretPDF, filePath, false, false);
            return succeeded;
        }

报表导出的效果和报表预览效果一致

不过我使用前面报表客户端的对象处理报表导出，在测试后台生成PDF的时候，提示内存损坏，应该就是COM处理的问题，不支持这样的方式，咨询作者后说需要使用 WEB报表服务器方式来生成PDF。

改变一下处理过程，实际使用的是GridppReportServer对象来处理，实际代码如下所示。

/// <summary>
        /// 导出PDF
        /// </summary>
        /// <typeparam name="T">列表对象类型</typeparam>
        /// <param name="list">列表对象</param>
        /// <param name="filePath">存储路径</param>
        /// <param name="context"></param>
        /// <returns></returns>
        public bool ExportPdf<T>(List<T> list, string filePath, HttpContextBase context)
        {
            //从对应文件中载入报表模板数据
            Report.LoadFromFile(this.ReportPath);

            //构建一个合法格式的对象，进行序列化
            var table = new
            {
                Table = list
            };
            var json = JsonConvert.SerializeObject(table, Formatting.Indented);
            Report.LoadDataFromXML(json);

            IGRExportOption ExportOption = Report.PrepareExport(GRExportType.gretPDF);
            var exportPdf = Report.ExportToBinaryObject();
            Report.UnprepareExport();

            var succeeded = exportPdf.SaveToFile(filePath);
            return succeeded;
        }

有了这个辅助方法，我们就可以封装一下处理获得数据，并导出PDF文件的操作了

/// <summary>
        /// 根据选中的ID记录，生成对应的PDF报表，返回路径
        /// </summary>
        /// <param name="ids">选中的ID记录，逗号分开</param>
        /// <returns></returns>
        public ActionResult ExportPdf(string ids)
        {
            ActionResult result = Content("");
            if (!string.IsNullOrEmpty(ids))
            {
                //利用接口获取列表数据
                var list = BLLFactory<Asset>.Instance.FindByIDs(ids);
                //报表文件路径
                string reportPath ="/Report/barcode.grf";
                //转换为物理路径
                reportPath = Server.MapPath(reportPath);

                //导出PDF的文件路径
                string exportPdfPath = string.Format("/GenerateFiles/{0}/AssetReport.pdf", CurrentUser.Name);
                //转换为物理路径
                string realPath = Server.MapPath(exportPdfPath);
                //确保目录生成
                string parentPath = Directory.GetParent(realPath).FullName;
                DirectoryUtil.AssertDirExist(parentPath);

                //生成PDF报表文档到具体文件
                GridExportHelper helper = new GridExportHelper(reportPath);
                bool success = helper.ExportPdf(list, realPath, HttpContext);
                if(success)
                {
                    result = Content(exportPdfPath);//返回Web相对路径
                }
                helper.Dispose();//销毁对象
            }
            return result;
        }

这些是后端的代码，要想在前端里面处理并预览PDF文件，需要加入前端的HTML代码

如下我们加入两个JS函数

//查看明细信息
        function ViewPDF(ids) {
            $.ajax({
                type: "GET",
                url: "/Asset/ExportPdf?ids=" + ids,
                data: "",
                success: function (filePath) {
                    var baseUrl = "/Content/JQueryTools/pdfjs/web/viewer.html";
                    var url = baseUrl + "?file=" + filePath;//实际地址
                    window.open(url);
                }
            });
        };

        function AssetPrint() {
            var rows = $table.bootstrapTable(&#39;getSelections&#39;);
            if (rows.length == 0) {
                showTips("请选择你要打印编码的记录");
                return;
            }

            //使用Grid++报表，构建数据显示
            var ids = &#39;&#39;;
            for (var i = 0; i < rows.length; i++) {
                ids += rows[i].ID + &#39;,&#39;;
            }
            ids = ids.substring(0, ids.length - 1);

            //loadReport(ids);
            ViewPDF(ids);
        }

这里利用了PDFJS的插件来在线展示生成的PDF，需要了解具体可以参考我之前的随笔《实现在线预览PDF的几种解决方案》

然后在HTML页面里面加入对应的处理按钮即可。

<button type="button" onclick="AssetPrint()" class="btn btn-circle btn-sm red">
    <i class="fa fa-plus"></i>
    资产编码打印
</button>

如下页面的界面效果所示

单击【资产编码打印】，首先在后台动态生成一个PDF文件，成功后前端弹出一个新的预览PDF界面，预览我们的二维码报表，效果比HTML5界面效果标准，和我们原来的设计报表初衷一直，两列排列。

以上就是我在实际项目中，在Bootstrap开发框架中使用Grid++报表的几个处理过程，希望对你使用有帮助，报表确实具有很好的应用场景，使用起来还是很方便的。

更多编程相关知识，请访问：编程入门！！

以上是淺談Bootstrap中使用Grid++報表的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：博客园。如有侵權，請聯絡admin@php.cn刪除

引導程序：從佈局到組件Apr 23, 2025 am 12:06 AM

Bootstrap是一個由Twitter開發的前端框架，集成了HTML、CSS和JavaScript，幫助開發者快速構建響應式網站。其核心功能包括：柵格系統與佈局：基於12列的設計，使用flexbox佈局，支持不同設備尺寸的響應式頁面。組件與樣式：提供豐富的組件庫，如按鈕、模態框等，通過添加類名即可實現美觀效果。工作原理：依賴CSS和JavaScript，CSS使用LESS或SASS預處理器，JavaScript依賴jQuery，實現交互和動態效果。通過這些功能，Bootstrap大大提升了開發

什麼是bootstrap？初學者的介紹Apr 22, 2025 am 12:07 AM

BootstrapisafreeCSSframeworkthatsimplifieswebdevelopmentbyprovidingpre-styledcomponentsandJavaScriptplugins.It'sidealforcreatingresponsive,mobile-firstwebsites,offeringaflexiblegridsystemforlayoutsandasupportivecommunityforlearningandcustomization.

Bootstrap Demystified：一個簡單的解釋Apr 21, 2025 am 12:13 AM

Bootstrapisafree,open-sourceCSSframeworkthathelpscreateresponsive,mobile-firstwebsites.1)Itoffersagridsystemforlayoutflexibility,2)includespre-styledcomponentsforquickdesign,and3)ishighlycustomizabletoavoidgenericlooks,butrequiresunderstandingCSStoop