JQuery grid拖动列宽

初稿请大家多多指点。

IE8，Firefox，chrome下测试的。

主要Javascript代码 ：

////////////////////////////////////////////////////////////////////////////
//jQueryGrid
(function($) {
    $.fn.grid = function(config){
        if (this.attr("tagName") == "TABLE"){
            return create.tableToGrid(this);
        }else if (config.store && config.columns){
            if (!config.dataType){
                config.dataType = "JSON";
            };
            if (config.dataType.toUpperCase() == "JSON") {
                return create.jsonToGrid(this, config);
            }
            else if (config.dataType.toUpperCase() == "XML") {
                return create.xmlToGrid(this, config);
            }
        };
    };
    
    var create = {
        ui: function(jQueryGrid){
            var down = false;
            var canMove = false;
            var downCell = null;
            var minLeft = 0;
            jQueryGrid.find(".header li").each(function(){
                $(this).mousemove(function(e){
                    if(e.pageX-$(this).offset().left-$(this).width()>-2){
                        $(this).css("cursor",typeof(air)=="undefined"?"w-resize":"move");
                        canMove = true;
                    }else{
                        if(!down){
                            $(this).css("cursor","default");
                            canMove = false;
                        }
                    }
                }).mousedown(function(e){
                    if (canMove) {
                        divDragLine.show();
                        divDragLine.css("left", e.pageX);
                        down = true;
                        downCell = $(this);
                        minLeft = downCell.offset().left+20;
                        
                        divDragLine2.show();
                        divDragLine2.css("left", downCell.offset().left);
                    }
                });
            });
            
            jQueryGrid.mousemove(function(e){
                if (down) {
                    if (minLeft < e.pageX) {
                        divDragLine.css("left", e.pageX);
                    }else {
                        divDragLine.css("left", minLeft);
                    }
                }
            }).mouseup(function(e){
                if (down) {
                    $(this).css("cursor", "default");
                    divDragLine.hide();
                    divDragLine2.hide();
                    down = false;
                    canMove = false;
                    //alert(divDragLine.css("left"));
                    var width = minLeft - downCell.offset().left;
                    if (minLeft < e.pageX) {
                        width = e.pageX - downCell.offset().left;
                    }
                    jQueryGrid.find("li[index=" + downCell.attr("index") + "]").css("width", width);

                    var width = 0;
                    jQueryGrid.find(".header li").each(function(){
                        width += $(this).attr("offsetWidth");
                    });

                    if (width < jQueryGrid.attr("offsetWidth")){
                        width = jQueryGrid.attr("offsetWidth")-2;
                    }
                    
                    jQueryGrid.find("ul").each(function(){
                        $(this).css("width",width);
                    });
                }
            });
            
            jQueryGrid.find("ul:gt(0)").each(function(){
                $(this).mouseover(function(){
                    if (!$(this).hasClass("row-selected")) {
                        $(this).addClass("row-over");
                    }
                }).mouseout(function(){
                    $(this).removeClass("row-over");
                }).dblclick(function(){
                    jQueryGrid.find(".row-selected").removeClass("row-selected");
                    $(this).addClass("row-selected").removeClass("row-over");
                    
                    var rowData = {};
                    if (jQueryGrid.store){
                        rowData =     jQueryGrid.store[$(this).attr("index")];
                    }
                    jQueryGrid.trigger("rowdblclick",[$(this),rowData]);
                });
            });
            
            var divDragLine = jQueryGrid.find(".divDragLine");
            var divDragLine2 = jQueryGrid.find(".divDragLine2");
            divDragLine.css("height",jQueryGrid.height()-25).hide();
            divDragLine2.css("height",jQueryGrid.height()-25).hide();
        },
        //把普通的table转换为jQueryGrid
        tableToGrid: function(table){
            var colIndex = 0;
            var rows = table.find("tr:eq(0)");
            var html = [];
            html.push("<div class='divDragLine'></div><div class='divDragLine2'></div><ul class='header'>");
            rows.children().each(function(){
                html.push("<li style='width:"+$(this).width()+"px;' index='"+(colIndex++)+"'>"+$(this).html()+"</li>");
            });
            html.push("</ul>");
            
            rows = table.find("tr:gt(0)");
            var row_alt = "row-alt";
            rows.each(function(){
                if (row_alt){
                    row_alt = "";
                }else{
                    row_alt = "row-alt";
                }
                html.push("<ul class='row "+row_alt+"'>");
                colIndex = 0;
                var cells = $(this).children().each(function(){
                    html.push("<li style='width:"+$(this).width()+"px;' index='"+(colIndex++)+"'>"+$(this).html()+"</li>");
                });
                html.push("</ul>");
            });
            

            table.wrap("<div class='jQueryGrid'></div>");
            
            var jQueryGrid = table.parent();
            jQueryGrid.html(html.join(""));
            this.ui(jQueryGrid);
            
            return jQueryGrid;
        },
        //把json数据源转换为jQueryGrid
        jsonToGrid: function(appendTo,config){
            if (appendTo.find(".jQueryGrid").length == 0) {
                $("<div class='jQueryGrid'></div>").appendTo(appendTo);
            };
            var jQueryGrid = appendTo.find(".jQueryGrid");
            
            var colIndex = 0;
            var html = ["<div class='divDragLine'></div><div class='divDragLine2'></div><ul class='header'>"];
            var storeLen = config.store?config.store.length:0;
            var columnsLen = config.columns.length;
            for(var c = 0; c < columnsLen; c++){
                var column = config.columns[c];
                html.push("<li style='");
                if (column.hidden){
                    html.push("display:none;");
                };
                if (column.width){
                    html.push("width:"+column.width+"px;");
                };
                html.push("'  index='"+(colIndex++)+"' >"+column.header+"</li>");
            }
            html.push("</ul>");
            
            var row_alt = "row-alt";
            for(var i = 0; i < storeLen; i++){
                if (row_alt){
                    row_alt = "";
                }else{
                    row_alt = "row-alt";
                }
                html.push("<ul  class='row "+row_alt+"'  index='"+i+"'>");
                colIndex = 0;
                var row = config.store[i];
                for(var c = 0; c < columnsLen; c++){
                    var column = config.columns[c];
                    
                    html.push("<li style='");
                    if (column.hidden){
                        html.push("display:none;");
                    };
                    if (column.width){
                        html.push("width:"+column.width+"px;");
                    };
                    
                    var value = row[column.dataIndex];
                    if (typeof(column.renderer) == "function"){
                        value = column.renderer(value,row,i);
                    };
    
                    html.push("'  index='"+(colIndex++)+"' >"+value+"</li>");
                }
                html.push("</ul>");
            }
            jQueryGrid.html(html.join(""));
            jQueryGrid.store = config.store;
            this.ui(jQueryGrid);
            
            return jQueryGrid;
        },
        //把xml数据源转换为jQueryGrid
        xmlToGrid: function(appendTo, config){
            
        }
    };

})(jQuery);

 

附件下载：jQueryGrid.rar