这个报表难度其实也不大,主要有这么几个地方值得注意:
- 列头合并。前面以后说过了。很简单的配置。
- 列合计。待会看源码。
- 过滤掉0。如果是0,则什么都不显示,否则显示蓝色的数字。因为这个报表测试数据干了,我又懒,所以大家想象一下数据就好了。据说画饼充饥是有效果的,当然不是我说的。信不信由你,反正我是相信了。
- 注意列头的HTML编码。别把任意字符都往列头加,列头会表示有压力的,并且会导致页面空白而且无异常。所以注意把特殊字符进行编码。
这个报表虽然复杂了一点点,但是也很简单。现在一起来ViewCode:
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<style type="text/css">
.total-field
{
background-color: #fff;
font-weight: bold !important;
color: #000;
padding: 2px;
margin-right: 5px;
}
.headRows1
{
color: Green;
font-weight: bolder;
}
.headRows2
{
color: Blue;
font-weight: bolder;
}
.x-grid3-cell-inner
{
font-family: "segoe ui" ,tahoma, arial, sans-serif;
}
.x-grid-group-hd div
{
font-family: "segoe ui" ,tahoma, arial, sans-serif;
}
.x-grid3-hd-inner
{
font-family: "segoe ui" ,tahoma, arial, sans-serif;
font-size: 12px;
}
.x-grid3-body .x-grid3-td-Cost
{
background-color: #f1f2f4;
}
.x-grid3-summary-row .x-grid3-td-Cost
{
background-color: #e1e2e4;
}
</style>
<script type="text/javascript">
var template = '<b style="color:blue;">{0}</b>';
var fifterZero = function (value, metadata, record, rowIndex, colIndex, store) {
if (value > 0)
return String.format(template, value);
else
return '';
};
var updateTotal = function (grid) {
var fbar = grid.getBottomToolbar(),
column,
field,
width,
data = {},
c,
cs = grid.view.getColumnData();
for (var j = 0, jlen = grid.store.getCount(); j < jlen; j++) {
var r = grid.store.getAt(j);
for (var i = 0, len = cs.length; i < len; i++) {
c = cs[i];
if (j == 0)
data[c.name] = 0;
if (c.name == "Region")
data[c.name] = "总计:";
else
data[c.name] += r.get(c.name);
}
}
for (var i = 0; i < grid.getColumnModel().columns.length; i++) {
column = grid.getColumnModel().columns[i];
if (column.dataIndex != grid.store.groupField) {
field = fbar.findBy(function (item) {
return item.dataIndex === column.dataIndex;
})[0];
c = cs[i];
fbar.remove(field, false);
fbar.insert(i, field);
width = grid.getColumnModel().getColumnWidth(i);
field.setWidth(width - 5);
field.setValue((column.summaryRenderer || c.renderer)(data[c.name], {}, {}, 0, i, grid.store));
}
}
fbar.doLayout();
}
</script>
<ext:GridPanel ID="GridPanel1" AutoScroll="true" TrackMouseOver="true" runat="server"
ColumnLines="true" StripeRows="true" AutoHeight="true" Title="Decoration Status"
Icon="Bookmark">
<Store>
<ext:Store ID="Store1" ShowWarningOnFailure="false" AutoLoad="true" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Region" />
<ext:RecordField Name="ncsnew" Type="Int" />
<ext:RecordField Name="h_bnew" Type="Int" />
<ext:RecordField Name="updatencs" Type="Int" />
<ext:RecordField Name="updateh_b" Type="Int" />
<ext:RecordField Name="ncsnewnext1" Type="Int" />
<ext:RecordField Name="h_bnewnext1" Type="Int" />
<ext:RecordField Name="updatencsnext1" Type="Int" />
<ext:RecordField Name="updateh_bnext1" Type="Int" />
<ext:RecordField Name="ncsnewnext2" Type="Int" />
<ext:RecordField Name="h_bnewnext2" Type="Int" />
<ext:RecordField Name="updatencsnext2" Type="Int" />
<ext:RecordField Name="updateh_bnext2" Type="Int" />
<ext:RecordField Name="ncsnewnext3" Type="Int" />
<ext:RecordField Name="h_bnewnext3" Type="Int" />
<ext:RecordField Name="updatencsnext3" Type="Int" />
<ext:RecordField Name="updateh_bnext3" Type="Int" />
<ext:RecordField Name="ncsnewCertificated" Type="Int" />
<ext:RecordField Name="h_bnewCertificated" Type="Int" />
<ext:RecordField Name="updatencsCertificated" Type="Int" />
<ext:RecordField Name="updateh_bCertificated" Type="Int" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<LoadMask ShowMask="true" />
<ColumnModel ID="ctl120">
<Columns>
<ext:Column DataIndex="Region" Header="Region" />
<ext:Column DataIndex="ncsnew" Header="New NCS">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="h_bnew" Header="New H&B">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="updatencs" Header="Upgrading NCS">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="updateh_b" Header="Upgrading H&B">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="ncsnewnext1" Header="New NCS">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="h_bnewnext1" Header="New H&B">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="updatencsnext1" Header="Upgrading NCS">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="updateh_bnext1" Header="Upgrading H&B">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="ncsnewnext2" Header="New NCS">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="h_bnewnext2" Header="New H&B">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="updatencsnext2" Header="Upgrading NCS">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="updateh_bnext2" Header="Upgrading H&B">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="ncsnewnext3" Header="New NCS">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="h_bnewnext3" Header="New H&B">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="updatencsnext3" Header="Upgrading NCS">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="updateh_bnext3" Header="Upgrading H&B">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="ncsnewCertificated" Header="New NCS">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="h_bnewCertificated" Header="New H&B">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="updatencsCertificated" Header="Upgrading NCS">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
<ext:Column DataIndex="updateh_bCertificated" Header="Upgrading H&B">
<Renderer Fn="fifterZero" Args="value, metadata, record, rowIndex, colIndex, store" />
</ext:Column>
</Columns>
</ColumnModel>
<Listeners>
<ColumnResize Handler="updateTotal(this);" />
<AfterRender Handler="updateTotal(this);" Delay="100" />
</Listeners>
<View>
<ext:GroupingView ID="gvColumns" runat="server" />
</View>
<BottomBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:DisplayField ID="DisplayField1" runat="server" Cls="total-field" Text="-" DataIndex="Region" />
<ext:DisplayField ID="DisplayField2" runat="server" Cls="total-field" Text="-" DataIndex="ncsnew" />
<ext:DisplayField ID="DisplayField3" runat="server" Cls="total-field" Text="-" DataIndex="h_bnew" />
<ext:DisplayField ID="DisplayField4" runat="server" Cls="total-field" Text="-" DataIndex="updatencs" />
<ext:DisplayField ID="DisplayField5" runat="server" Cls="total-field" Text="-" DataIndex="updateh_b" />
<ext:DisplayField ID="DisplayField6" runat="server" Cls="total-field" Text="-" DataIndex="ncsnewnext1" />
<ext:DisplayField ID="DisplayField7" runat="server" Cls="total-field" Text="-" DataIndex="h_bnewnext1" />
<ext:DisplayField ID="DisplayField8" runat="server" Cls="total-field" Text="-" DataIndex="updatencsnext1" />
<ext:DisplayField ID="DisplayField9" runat="server" Cls="total-field" Text="-" DataIndex="updateh_bnext1" />
<ext:DisplayField ID="DisplayField10" runat="server" Cls="total-field" Text="-" DataIndex="ncsnewnext2" />
<ext:DisplayField ID="DisplayField11" runat="server" Cls="total-field" Text="-" DataIndex="h_bnewnext2" />
<ext:DisplayField ID="DisplayField12" runat="server" Cls="total-field" Text="-" DataIndex="updatencsnext2" />
<ext:DisplayField ID="DisplayField13" runat="server" Cls="total-field" Text="-" DataIndex="updateh_bnext2" />
<ext:DisplayField ID="DisplayField14" runat="server" Cls="total-field" Text="-" DataIndex="ncsnewnext3" />
<ext:DisplayField ID="DisplayField15" runat="server" Cls="total-field" Text="-" DataIndex="h_bnewnext3" />
<ext:DisplayField ID="DisplayField16" runat="server" Cls="total-field" Text="-" DataIndex="updatencsnext3" />
<ext:DisplayField ID="DisplayField17" runat="server" Cls="total-field" Text="-" DataIndex="updateh_bnext3" />
<ext:DisplayField ID="DisplayField18" runat="server" Cls="total-field" Text="-" DataIndex="ncsnewCertificated" />
<ext:DisplayField ID="DisplayField19" runat="server" Cls="total-field" Text="-" DataIndex="h_bnewCertificated" />
<ext:DisplayField ID="DisplayField20" runat="server" Cls="total-field" Text="-" DataIndex="updatencsCertificated" />
<ext:DisplayField ID="DisplayField21" runat="server" Cls="total-field" Text="-" DataIndex="updateh_bCertificated" />
</Items>
</ext:Toolbar>
</BottomBar>
</ext:GridPanel>
该说的都说了,注释也懒得写了。现在想说的是下面几点:
- 首先来看记录集(RecordField)。注意字段的类型(Type="Int")。比如你的数据中有DateTime类型、Int类型的数据,最好设置下类型,这样的话,就可以避免出现undefined。而且也方便格式转换。
- Store。这个Store为什么没有设置URL呢?在《EXT.NET高效开发(一)——概述》我说过,“7)数据交换更简单”。应该是“数据交互”,本人比较懒,只在这里更正申明下好了,我也是刚看到。这里的Store,是在后台赋值的。如下面代码:
var qList = _db.SelectReportMonthDataForUnderDeco().ToList();
Store1.DataSource = qList;
Store1.DataBind();- 统计怎么算的?注意updateTotal函数。“总计”两个字是怎么加上去的,答曰:“敲上去的”。再注意BottomBar(想当然的,这就是底部工具条),这里就是显示统计的数据的。
- 估计看官会有这么一个疑问,列头分组怎么分的,木有见代码。代码是有的,只是还木有贴出来,因为我写在后台,这种方式也挺直观方便的。当然萝卜白菜各有所爱了:
var _headGroupRow = new HeaderGroupRow()
{
Columns =
{
new HeaderGroupColumn()
{
Header = "<font class='headRows1'></font>",
Align = Alignment.Center,
ColSpan = 1
}
}
};
_headGroupRow.Columns.Add(new HeaderGroupColumn()
{
Header =
string.Format("<font class='headRows1'>{0}</font>",
"Under Deco."),
Align = Alignment.Center,
ColSpan = 4,
});
var _currentMonth = Convert.ToInt32(qList.First().monthnum.Trim());
for (int i = 0; i < 3; i++)
{
_headGroupRow.Columns.Add(new HeaderGroupColumn()
{
Header =
string.Format("<font class='headRows1'>{0}</font>",
GetEnglishMonth((_currentMonth + i).ToString())),
Align = Alignment.Center,
ColSpan = 4,
});
}
_headGroupRow.Columns.Add(new HeaderGroupColumn()
{
Header =
string.Format("<font class='headRows1'>{0}</font>",
"Certificated"),
Align = Alignment.Center,
ColSpan = 4,
});
gvColumns.HeaderGroupRows.Add(_headGroupRow);
这个就说到这里了。
3)这个相对来说,比上两个都复杂。但是我画起来,比上两个都快。一个是更熟练了,第二个是生成了很多东西。
先看页面代码(页面代码很简洁):
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<style type="text/css">
.headRows1
{
color: Green;
font-weight: bolder;
}
.headRows2
{
color: Purple;
font-weight: bolder;
}
</style>
<script type="text/javascript">
var template = '<b style="color:blue;">{0}</b>';
var fifterZero = function(value) {
if (value > 0)
return String.format(template, value);
else
return '';
};
function search() {
if (ddlArea.getValue() != '' && ddlYear.getValue() != '' && ddlMonth.getValue() != '') {
window.location.href = '<%=CurrentUrl %>' + "?newarea=" + escape(ddlArea.getValue()) + "&newyear=" + ddlYear.getValue() + "&newmonth=" + ddlMonth.getValue();
} else {
alert("请选择区域-年份-月份!");
}
}
</script>
<div style="margin-left:10px;">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:FieldSet Collapsible="true" ID="Panel1" Border="true" Width="800" runat="server"
Title="搜索条件" AutoHeight="true">
<Items>
<ext:TableLayout ID="TableLayout1" runat="server" Columns="3">
<Cells>
<ext:Cell>
<ext:ComboBox ID="ddlArea" Width="235" IDMode="Static" FieldLabel="区域" Editable="false"
runat="server" />
</ext:Cell>
<ext:Cell>
<ext:ComboBox ID="ddlYear" Width="235" IDMode="Static" FieldLabel="年份" Editable="false"
runat="server" />
</ext:Cell>
<ext:Cell>
<ext:ComboBox ID="ddlMonth" Width="235" IDMode="Static" FieldLabel="月份" Editable="false"
runat="server" />
</ext:Cell>
</Cells>
</ext:TableLayout>
</Items>
<BottomBar>
<ext:Toolbar ID="tbSearch" runat="server">
<Items>
<ext:Button ID="btnSearch" runat="server" Text="查询" Icon="ArrowRefresh" LabelAlign="Left"
Type="Button" AutoPostBack="false">
<Listeners>
<Click Handler="search();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:FieldSet>
<ext:GridPanel ID="GridPanel1" AutoScroll="true" TrackMouseOver="true" runat="server"
ColumnLines="true" StripeRows="true" AutoHeight="true" Title="ShopStatus" Icon="Date">
<Store>
<ext:Store ID="Store1" ShowWarningOnFailure="false" AutoLoad="true" runat="server" />
</Store>
<LoadMask ShowMask="true" />
<ColumnModel ID="ctl120" />
<View>
<ext:GroupingView ID="gvColumns" runat="server" />
</View>
<BottomBar>
<ext:Toolbar ID="Toolbar1" runat="server" Margins="0,0,0,0">
<Items>
<ext:GridPanel ID="gpItems" AutoScroll="true" TrackMouseOver="true" runat="server" Margins="0,0,0,0"
HideHeaders="true" ColumnLines="true" StripeRows="true" AutoHeight="true" Title="Jun"
Icon="DateGo">
<Store>
<ext:Store ID="storeItems" ShowWarningOnFailure="false" AutoLoad="true" runat="server" />
</Store>
<LoadMask ShowMask="true" />
<ColumnModel />
</ext:GridPanel>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:GridPanel>
</div>
<script type="text/javascript">
Ext.onReady(function() {
$(function() {
setTimeout("setLabelClass()", 300);
});
});
function setLabelClass() {
$("table.x-table-layout").attr("width", "100%");
}
</script>
仔细看起来,发现这个页面代码并没啥东西。只能隐约的看到,一个GridPanel底部放了一个GridPanel。看来真不是个东西。这里暂不作解释,继续贴码:
/// <summary>
/// 获取当前URL
/// </summary>
public string CurrentUrl
{
get { return Request.Path; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ResourceManager1.BuildAllPrivilegesForExtNET();
//注册JQuery脚本
this.Page.ClientScript.RegisterClientScriptInclude("JQuery4.4", "/js/jquery-1.4.4.min.js");
#region 绑定年月
for (int i = 0; i < 20; i++)
{
ddlYear.Items.Add(new ListItem(DateTime.Now.AddYears(-i).Year.ToString()));
}
for (int i = 1; i <= 12; i++)
{
ddlMonth.Items.Add(new ListItem(i.ToString()));
}
#endregion
#region 绑定区域
using (var _db = new NBShopDataContext())
{
var _lstArea = _db.SelectArea().ToList();
foreach (var areaResult in _lstArea)
{
ddlArea.Items.Add(new ListItem(areaResult.AreaName));
}
ddlArea.Items.Add(new ListItem("全国"));
}
#endregion
var _cm = new CommonService();
#region 获取搜索条件
var _month = string.IsNullOrEmpty(Request.QueryString["newmonth"])
? (Request.QueryString["month"] ?? DateTime.Now.Month.ToString())
: Request.QueryString["newmonth"];
var _areaName = string.IsNullOrEmpty(Request.QueryString["newarea"])
? (Request.QueryString["area"] ?? "全国")
: Request.QueryString["newarea"];
var _year = string.IsNullOrEmpty(Request.QueryString["newyear"])
? (Request.QueryString["year"] ?? DateTime.Now.Year.ToString())
: Request.QueryString["newyear"];
var _dic = new Dictionary<string, string>()
{
{"@areaname", _areaName},
{"@monthnum", _month},
{"@yearnum", _year}
};
#endregion
#region 选择相应的值
ddlArea.SelectedItem.Value = _areaName;
ddlMonth.SelectedItem.Value = _month;
ddlYear.SelectedItem.Value = _year;
#endregion
#region 如果不是全国,区域就无法选择
if (Request.QueryString["area"] != "全国")
{
ddlArea.Disabled = true;
}
#endregion
#region 获取数据
DataTable _dt = _cm.SelectReportByStoredName("SelectMonthDataAndWeekData", _dic);
if (_dt == null || _dt.Rows.Count == 0)
{
X.Msg.Alert("温馨提示", "没有数据可供显示!").Show();
GridPanel1.RemoveAll();
return;
}
#endregion
#region 绑定数据
BingData(_dt.AsEnumerable().Where(p => p[0].ToString().IndexOf("-") == -1 && p[0].ToString() != "MTD" && p[0].ToString() != "Drop Out" && p[0].ToString() != "Net").AsDataView(), GridPanel1, Store1);
BingData(_dt.AsEnumerable().Where(p => p[0].ToString().Contains("-") || p[0].ToString() == "MTD" || p[0].ToString() == "Drop Out" || p[0].ToString() == "Net").AsDataView(), gpItems, storeItems);
#endregion
GridPanel1.Header = false;
//绑定子版块标题(当前月)
gpItems.Title = GetEnglishMonth(_month);
#region 设置列头
if (GridPanel1.ColumnModel.Columns.Count >= 17)
{
GridPanel1.ColumnModel.Columns[0].Header = _areaName;
GridPanel1.ColumnModel.Columns[1].Header = "NCS";
GridPanel1.ColumnModel.Columns[2].Header = Server.HtmlEncode("H&B");
GridPanel1.ColumnModel.Columns[3].Header = Server.HtmlEncode("Others");
GridPanel1.ColumnModel.Columns[4].Header = Server.HtmlEncode("Total Franchise");
GridPanel1.ColumnModel.Columns[5].Header = Server.HtmlEncode("New Prospects / Application Completed");
GridPanel1.ColumnModel.Columns[6].Header = Server.HtmlEncode("Contract Approved/ No Deco.");
GridPanel1.ColumnModel.Columns[7].Header = Server.HtmlEncode("Under Deco");
GridPanel1.ColumnModel.Columns[8].Header = Server.HtmlEncode("New Prospects / Application Completed");
GridPanel1.ColumnModel.Columns[9].Header = Server.HtmlEncode("Contract Approved/ No Deco.");
GridPanel1.ColumnModel.Columns[10].Header = Server.HtmlEncode("Under Deco");
GridPanel1.ColumnModel.Columns[11].Header = Server.HtmlEncode("New Prospects / Application Completed");
GridPanel1.ColumnModel.Columns[12].Header = Server.HtmlEncode("Contract Approved/ No Deco.");
GridPanel1.ColumnModel.Columns[13].Header = Server.HtmlEncode("Under Deco");
GridPanel1.ColumnModel.Columns[14].Header = Server.HtmlEncode("New Prospects / Application Completed");
GridPanel1.ColumnModel.Columns[15].Header = Server.HtmlEncode("Contract Approved/ No Deco.");
GridPanel1.ColumnModel.Columns[16].Header = Server.HtmlEncode("Under Deco");
GridPanel1.ColumnModel.Columns[17].Header = Server.HtmlEncode("New NCS");
GridPanel1.ColumnModel.Columns[18].Header = Server.HtmlEncode("New H&B");
GridPanel1.ColumnModel.Columns[19].Header = Server.HtmlEncode("Upgrading");
GridPanel1.ColumnModel.Columns[20].Header = Server.HtmlEncode("Upgrading H&B");
}
#endregion
#region 设置合并的列头
var _headGroupRow = new HeaderGroupRow()
{
Columns =
{
new HeaderGroupColumn()
{
Header = "<font class='headRows1'></font>",
Align = Alignment.Center,
ColSpan = 1
}
}
};
_headGroupRow.Columns.Add(new HeaderGroupColumn()
{
Header =
string.Format("<font class='headRows1'>{0}</font>",
"In operation"),
Align = Alignment.Center,
ColSpan = 4,
});
_headGroupRow.Columns.Add(new HeaderGroupColumn()
{
Header =
string.Format("<font class='headRows2'>{0}</font>",
"New NCS"),
Align = Alignment.Center,
ColSpan = 3,
});
_headGroupRow.Columns.Add(new HeaderGroupColumn()
{
Header =
string.Format("<font class='headRows2'>{0}</font>",
Server.HtmlEncode("New H&B")),
Align = Alignment.Center,
ColSpan = 3,
});
_headGroupRow.Columns.Add(new HeaderGroupColumn()
{
Header =
string.Format("<font class='headRows2'>{0}</font>",
"Upgrades--NCS"),
Align = Alignment.Center,
ColSpan = 3,
});
_headGroupRow.Columns.Add(new HeaderGroupColumn()
{
Header =
string.Format("<font class='headRows2'>{0}</font>",
Server.HtmlEncode("Upgrades--H&B")),
Align = Alignment.Center,
ColSpan = 3,
});
_headGroupRow.Columns.Add(new HeaderGroupColumn()
{
Header =
string.Format("<font class='headRows1'>{0}</font>",
"Certificated"),
Align = Alignment.Center,
ColSpan = 4,
});
gvColumns.HeaderGroupRows.Add(_headGroupRow);
#endregion
_dt.Dispose();
}
}
/// <summary>
/// 生成字段和列,并绑定数据源
/// </summary>
/// <param name="_rptData"></param>
/// <param name="_gp"></param>
/// <param name="_store"></param>
private void BingData(System.Data.DataView _rptData, GridPanel _gp, Store _store)
{
var _jsonReader = new JsonReader();
foreach (DataColumn _dataColumn in _rptData.Table.Columns)
{
//创建字段
if (_dataColumn.ColumnName == "timecol")
{
_jsonReader.Fields.Add(new RecordField(_dataColumn.ColumnName));
}
else
{
_jsonReader.Fields.Add(new RecordField(_dataColumn.ColumnName));
}
//创建列
var _column = new Column
{
Header = _dataColumn.ColumnName,
DataIndex = _dataColumn.ColumnName,
};
//过滤0,调用fifterZero函数
if (_column.Header != "timecol")
{
_column.Renderer.Fn = "fifterZero";
_column.Renderer.Args = new string[] { "value" };
}
_gp.ColumnModel.Columns.Add(_column);
}
_store.Reader.Add(_jsonReader);
_store.DataSource = _rptData;
_store.DataBind();
}
代码贴上去了,发现木有,也不是很多,这里我顺便解释解释:
- 点击【查询】按钮后,刷新页面获取数据。当然您也可以改成不刷新的,也很简单的,这里我是为了更简单。
不过在这方面,我要说一下:你可以使用X.IsAjaxRequest来判断是否是EXT的Ajax请求,别重复执行了Page_load事件里面的代码。
- 数据源是直接绑的,使用的是DataTable。然后在绑定的时候,使用LINQ to DataTable进行了过滤。这个报表不会有多少数据。
当然如果你喜欢2.0的话,也可以用那个Select啊,DataView的RowFilter等来过滤。
- 数据集、字段、列是动态加的,列头是手动写的。因为列头不一样,而且有特殊字符。也就是说,如果可以,你完全可以动态生成整个GridPanel。
- 最后说点。Extjs与JQuery框架是不冲突的,井水不犯河水。
封装点函数,整个动态生成,也是一种高效的开发,这也是我EXT.NET高效开发系列所推崇的(EXT.NET高效开发(二)——封装函数)。
也许有人会说点性能问题什么的,我个人认为,生活总是有所取舍的,至于如何取舍,就需要根据个人的环境来判断了,不要捡了芝麻丢了西瓜就行了。
再套用一句,勿以BUG小而为之,勿以Code小而不为。
总算写完了。有时间的话,我会继续…
优质内容筛选与推荐>>
1、zabbix3配置短信报警2、制作可以 SSH 登录的 Docker 镜像3、Jax4、文件上传分析、文件解压缩5、main方法中窥世界