发一个列拖拉的插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;" charset="gb2312" />
<title ></title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><style type="text/css">
.TableView{ margin:0 auto;table-layout:fixed; border:#CCC solid 1px; line-height:23px; text-align:center;
            border-collapse:collapse;width:100%;}
.TableView th{ border:#CCC solid 1px;background:url('../images/datagrid_title_bg.png') repeat-x;}
.TableView td{ border:#CCC solid 1px;}
    .TableView td,.TableView th{height:25px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;text-align:center;font-size:12px;}
</style><script type="text/javascript">
    /*
    标题：扩拖拽列表格demo 1.2
    设计：卢松强
    
    博客：http://hi.csdn.net/andensy
    日期：2010年4月26日
    说明：修改了firfox兼容性问题，可以很好的兼容火狐浏览器
    */
    /*
    依赖于jQuery
    部分修改：谭海生 QQ：420822072
    */
    (function($) {
        //用正则表达式判断jQuery的版本
        if (/1\.(0|1|2)\.(0|1|2|3|4|5)/.test($.fn.jquery) || /^1.1/.test($.fn.jquery)) {
            alert('movedTh 需要 jQuery v1.2.6 以后版本支持!  你正使用的是 v' + $.fn.jquery);
            return;
        }
        me = null;
        var ps = 3;
        $.fn.movedTh = function() {
            me = $(this).children("table").css("margin-left", "0");
            var target = null;
            var tempStr = "";
            var i = 0;
            
            $(me).find("tr:first").find("th").each(function() {
                tempStr = '<div id="mydiv' + i + '"onmousedown="$().mousedone.movedown(event,this)" style="position:absolute;width:20px;height:25px;z-index:99px;cursor:e-resize;overflow:hidden;" ></div>';
                var div = {};
                $(this).html($(this).html() + tempStr);
                var divOffset = $(this).parent().offset();
                var offset = $(this).offset();
                var pos = offset.left + $(this).width() + 6 - divOffset.left;
                $("#mydiv" + i).css("left", pos - 10).css("top", (offset.top + 2)); ;
                i++;
            });    //end each
        }    //end moveTh
        $.fn.mousedone = {
            movedown: function(e, obj) {
                var d = document;
                var e = window.event || e;
                var myX = e.clientX || e.pageX;
                obj.mouseDownX = myX;
                obj.pareneTdW = $(obj).parent().width();    //obj.parentElement.offsetWidth;
                obj.pareneTableW = me.width();
                if (obj.setCapture) {
                    obj.setCapture();
                } else if (window.captureEvents) {
                    window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                }
                d.onmousemove = function(e) {
                    var dragData = obj;
                    var event = window.event || e;
                    if (!dragData.mouseDownX) return false;
                    var newWidth = dragData.pareneTdW * 1 + (event.clientX || event.pageX) * 1 - dragData.mouseDownX;
                    if (newWidth > 0) {
                        $(obj).parent().width(newWidth);
                        me.width(dragData.pareneTableW * 1 + (event.clientX || event.pageX) * 1 - dragData.mouseDownX);
                        var k = 0;
                        me.find("tr:first").find("th").each(function() {
                            var divOffset = $(this).parent().offset();
                            var offset = $(this).offset();
                            var pos = offset.left + $(this).width() + 6 - divOffset.left;
                            $("#mydiv" + k).css("left", pos - 10);
                            k++;
                        })    //end each
                    } //end if
                };
                d.onmouseup = function(e) {
                    var dragData = obj;
                    if (dragData.setCapture) {
                        dragData.releaseCapture();
                    } else if (window.captureEvents) {
                        window.releaseEvents(e.MOUSEMOVE | e.MOUSEUP);
                    }
                    dragData.mouseDownX = 0;
                }
            }
}    //end mousedone
            $(window).resize(function() {
                setTimeout(function() {
                    var target = null;
                    var tempStr = "";
                    var i = 0;
                    $(me).find("tr:first").find("th").each(function() {
                        tempStr = '<div id="mydiv' + i + '"onmousedown="$().mousedone.movedown(event,this)"  ></div>';
                        var div = {};
                        $(this).html($(this).html() + tempStr);
                        var divOffset = $(this).parent().offset();
                        var offset = $(this).offset();
                        var pos = offset.left + $(this).width() - (2 + divOffset.left);
                        $("#mydiv" + i).addClass("resizeDivClass");
                        $("#mydiv" + i).css("left", pos);
                        i++;
                    });    //end each
                }, 10);
            });
        })(jQuery)
</script>
<script type="text/javascript">
    $().ready(function() {
        $("#div1").movedTh();
    });
</script>
</head>
<body>
    <div id="div1">
    <table class="TableView" >
        <tr>
            <th >改变table的列宽度改</th>
            <th >改变table的列宽度改</th>
            <th >改变table的列宽度改</th>
            <th >改变table的列宽度改</th>
            <th >改变table的列宽度改</th>
            <th >改变table的列宽度改</th>
        </tr>        <tr>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
        </tr>
        <tr>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
        </tr>
        <tr>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
        </tr>
        <tr>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
        </tr> 
    </table>
    </div>
</body>
</html>以上是某个高手写的一个基于Jquery的列拖拉效果，小弟我经过修改，把主要的几个bug搞定了。但是呢我还想在这个效果的基础上多加几个功能。一个是列交换，一个是排序。
曾经我向几个高手问过，但是没有得到满意的答复，我自己经过收集其他数据后得到比较满意的列拖拉是这个了。所以作出了修改。
首先他使用简单，一行代码即可。第二尽可能做到js和css和html代码的分离（其实做的还不够完整，主要是基础需要一个Div包着一个Table，因为我是在想不到如何给每个TH做基准定位，因为表格的位置可能不同如果随便拿一个元素定位就会变形小弟js水平不好，牛人见笑了，希望有高手告知如果搞定）为什么我不使用其他插件呢？我不知道有多少人用其他插件获取相同或者更好的功能。我自己的原因就是，我不喜欢那些插件的限制，打个比方吧，我很喜欢Jquery的一个插件叫flexgrid，但是呢。使用过于复杂。定义基本参数，过多。并且样式不能自己修改，最要命的是在aspnet里面你如果用gridiview循环出来的的数据表想在TR里面添加个Onlick方法都麻烦。但不可否认他是一个好插件。我一直有一个想法，就是把他的js功能单独分离出来。做到我现在这样列拖拉，交换，隐藏，固定表头，固定表尾。都在一个固定的js里面完成。样式自己搞定，分页也是自己用aspnetpager搞定（我很喜欢这个东东，功能强大代码少）然后呢，要求的html表格规格简单，并且效果js功能与html表格里面的自定义方法不冲突（例如可以直接在cs后台添加TR的click事件而不用像那些插件一样必须在js的插件定义时就写好。这样就可以做到嵌套循环出来也好，一般循环出来也好都一样的优秀表现了。想起jgrid，嵌套显示表格简直就是要命。这个呢，主要是给net的人使用的（例如我自己^_^)发上来是希望有高手作出功能添加和修改。也希望有高手有空和小弟一起探讨修改。
其实呢，我最希望作出的效果是这样的，只要给出
    <div id="div1">
    <table class="TableView" >
        <tr>
            <th >改变table的列宽度改</th>
            <th >改变table的列宽度改</th>
            <th >改变table的列宽度改</th>
            <th >改变table的列宽度改</th>
            <th >改变table的列宽度改</th>
            <th >改变table的列宽度改</th>
        </tr>        <tr>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
        </tr>
        <tr>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
        </tr>
        <tr>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
        </tr>
        <tr>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
        </tr>
        <tfoot>
        <tr>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
            <td >改变table的列宽度</td>
        </tr>
        </tfoot>
    </table>
    </div>
这样的一个数据表格，即可完成“表头，表尾固顶”，“列宽拖拉调整”，“列交换”，“排序”，“列头右键菜单弹出隐藏某列”然后css部分和其他js功能自己完成并且添加上去也不会和原功能冲突或覆盖。
为什么我不说json数据呢？说实话我不讨厌他，但是我做了几年net还真的没有试过故意的用json输出这么大的表格数据呢。因为输出这样的一个表格数据后台要做太多了，条件搜索，数据嵌套等。如果输出json然后做嵌套，我想工作量不会少得那里去。还不如自己输出一个html表格好，怎么输出自己喜欢，反正输出完毕就有效果。
如果输出完表格还要自己写一大堆插件的基础定义参数我觉得这就太麻烦了。

解决方案 »

  1.   

    其实很多js插件都是，功能是很强大了，但是js，html，css代码没有很好的分离导致很多人自定义某些功能外观等做得很辛苦。在此，希望看到本帖的各位插件高手，在制作插件的时候优先考虑，工具是人用的。希望做的更加人性化一点。。程序员也是人。强大又怎么样？F1赛车够好了吧？但是如果在北京2环内早上8点钟上班时间开，叫你开去上班。你会选择他吗？
      

  2.   

    http://www.smartsheet.com/help/column-actions
      

  3.   

    但是我希望是基于jq的，并且结构简单的，样式，代码，数据html分离的。。他没有做到