如何使用javascript在客户端调整ASP.NET gridview列的大小 [英] How to resize ASP.NET gridview columns on client side using javascript

问题描述

<tr>
                                            <td colspan="2" class="pdTop10 pdr20 pdl20">
                                                <asp:GridView ID="GridPartDet" runat="server" AutoGenerateColumns="False" CellPadding="3"
                                                    CssClass="ph clr width100per" OnRowCommand="GridPartDet_RowCommand" TabIndex="24">
                                                    <Columns>
                                                        <asp:TemplateField HeaderText="S No">
                                                            <ItemTemplate>
                                                                <%# ((GridViewRow)Container).RowIndex + 1%>
                                                            </ItemTemplate>
                                                            <ItemStyle Width="8%" />
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="Action">
                                                            <ItemTemplate>
                                                                <asp:LinkButton ID="LinkBtnEdit" runat="server" CausesValidation="false" CommandName="EditRow"
                                                                    CssClass="gridCommand" TabIndex="25" Text="Edit"></asp:LinkButton>
                                                                <asp:LinkButton ID="LinkBtnDelete" runat="server" CausesValidation="false" CommandName="DeleteRow"
                                                                    CssClass="gridCommand" TabIndex="26" Text="Delete"></asp:LinkButton>
                                                            </ItemTemplate>
                                                            <ItemStyle Width="10%" />
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="Personal" Visible="false">
                                                            <ItemTemplate>
                                                                <asp:Label ID="LbPersonal" runat="server" Text='<%# Eval("Personal") %>'></asp:Label>
                                                            </ItemTemplate>
                                                            <ItemStyle Width="20%" />
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="PersonalDetail">
                                                            <ItemTemplate>
                                                                <asp:Label ID="LblPartID" runat="server" Text='<%# Eval("PersonalDetail") %>'></asp:Label>
                                                            </ItemTemplate>
                                                            <ItemStyle Width="10%" />
                                                        </asp:TemplateField>
                                                        <asp:TemplateField HeaderText="PartRemark">
                                                            <ItemTemplate>
                                                                <asp:Label ID="LblPartDetails" runat="server" Text='<%# Eval("PartRemark") %>'></asp:Label>
                                                            </ItemTemplate>
                                                            <ItemStyle Width="40%" />
                                                        </asp:TemplateField>
                                                    </Columns>
                                                    <FooterStyle BackColor="#CCCCCC" />
                                                    <%-- <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
                                <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />--%>
                                                    <HeaderStyle BackColor="LightGray" Font-Bold="True" CssClass="ForeColor" />
                                                </asp:GridView>
                                            </td>
                                        </tr>
                                    </table>
                            </asp:Panel>

我尝试了什么：



i已经尝试了很多次，但不能正常工作

What I have tried:

i have tried many times in different ways but its not working

推荐答案

在要调整大小的列的标题和项目模板中添加一个类，然后只需调整该类的项目宽度。下面我已将claddpdCol添加到personalDetail列并添加了一个按钮，可在单击时调整这些列的大小

Add a class to the header and the item template of the column you want to resize, then simply adjust the width of items with that class. Below I've added the cladd "pdCol" to the personalDetail column and added a button that resizes those columns when clicked

<asp:GridView ID="GridPartDet" runat="server" AutoGenerateColumns="False" CellPadding="3"
    CssClass="ph clr width100per" OnRowCommand="GridPartDet_RowCommand" TabIndex="24">
    <Columns>
        <asp:TemplateField HeaderText="S No">
            <ItemTemplate>
                <%# ((GridViewRow)Container).RowIndex + 1%>
            </ItemTemplate>
            <ItemStyle Width="8%" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Action">
            <ItemTemplate>
                <asp:LinkButton ID="LinkBtnEdit" runat="server" CausesValidation="false" CommandName="EditRow"
                    CssClass="gridCommand" TabIndex="25" Text="Edit"></asp:LinkButton>
                <asp:LinkButton ID="LinkBtnDelete" runat="server" CausesValidation="false" CommandName="DeleteRow"
                    CssClass="gridCommand" TabIndex="26" Text="Delete"></asp:LinkButton>
            </ItemTemplate>
            <ItemStyle Width="10%" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Personal" Visible="false">
            <ItemTemplate>
                <asp:Label ID="LbPersonal" runat="server" Text='<%# Eval("Personal") %>'></asp:Label>
            </ItemTemplate>
            <ItemStyle Width="20%" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="PersonalDetail">
            <ItemTemplate>
                <asp:Label ID="LblPartID" runat="server" Text='<%# Eval("PersonalDetail") %>'></asp:Label>
            </ItemTemplate>
            <ItemStyle Width="10%" CssClass="pdCol" />
            <HeaderStyle CssClass="pdCol" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="PartRemark">
            <ItemTemplate>
                <asp:Label ID="LblPartDetails" runat="server" Text='<%# Eval("PartRemark") %>'></asp:Label>
            </ItemTemplate>
            <ItemStyle Width="40%" />
        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="#CCCCCC" />
    <HeaderStyle BackColor="LightGray" Font-Bold="True" CssClass="ForeColor" />
</asp:GridView>

<button id="btnResize">Resize</button>

<script>

（document）.ready（function（）{

(document).ready(function () {

（＃btnResize） .click（function（e）{
e.preventDefault（）;

("#btnResize").click(function (e) { e.preventDefault();

这篇关于如何使用javascript在客户端调整ASP.NET gridview列的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！