接上一篇《hibernate+spring+mvc+Easyui框架模式下使用grid++report的总结》对grid++report做进一步开发
先写一下实现流程：
1、默认为全部载入
2、双击一行后将记录改行的数据，并显示在上方div中
3、点击div中各单元的X可以进行单元删除（上图删除了超级管理员显示如下）
4、点击载入选中项后，对数据进行过滤，筛选出选中项
5、全部删除后，默认查询出所有项
6、所有项
7、重新载入后可以选择打印，就相当于打印当前页面了
下面贴代码。
html
1 <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head runat="server"> 6 <title>报表</title> 7 <meta name="viewport" content="width=device-width" /> 8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 9 <%:Styles.Render("~/Content/easyui/css")%> 10 <%:Styles.Render("~/Content/Index/css")%> 11 <%:Scripts.Render("~/bundles/jquery")%> 12 <%:Scripts.Render("~/Scripts/jquery-1.8.0.min.js")%> 13 <%:Scripts.Render("~/Scripts/easyUI/jquery.min.js")%> 14 <%:Scripts.Render("~/Scripts/easyUI/jquery.easyui.min.js")%> 15 <%:Scripts.Render("~/Scripts/jquery.uploadify.js")%> 16 <%:Scripts.Render("~/bundles/easyui")%> 17 <%:Styles.Render("~/Content/uploadify/uploadify.css")%> 18 <%:Scripts.Render("~/Content/CreateControl.js")%> 19 <script type="text/javascript"> 20 //在网页初始加载时启动报表的运行显示 21 function window_onload() { 22 btnRefresh_onclick(); 23 } 24 25 //打印预览报表 26 function btnPreview_onclick() { 27 ReportViewer.Report.PrintPreview(true); 28 } 29 30 //根据数据过滤参数重新显示报表 31 function btnRefresh_onclick() { 32 ReportViewer.Stop(); 33 ReportViewer.DataURL = "user/load"; 34 // var BeginDate = document.getElementById("txtBeginDate").value; 35 // var EndDate = document.getElementById("txtEndDate").value; 36 // var DataURL = encodeURI("xmlSummary.aspx?BeginDate=" + BeginDate + "&EndDate=" + EndDate); 37 // ReportViewer.DataURL = DataURL; 38 39 //更新查询参数更新报表付标题，设置对应静态框的“Text”属性 40 //ReportViewer.Report.ControlByName("SubTitle").AsStaticBox.Text = "日期范围：" + BeginDate + "至" + EndDate; 41 ReportViewer.Start(); 42 } 43 var str_Check = ""; //用于存放由选中而生成的html 44 var str_CheckId = ""; //用于存放选中的id 格式为‘1’，‘2’ 45 //双击的时候div中添加显示 46 function btnDrillDown_onclick() { 47 var ProductName = ReportViewer.Report.FieldByName("Name").AsString; //要在html中显示的字段 48 var ID = ReportViewer.Report.FieldByName("ID").AsString; //获取id 49 var IDs = "'" + ID + "'"; 50 var str_CheckIdArry = str_CheckId.split(','); 51 //判断是否已经存在防止重复添加 52 var isExist = false; 53 for (var i = 0; i < str_CheckIdArry.length; i++) { 54 if (str_CheckIdArry[i] == IDs) { 55 isExist = true; 56 } 57 } 58 //不存在的时候添加进去 59 if (!isExist) { 60 //添加到html字符串中 61 str_Check += "<div style='float: left;cursor:hand; border-width:1px; border-color:lightblue;border-style:solid;width:100px' id='sl_" + ID + "'>" + ProductName + "<img src='../../../../Content/easyUi/themes/icons/cancel.png' onclick=\"deleteIt('" + ID + "')\" style='float:right;width:10px;height:10px'/></div>"; 62 //添加到id中 63 str_CheckId += IDs + ","; 64 //将html加载到页面中去 65 $("#selectedRow").html(str_Check); 66 } 67 //存在的时候提示 68 else { 69 alert("该行已选择！"); 70 } 71 72 } 73 //点击删除的时候把添加进去的单元进行删除 74 function deleteIt(id) { 75 76 var IDs = "'" + id + "'"; 77 var str_CheckIdArry = str_CheckId.split(','); 78 var isExist = false; 79 var str_CheckIdTemp = ""; 80 str_Check = ""; 81 //根据id是否重复进行排除 82 for (var i = 0; i < str_CheckIdArry.length; i++) { 83 if (str_CheckIdArry[i] != IDs && str_CheckIdArry[i] != "") { 84 str_CheckIdTemp += str_CheckIdArry[i] + ","; 85 } 86 } 87 //排除掉删除的单元后的id组合 88 str_CheckId = str_CheckIdTemp; 89 //移除单元的html 90 $("#sl_" + id).remove(); 91 //移除单元后剩余的html 92 str_Check = $("#selectedRow").html(); 93 94 } 95 //点击载入选中项将信息载入到当前页面。 96 function btn_dyxzx_onclick() { 97 ReportViewer.Stop(); 98 if (str_CheckId.length > 0) { 99 str_CheckId = str_CheckId.substr(0, str_CheckId.length - 1); 100 } 101 //传递参数从后台获取数据源 102 ReportViewer.DataURL = "user/dyxzx?id=" + str_CheckId; 103 104 ReportViewer.Start(); 105 } 106 function OnContentCellDblClick(Sender) //响应内容行双击事件，打开当前行对应的明细报表 107 { 108 btnDrillDown_onclick(); 109 } 110 </script> 111 <style type="text/css"> 112 html, body 113 { 114 margin: 0; 115 height: 100%; 116 } 117 </style> 118 </head> 119 <body style="margin: 0; background-color: #f0ffff;" onload="window_onload()"> 120 <table border="0" width="100%" height="100%"> 121 <tr> 122 <td colspan="5"> 123 <div id="selectedRow" style="width: 100%; height: auto"> 124 </div> 125 </td> 126 </tr> 127 <tr style="width: 100%;"> 128 <%-- <td style="font-size: 10pt; height: 23px; width: 50%;"> 129 开始日期：<input id="txtBeginDate" type="text" value="1997-1-1" name="txtBeginDate" maxlength="20" 130 style="width: 84px"> 131 结束日期：<input id="txtEndDate" type="text" value="1997-12-31" name="txtEndDate" maxlength="20" 132 style="width: 80px" /> 133 <input id="btnRefresh" onclick="return btnRefresh_onclick()" type="button" value="更新显示" 134 name="btnRefresh" /> 135 </td>--%> 136 <td colspan="5" style="font-size: 10pt; height: 23px; width: 50%;"> 137 <input id="btnPreview" onclick="return btnPreview_onclick()" type="button" value="打印预览" 138 name="btnPreview" /> 139 <%-- <input id="btnDrillDown" onclick="return btnDrillDown_onclick()" type="button" value="明细报表" 140 name="btnDrillDown" />--%> 141 <input id="btn_dyxzx" onclick="return btn_dyxzx_onclick()" type="button" value="载入选中项" 142 name="btn_dyxzx" /> 143 </td> 144 </tr> 145 <tr style="height: 100%;"> 146 <td colspan="5" style="font-size: 10pt;"> 147 <script type="text/javascript"> 148 CreateDisplayViewerEx("100%", "100%", "../../../../grf/user.grf", "", false, "<param name=BorderStyle value=1>" + 149 "<param name='OnContentCellDblClick' value='OnContentCellDblClick'>"); 150 </script> 151 </td> 152 </tr> 153 </table> 154 </body> 155 </html>