1
これは私のデータベースのテーブルです。折りたたみ可能な行と展開可能な行を持つGridviewを作成したいと思います。私はそれがGridViewの中で見てみたいどのようCollapsable/Expandable行を持つgridview C＃asp.netを作成
StartDate EndDate Section_Name Section_Value
2017-06-27 2017-06-28 Section 1 pump1 300
2017-06-27 2017-06-28 Section 1 pump2 256
2017-06-27 2017-06-28 Section 1 pump3 11
2017-06-27 2017-06-28 Section 1 pump4 5252
2017-06-27 2017-06-28 Section 2 pump1 300
2017-06-27 2017-06-28 Section 2 pump2 256
2017-06-27 2017-06-28 Section 2 pump3 212
2017-06-27 2017-06-28 Section 3 pump1 1222
：
(+-) SECTION 1 TOTAL: 5819
Section 1 pump1 300
Section 1 pump2 256
Section 1 pump3 11
Section 1 pump4 5252
(+-) SECTION 2 TOTAL: 786
Section 2 pump1 300
Section 2 pump2 256
Section 2 pump3 212 and so on...
あなたはそれがセクション1の下などに収まるすべてを表示する必要がありますSECTION 1をクリックした場合。
コード（ジャバスクリプト）：
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('.ExpandCollapseStyle').click(function() {
var orderId = $(this).attr('alt');
if (!isDisplayed($('.ExpandCollapse' + orderId))) {
$(this).attr('src', 'images/minus.gif');
$('.ExpandCollapse' + orderId).css("display", "block");
}
else {
$(this).attr('src', 'images/plus.gif');
$('.ExpandCollapse' + orderId).css("display", "none");
}
})
$('.ExpandCollapseGrandStyle').click(function() {
$(".grdViewOrders tr").each(function() {
var orderId = $(this).find(".ExpandCollapseStyle").attr('alt');
if (orderId != 'undefined') {
if ($(this).attr('alt') == 'Expanded') {
$(this).find(".ExpandCollapseStyle").attr('src', 'images/minus.gif');
$('.ExpandCollapse' + orderId).css("display", "block");
$(this).attr('alt', 'Collapsed');
}
else {
$(this).find(".ExpandCollapseStyle").attr('src', 'images/plus.gif');
$('.ExpandCollapse' + orderId).css("display", "none");
$(this).attr('alt', 'Expanded');
}
}
});
if ($('.ExpandCollapseGrandStyle').attr('alt') == 'Expanded') {
$('.ExpandCollapseGrandStyle').attr('src', 'images/plus.gif');
$('.ExpandCollapseGrandStyle').attr('alt', 'Collapsed');
}
else {
$('.ExpandCollapseGrandStyle').attr('src', 'images/minus.gif');
$('.ExpandCollapseGrandStyle').attr('alt', 'Expanded');
}
})
function isDisplayed(object) {
// if the object is visible return true
if ($(object).css('display') == 'block') {
return true;
}
// if the object is not visible return false
return false;
};
});
</script>
（GridViewの）
<asp:GridView ID="grdViewOrders" BackColor="WhiteSmoke" runat="server" AutoGenerateColumns="False" CssClass="grdViewOrders"
GridLines="Vertical" ShowFooter="True" OnRowDataBound="grdViewOrders_RowDataBound"
onrowcreated="grdViewOrders_RowCreated" >
<Columns>
<asp:TemplateField HeaderText="Section Name" >
<ItemStyle Width="10px" />
<ItemTemplate>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Section Value">
<ItemStyle Width="10px" />
<ItemTemplate>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="" DataField="Section_Name">
<HeaderStyle Width="150px" />
<ItemStyle Width="150px" />
</asp:BoundField>
<asp:BoundField HeaderText="" DataField="Section_Value">
<HeaderStyle Width="150px" />
<ItemStyle Width="150px" />
</asp:BoundField>
</Columns>
<HeaderStyle Height="25px" Font-Bold="True" BackColor="DimGray" ForeColor="White"
HorizontalAlign="Center" VerticalAlign="Middle" />
<RowStyle Height="25px" BackColor="Gainsboro" HorizontalAlign="Center" VerticalAlign="Middle" />
<AlternatingRowStyle Height="25px" BackColor="LightGray" HorizontalAlign="Center"
VerticalAlign="Middle" />
<FooterStyle BackColor="Gray" />
</asp:GridView>
（C＃の背後にあるコード）
public partial class Default3 : System.Web.UI.Page
{
// To keep track of the previous row Group Identifier
string strPreviousRowID = string.Empty;
// To keep track the Index of Group Total
int intSectionTotalIndex = 1;
string strGroupHeaderText = string.Empty;
double dblSectionTotal = 0;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Method();
}
}
protected void Method()
{
connection made to sql db and bind data to gv
}
protected void grdViewOrders_RowCreated(object sender, GridViewRowEventArgs e)
{
bool IsSectionTotalRowNeedtoAdd = false;
if ((strPreviousRowID != string.Empty) && (DataBinder.Eval(e.Row.DataItem, "Section_Name") == null))
{
IsSectionTotalRowNeedtoAdd = true;
intSectionTotalIndex = 0;
}
if (IsSectionTotalRowNeedtoAdd)
{
#region SectionTotal
GridView grdViewOrders = (GridView)sender;
// Creating a Row
GridViewRow row = new GridViewRow(0, 0, DataControlRowType.DataRow, DataControlRowState.Insert);
//Adding Group Expand Collapse Cell
TableCell cell = new TableCell();
System.Web.UI.HtmlControls.HtmlImage img = new System.Web.UI.HtmlControls.HtmlImage();
img.Src = "images/minus.gif";
img.Attributes.Add("class", "ExpandCollapseGrandStyle");
img.Attributes.Add("alt", "Expanded");
cell.Controls.Add(img);
cell.HorizontalAlign = HorizontalAlign.Left;
row.Cells.Add(cell);
//Adding Expand Collapse Cell
cell = new TableCell();
row.Cells.Add(cell);
//Adding Header Cell
cell = new TableCell();
cell.Text = "Section 1 Total";
cell.HorizontalAlign = HorizontalAlign.Left;
cell.ColumnSpan = 1;
row.Cells.Add(cell);
//Adding Amount Column
cell = new TableCell();
cell.HorizontalAlign = HorizontalAlign.Right;
row.Cells.Add(cell);
//Adding the Row at the RowIndex position in the Grid
grdViewOrders.Controls[0].Controls.AddAt(e.Row.RowIndex, row);
#endregion
}
}
protected void grdViewOrders_RowDataBound(object sender, GridViewRowEventArgs e)
{ if (e.Row.RowType == DataControlRowType.DataRow)
{
strPreviousRowID = DataBinder.Eval(e.Row.DataItem, "Section_Name").ToString();
double dblSAmount = Convert.ToDouble(DataBinder.Eval(e.Row.DataItem, "Section_Value").ToString());
dblSectionTotal += dblSAmount;
e.Row.Style.Add("display", "block");
e.Row.CssClass = "ExpandCollapse" + strPreviousRowID;
}
}
これを行うための簡単な方法がある場合は、してくださいリンクやいくつかのヒントを残してください。ありがとうございました。私はソースを利用するようにしようとしていた、さらに参考のために
： http://www.dotnettwitter.com/2012/07/group-total-and-grand-total-in-gridview_15.html
単純な 'GridView'ではなく' Nested-GridView'を使うか、 'DataList'で' Gridview'を使う必要があります – AsifAli72090
@ Asif.Aliなぜ表示されませんか？私は1つのテーブルからのみデータを取得しているからですか？おそらく例を提供する – someone13