首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

脚本暗藏或显示列,为什么各个控件之间会出现空隙

2012-09-22 
脚本隐藏或显示列,为什么各个控件之间会出现空隙?我把GridView都转换成模板,给各个模板都添加了长度限制,

脚本隐藏或显示列,为什么各个控件之间会出现空隙?
我把GridView都转换成模板,给各个模板都添加了长度限制,然后使用脚本和CheckBoxList,来隐藏GridView的某些列。但GridView总是在隐藏某些列后,剩下的列总是对不齐,各个控件之间总是存在空隙,不知道该怎么调整。。。请帮忙看看,谢谢!请留意看“效果截图”!红框框就是多余的空隙

--------------------完整代码---------------------

HTML code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Try_Default2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <style type="text/css">        .style1        {            width: 500%;        }    </style>    <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>         <script type="text/javascript">            function bb() {                var CheckBoxList = document.getElementById("CheckBoxList_All");                if (CheckBoxList.tagName == "TABLE") {                    for (var a = 0; a < 102; a++) {                        if (CheckBoxList.rows[a].cells[0].childNodes[0].checked == false) {                            var table = document.getElementById("GridView_Search");                            for (var i = 0; i < table.rows.length - 1; i++) {                                table.rows[i].cells[a].style.display = "none";                            }                        }                        else {                            var table = document.getElementById("GridView_Search");                            for (var i = 0; i < table.rows.length - 1; i++) {                                table.rows[i].cells[a].style.display = "inline";                            }                        }                    }                }            }                                    </script>    </head><body>    <form id="form1" runat="server">    <div>            <table cellpadding="0" cellspacing="0" class="style1">            <tr>                <td>                    <asp:CheckBoxList ID="CheckBoxList_All" runat="server" >                        <asp:ListItem>1</asp:ListItem>                        <asp:ListItem>2</asp:ListItem>                        <asp:ListItem>3</asp:ListItem>                        <asp:ListItem>4</asp:ListItem>                        <asp:ListItem>5</asp:ListItem>                        <asp:ListItem>6</asp:ListItem>                        <asp:ListItem>7</asp:ListItem>                                            </asp:CheckBoxList>                    <input id="Button1" type="button" value="123" onclick="bb();"/>                </td>                <td>                    &nbsp;</td>            </tr>            <tr>                <td>                    <asp:GridView ID="GridView_Search" runat="server" AutoGenerateColumns="False"                         DataKeyNames="PRID" DataSourceID="SqlDataSource_Search" CellPadding="0">                        <Columns>                            <asp:TemplateField HeaderText="年份" SortExpression="ReceivableID" HeaderStyle-Width="33" ItemStyle-Width="33" FooterStyle-Width="33"  ControlStyle-BorderWidth="0" ControlStyle-CssClass="style1" ControlStyle-Width="33" FooterStyle-Wrap="False" HeaderStyle-Wrap="False" ItemStyle-Wrap="False"  HeaderStyle-Height="33"  >                                <ItemTemplate>                                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("ReceivableID") %>' Width="33"></asp:TextBox>                                </ItemTemplate><ControlStyle  Width="33px"></ControlStyle><FooterStyle Wrap="False" Width="33px"></FooterStyle><HeaderStyle Wrap="False" Width="33px"></HeaderStyle><ItemStyle Wrap="False" Width="33px"></ItemStyle>                            </asp:TemplateField>                            <asp:TemplateField HeaderText="资产编号" SortExpression="PropertyIDR" ControlStyle-Width="65" FooterStyle-Width="65" FooterStyle-Wrap="False" HeaderStyle-Width="65" HeaderStyle-Wrap="False" ItemStyle-Width="65" ItemStyle-Wrap="False">                                <ItemTemplate>                                    <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("PropertyIDR") %>' Width="65"></asp:TextBox>                                </ItemTemplate><ControlStyle Width="65px"></ControlStyle><FooterStyle Wrap="False" Width="65px"></FooterStyle><HeaderStyle Wrap="False" Width="65px"></HeaderStyle><ItemStyle Wrap="False" Width="65px"></ItemStyle>                            </asp:TemplateField>                            <asp:BoundField DataField="PRID" HeaderText="编号" InsertVisible="False"                                 ReadOnly="True" SortExpression="PRID" ControlStyle-Width="30"                                 FooterStyle-Width="30" HeaderStyle-Width="30" ItemStyle-Width="30" ><ControlStyle Width="30px"></ControlStyle><FooterStyle Width="30px"></FooterStyle><HeaderStyle Width="30px"></HeaderStyle><ItemStyle Width="30px"></ItemStyle>                            </asp:BoundField>                            <asp:TemplateField HeaderText="ContractNumberR"                                 SortExpression="ContractNumberR">                                <ItemTemplate>                                    <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("ContractNumberR") %>'></asp:TextBox>                                </ItemTemplate>                            </asp:TemplateField>                            <asp:TemplateField HeaderText="ManageProjectR" SortExpression="ManageProjectR">                                <ItemTemplate>                                    <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("ManageProjectR") %>'></asp:TextBox>                                </ItemTemplate>                            </asp:TemplateField>                            <asp:TemplateField HeaderText="PropertyCityR" SortExpression="PropertyCityR">                                <ItemTemplate>                                    <asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("PropertyCityR") %>'></asp:TextBox>                                </ItemTemplate>                            </asp:TemplateField>                            <asp:TemplateField HeaderText="PropertyRoadR" SortExpression="PropertyRoadR">                                <ItemTemplate>                                    <asp:TextBox ID="TextBox6" runat="server" Text='<%# Bind("PropertyRoadR") %>'></asp:TextBox>                                </ItemTemplate>                            </asp:TemplateField>                                                    </Columns>                    </asp:GridView>                    <asp:SqlDataSource ID="SqlDataSource_Search" runat="server"                         ConnectionString="<%$ ConnectionStrings:长铁物业公司资产数据库ConnectionString %>"                         DeleteCommand="DELETE FROM [ReceivableTable] WHERE [PRID] = @PRID"                         InsertCommand="INSERT INTO [ReceivableTable] ([ReceivableID], [PropertyIDR], [ContractNumberR], [ManageProjectR], [PropertyCityR], [PropertyRoadR]) VALUES (@ReceivableID, @PropertyIDR, @ContractNumberR, @ManageProjectR, @PropertyCityR, @PropertyRoadR)"                         SelectCommand="SELECT [ReceivableID], [PropertyIDR], [PRID], [ContractNumberR], [ManageProjectR], [PropertyCityR], [PropertyRoadR] FROM [ReceivableTable]"                                                 UpdateCommand="UPDATE [ReceivableTable] SET [ReceivableID] = @ReceivableID, [PropertyIDR] = @PropertyIDR, [ContractNumberR] = @ContractNumberR, [ManageProjectR] = @ManageProjectR, [PropertyCityR] = @PropertyCityR, [PropertyRoadR] = @PropertyRoadR WHERE [PRID] = @PRID">                        <DeleteParameters>                            <asp:Parameter Name="PRID" Type="Int32" />                        </DeleteParameters>                        <UpdateParameters>                            <asp:Parameter Name="ReceivableID" Type="Int32" />                            <asp:Parameter Name="PropertyIDR" Type="Int32" />                            <asp:Parameter Name="ContractNumberR" Type="String" />                            <asp:Parameter Name="ManageProjectR" Type="String" />                            <asp:Parameter Name="PropertyCityR" Type="String" />                            <asp:Parameter Name="PropertyRoadR" Type="String" />                                                        <asp:Parameter Name="PRID" Type="Int32" />                        </UpdateParameters>                        <InsertParameters>                            <asp:Parameter Name="ReceivableID" Type="Int32" />                            <asp:Parameter Name="PropertyIDR" Type="Int32" />                            <asp:Parameter Name="ContractNumberR" Type="String" />                            <asp:Parameter Name="ManageProjectR" Type="String" />                            <asp:Parameter Name="PropertyCityR" Type="String" />                            <asp:Parameter Name="PropertyRoadR" Type="String" />                                                    </InsertParameters>                    </asp:SqlDataSource>                </td>                <td>                    &nbsp;</td>            </tr>        </table>        </div>    </form></body></html> 


---------------------效果截图(红框框就是多余的空隙)=----------------


[解决办法]
没有看见图,估计是你控件中宽度定死的原因,建议使用百分比控制
[解决办法]
用ie自带的开发工具(按F12)去看一下最终生成的layout是什么样子的,然后再改的

热点排行