本篇文章给大家介绍一下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('getselections'); if (rows.length == 0) { showtips("请选择你要打印编码的记录"); return; } //使用grid++报表,构建数据显示 var ids = ''; for (var i = 0; i < rows.length; i++) { ids += rows[i].id + ','; } 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++报表的方法的详细内容。