1 排序
前台：
<asp:DataGrid ID="dgHTMX" runat="server" Width="100%" AutoGenerateColumns="False" OnSortCommand="dgHTMX_SortCommand" > <asp:BoundColumn DataField="GG" HeaderText="规格" SortExpression="GG"></asp:BoundColumn>
</asp:DataGrid>
后台：
protected void dgHTMX_SortCommand(object source, DataGridSortCommandEventArgs e)
{
if (dgHTMX.Items.Count > 1)
{
if (ViewState["sortdirection"] == null)
{
ViewState["sortdirection"] = "DESC";
}
else
{
if (ViewState["sortdirection"].ToString() == "DESC")
{
ViewState["sortdirection"] = "ASC";
}
else
{
ViewState["sortdirection"] = "DESC";
}
}
string s = ViewState["sortdirection"].ToString();
DataTable dt = BllBookManageView.GetCGXMMX(ddlGHCS.SelectedItem.Value, ddlXMMC.SelectedItem.Value);
DataView dv = new DataView(dt);
dv.Sort = e.SortExpression + " " + s;
dgHTMX.DataSource = dv;
dgHTMX.DataBind();
}
}
2 全选
<asp:DataGrid ID="dgHTMX" runat="server" Width="100%" AutoGenerateColumns="False" >
<Columns>
<asp:TemplateColumn HeaderText="选择">
<ItemTemplate>
<asp:CheckBox ID="chkHTMX" runat="server" AutoPostBack="true" Text="选择" onclick="check(this)" OnCheckedChanged="Mycheck_CheckedChanged"/>
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="chkAll1" runat="server" AutoPostBack="false" onclick="SelectAll(this)" Text="全选" Width="52px" />
</HeaderTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
javascript方法：
function SelectAll(tempControl)
{
//将除头模板中的其它所有的CheckBox取反
var theBox=tempControl;
xState=theBox.checked;
elem=theBox.form.elements;
for(i=0;i<elem.length;i++)
if(elem[i].type=="checkbox" && elem[i].id!=theBox.id)
{
if(elem[i].checked!=xState)
elem[i].click();
}
}
3 后台响应Grid中CheckBox的OnCheckedChanged事件:
前台：
<asp:DataGrid ID="dgHTMX" runat="server" Width="100%" AutoGenerateColumns="False" >
<Columns>
<asp:TemplateColumn HeaderText="选择">
<ItemTemplate>
<asp:CheckBox ID="chkHTMX" runat="server" AutoPostBack="true" Text="选择" OnCheckedChanged="Mycheck_CheckedChanged"/>
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="chkAll1" runat="server" AutoPostBack="false" Text="全选" Width="52px" />
</HeaderTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
后台：
protected void Mycheck_CheckedChanged(object sender, System.EventArgs e)
{
。。。
}
4 固定表头和滚动
前台：
javascript方法：
function s()
{
var t = document.getElementById("<%=dgHTMX.ClientID%>");
var t2 = t.cloneNode(true)
for(i = t2.rows.length -1;i > 0;i--)
t2.deleteRow(i)
t.deleteRow(0)
a.appendChild(t2)
}
window.onload = s
<div id="a">
</div>
<div style=" overflow:auto; overflow-x:hidden; overflow-y:scroll; width:100%; height:320px;">
<asp:DataGrid ID="dgHTMX" runat="server" Width="100%" AutoGenerateColumns="False" OnSortCommand="dgHTMX_SortCommand" >
</asp:DataGrid>
</div>
(只出现垂直方向的滚动条,要想两个方向都有滚动条: overflow-x: scroll; overflow-y:scroll;)
在后台的绑定Grid方法里的
dgHTMX.DataSource = dt;
dgHTMX.DataBind();
代码前面加上: dgHTMX.Attributes.Add("style", "table-layout:fixed");
即:
dgHTMX.Attributes.Add("style", "table-layout:fixed");
dgHTMX.DataSource = dt;
dgHTMX.DataBind();
还可以根据实际需要设置每列的宽度 HeaderStyle-Width=10% ItemStyle-Width=10%
这两个属性必须同时设置并且要大小相同
评论