允许用户调整gridview列的大小答案

【问题标题】：Allow gridview columns to be resized by user允许用户调整gridview列的大小
【发布时间】：2019-02-26 00:20:03
【问题描述】：

我想允许用户调整我的 datagridview 中的列的大小，就像在这个 gif 中一样。 https://docs.telerik.com/devtools/winforms/controls/gridview/columns/images/gridview-columns-rezise-columns001.gif

我尝试添加 AllowUserToResizeColumns="True" 但由于某种原因它对我不起作用这是我的 datagridview 标头代码。

<asp:GridView ID="editingGrid" runat="server" AutoGenerateColumns="false" ShowFooter="false" DataKeyNames="compras_id"
                ShowHeaderWhenEmpty="true" AllowPaging="True" OnPageIndexChanging="gridView_PageIndexChanging" OnRowDataBound = "OnRowDataBound" OnSelectedIndexChanged = "OnSelectedIndexChanged" 
                 CellPadding="3" AllowUserToResizeColumns="True" PageSize="5" AllowSorting="true" onsorting="grdPurchases_Sorting"  GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">
                <PagerSettings  Mode="Numeric" />

我可以做些什么来让用户调整列的大小。谢谢

【问题讨论】：

Resize column 在客户端由 JS 实现。 HTMLtable（由GridView生成）默认不支持此功能。
是的，我找到了带有 javascript 和 html 表的示例，但由于我有一个 gridview，我不知道如何将两者联系起来。

标签： asp.net datagrid

【解决方案1】：

最后我发现我需要使用 javascript 才能像 Alex 告诉我的那样工作，所以这是我的解决方案

<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../scripts/colResizable-1.3.min.js" type="text/javascript"></script>
<script src="../scripts/jquery.cookie.js" type="text/javascript"></script>
 <script type="text/javascript">
     $(document).ready(function () {
         if ($.cookie('colWidth') != null) {
             var columns = $.cookie('colWidth').split(',');
             var i = 0;
             $('.mGrid th').each(function () {
                 $(this).width(columns[i++]);
             });
         }

         $(".mGrid").colResizable({
             liveDrag: true,
             gripInnerHtml: "<div class='grip'></div>",
             draggingClass: "dragging",
             onResize: onSampleResized
         });

     });

     var onSampleResized = function (e) {
         var columns = $(e.currentTarget).find("th");
         var msg = "";
         columns.each(function () { msg += $(this).width() + ","; })
         $.cookie("colWidth", msg);
     }; 
</script>  

  <asp:GridView ID="editingGrid" runat="server" AutoGenerateColumns="false" ShowFooter="false" DataKeyNames="compras_id"
        ShowHeaderWhenEmpty="true" AllowPaging="True" OnPageIndexChanging="gridView_PageIndexChanging" OnRowDataBound = "OnRowDataBound" OnSelectedIndexChanged = "OnSelectedIndexChanged" 
         CellPadding="3" AllowUserToResizeColumns="True" PageSize="5" AllowSorting="true" onsorting="grdPurchases_Sorting"  GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">
        <PagerSettings  Mode="Numeric" />

【讨论】：