GridView 栏位宽度自由拖动

實現方式：

       引入js文件：<scriptsrc="Scripts/colResizable-1.3.med.js"></script>

     引入CSS樣式：

    <styletype="text/css">

        .mlength {

            display: block;

            overflow: hidden;

            white-space: nowrap;

            -o-text-overflow: ellipsis;

            text-overflow: ellipsis;

        }

    </style>

       頁面JS方法定義：

        <scripttype="text/javascript">

        $(

            function () {

               var onSampleResized = function (e) {

                   var columns = $(e.currentTarget).find("th");

               };

 

               $("#GridView1").colResizable({

                   liveDrag: true,

                   gripInnerHtml: "<divclass='grip'></div>",

                   draggingClass: "dragging",

                   onResize: onSampleResized

               });

 

            }

            );

    </script>

GridView需要拖動而隱藏顯示欄位操作：

 

实现效果