js上移下移控件

来源：互联网发布：app 2g网络编辑：程序博客网时间：2024/06/04 18:08

效果图

使用方法:

$("#moverc").movebleTable({               upDisableClass: "myup_outline",                downDisableClass: "mydown_outline",               trIDPreFix: "mvtrrc_",               setIndxColumn: function (rowindex, row) {                     $(row).children().eq(1).html(rowindex);                 },               insertRowFunc: function (n) {                    return this.mydefault.srctargetele.find(this.mydefault.rowBodySelector).find(this.mydefault.rowSelector).filter(this.mydefault.hiddenRowSelector);               }           });

附上源代码:

(function ($) {    function movebleTableinit(srcelement) {        this.mydefault = {            srctargetele: $(srcelement),            addButtonSelector: "#addButton",            rowBodySelector: "tbody",            rowSelector: "tr",            hiddenRowSelector: ".xyz",            rowArray: [],            topShortSelector: "#topShort",            topReverseSelector: "#topReverse",            cellUpSelector: ".cellUp",            cellDownSelector: ".cellDown",            cellTopSelector: ".cellTop",            cellBottomSelector: ".cellBottom",            cellRemoveSelector: ".cellRemove",            upClass: "splashy-arrow_large_up",            upDisableClass: "splashy-arrow_large_up_outline",            downClass: "splashy-arrow_large_down",            downDisableClass: "splashy-arrow_large_down_outline",            maxCellIndex: 0,            setIndxColumn: null,            insertRowFunc: null,            startIndex: 1,            tabTarget: "myTarget",            activeClass: "btn-success",            trIDPreFix: "mvtr_"        };        return this;    }    $.fn.movebleTable = function (option) {        if (typeof (option) != "undefined" & this.data("movebleTable")) {            var mytabinst = this.data("movebleTable");            if (mytabinst) {                if ($.isFunction(mytabinst[option])) {                    return mytabinst[option].apply(mytabinst, Array.prototype.slice.call(arguments, 1));                }            }        }        else {            if (option) {                $.extend(option, {srctarget: this});            }            var data = this.data("movebleTable");            if (!data) {                this.data("movebleTable", new movebleTableinit(this))                this.data("movebleTable").setdefault(option);                this.data("movebleTable").attachPlugin();            }            return this;        }    };    $.extend(movebleTableinit.prototype, {        attachPlugin: function () {            var that = this;            $.each(this.mydefault.srctargetele.find(this.mydefault.rowBodySelector).find(this.mydefault.rowSelector).not(this.mydefault.hiddenRowSelector), function (i, n) {                that.checkAll(n);                $(this).attr("id", that.mydefault.trIDPreFix + (i + 1));                that.mydefault.rowArray.push({row: n, index: i});            });            this.mydefault.srctargetele.find(this.mydefault.rowBodySelector).find(this.mydefault.cellUpSelector).not(function () {                return $(this).hasClass(that.mydefault.upDisableClass) | $(this).parents(that.mydefault.rowSelector).is(that.mydefault.hiddenRowSelector);            }).each(function () {                $(this).unbind("click").bind("click", function () {                    that.moveUp(this);                })            });            this.mydefault.srctargetele.find(this.mydefault.rowBodySelector).find(this.mydefault.cellDownSelector).not(function () {                return $(this).hasClass(that.mydefault.downDisableClass) | $(this).parents(that.mydefault.rowSelector).is(that.mydefault.hiddenRowSelector);            }).each(function () {                $(this).unbind("click").bind("click", function () {                    that.moveDown(this);                })            });            this.mydefault.srctargetele.find(this.mydefault.rowBodySelector).delegate(this.mydefault.cellRemoveSelector, "click", function () {                for (var i = 0; i < that.mydefault.rowArray.length; i++) {                    if ($(this).parents(that.mydefault.rowSelector).is($(that.mydefault.rowArray[i].row))) {                        that.removeCurrentRow(i + 1);                    }                }            });            this.mydefault.srctargetele.find(this.mydefault.topReverseSelector).unbind("click").bind("click", function () {                that.topReverse();            });            if (this.mydefault.srctargetele.find(this.mydefault.addButtonSelector).length == 1) {                this.mydefault.srctargetele.find(this.mydefault.addButtonSelector).unbind("click").bind("click", function () {                    that.insertNewRow(that.mydefault.rowArray.length + 1);                })            }            return this;        },        insertNewRow: function (n) {            var that = this;            if (n > 0 & $.isFunction(this.mydefault.insertRowFunc)) {                var htmlval = this.mydefault.insertRowFunc.call(this, n).clone(false).removeClass($.trim(this.mydefault.hiddenRowSelector.replace(".","")));                this.mydefault.srctargetele.find(this.mydefault.rowBodySelector).find(this.mydefault.rowSelector).not(this.mydefault.hiddenRowSelector).last().after($(htmlval).show());                $(htmlval).find(this.mydefault.cellUpSelector).bind("click", function () {                    that.moveUp(this);                });                $(htmlval).find(this.mydefault.cellDownSelector).bind("click", function () {                    that.moveDown(this);                })                that.checkAll($(htmlval));                $(htmlval).attr("id", that.mydefault.trIDPreFix + (n));                that.mydefault.rowArray.push({row: $(htmlval), index: n - 1});                that.mydefault.setIndxColumn(n, $(htmlval));            }        },        removeCurrentRow: function (n) {            var that = this;            $(this.mydefault.rowArray.slice(n - 1, n)[0].row).remove();            this.mydefault.rowArray.splice(n - 1, 1);            for (var i = n - 1; i < this.mydefault.rowArray.length; i++) {                this.mydefault.rowArray[i].index = this.mydefault.rowArray[i].index - 1;                $(this.mydefault.rowArray[i].row).attr("id", that.mydefault.trIDPreFix + (this.mydefault.rowArray[i].index + 1));                that.mydefault.setIndxColumn(this.mydefault.rowArray[i].index + 1, this.mydefault.rowArray[i].row);                if ($.isFunction(that.mydefault.setIndxColumn)) {                    that.mydefault.setIndxColumn(this.mydefault.rowArray[i].index + 1, this.mydefault.rowArray[i].row);                }            }        },        topReverse: function () {            var that = this;            this.mydefault.rowArray.reverse();            for (var i = 0; i < this.mydefault.rowArray.length; i++) {                this.mydefault.rowArray[i].index = i;                $(this.mydefault.rowArray[i].row).attr("id", that.mydefault.trIDPreFix + (this.mydefault.rowArray[i].index + 1));                that.mydefault.setIndxColumn(this.mydefault.rowArray[i].index + 1, this.mydefault.rowArray[i].row);                this.mydefault.srctargetele.find(this.mydefault.rowBodySelector).find(this.mydefault.rowSelector).filter(this.mydefault.hiddenRowSelector).before($(this.mydefault.rowArray[i].row));            }            that.checkAll(this.mydefault.rowArray[0].row);            that.checkAll(this.mydefault.rowArray[this.mydefault.rowArray.length - 1].row);        },        moveUp: function (ele) {            var that = this;            var obj = $(ele).parents(this.mydefault.rowSelector);            $(ele).parents(this.mydefault.rowSelector).prev(this.mydefault.rowSelector).before(obj);            var index1 = parseInt($.trim(obj.attr("id").replace(this.mydefault.trIDPreFix, ""))) - 1;            this.resetRowArray(index1, index1 - 1);            $(this.mydefault.rowArray[index1].row).attr("id", that.mydefault.trIDPreFix + (this.mydefault.rowArray[index1].index + 1));            $(this.mydefault.rowArray[index1 - 1].row).attr("id", that.mydefault.trIDPreFix + (this.mydefault.rowArray[index1 - 1].index + 1));            if ($.isFunction(that.mydefault.setIndxColumn)) {                that.mydefault.setIndxColumn(this.mydefault.rowArray[index1].index + 1, this.mydefault.rowArray[index1].row);                that.mydefault.setIndxColumn(this.mydefault.rowArray[index1 - 1].index + 1, this.mydefault.rowArray[index1 - 1].row);            }            // $(ele).parentsUntil(this.mydefault.rowSelector).remove();            this.checkAll(obj);        },        moveDown: function (ele) {            var that = this;            var obj = $(ele).parents(this.mydefault.rowSelector);            $(ele).parents(this.mydefault.rowSelector).next(this.mydefault.rowSelector).after(obj);            var index1 = parseInt($.trim(obj.attr("id").replace(this.mydefault.trIDPreFix, ""))) - 1;            this.resetRowArray(index1, index1 + 1);            $(this.mydefault.rowArray[index1].row).attr("id", that.mydefault.trIDPreFix + (this.mydefault.rowArray[index1].index + 1));            $(this.mydefault.rowArray[index1 + 1].row).attr("id", that.mydefault.trIDPreFix + (this.mydefault.rowArray[index1 + 1].index + 1));            if ($.isFunction(that.mydefault.setIndxColumn)) {                that.mydefault.setIndxColumn(this.mydefault.rowArray[index1].index + 1, this.mydefault.rowArray[index1].row);                that.mydefault.setIndxColumn(this.mydefault.rowArray[index1 + 1].index + 1, this.mydefault.rowArray[index1 + 1].row);            }            //$(ele).parentsUntil(this.mydefault.rowSelector).remove();            this.checkAll(obj)        },        resetRowArray: function (index1, index2) {            this.mydefault.rowArray[index1] = this.mydefault.rowArray.splice(index2, 1, this.mydefault.rowArray[index1])[0];            this.mydefault.rowArray[index1].index = index1;            this.mydefault.rowArray[index2].index = index2;        },        checkAll: function (obj) {            this.checkBottom(obj, true);            this.checkTop(obj, true);        },        checkBottom: function (ele, full) {            var that = this;            if (typeof ($(ele).next(":not("+this.mydefault.hiddenRowSelector+")").html()) == "undefined") {                $(ele).find(this.mydefault.cellDownSelector).unbind("click");                $(ele).find(this.mydefault.cellDownSelector).addClass(this.mydefault.downDisableClass);            } else {                if ($(ele).find(this.mydefault.cellDownSelector).hasClass(this.mydefault.downDisableClass)) {                    $(ele).find(this.mydefault.cellDownSelector).unbind("click").bind("click", function () {                        that.moveDown(this);                    });                    $(ele).find(this.mydefault.cellDownSelector).removeClass(this.mydefault.downDisableClass)                }            }            if (full) {                this.checkBottom($(ele).prev(":not("+this.mydefault.hiddenRowSelector+")"), false);                this.checkTop($(ele).prev(":not("+this.mydefault.hiddenRowSelector+")"), false);            }        },        checkTop: function (ele, full) {            var that = this;            if (typeof ($(ele).prev(":not("+this.mydefault.hiddenRowSelector+")").html()) == "undefined") {                $(ele).find(this.mydefault.cellUpSelector).unbind("click");                $(ele).find(this.mydefault.cellUpSelector).addClass(this.mydefault.upDisableClass);            } else {                if ($(ele).find(this.mydefault.cellUpSelector).hasClass(this.mydefault.upDisableClass)) {                    $(ele).find(this.mydefault.cellUpSelector).unbind("click").bind("click", function () {                        that.moveUp(this);                    });                    $(ele).find(this.mydefault.cellUpSelector).removeClass(this.mydefault.upDisableClass)                }            }            if (full) {                this.checkTop($(ele).next(":not("+this.mydefault.hiddenRowSelector+")"), false);                this.checkBottom($(ele).next(":not("+this.mydefault.hiddenRowSelector+")"), false);            }        },        setdefault: function (opt) {            $.extend(true, this.mydefault, opt);            // alert(this.default.srctarget.length);        }    })    ;    $.fn.movebleTable.constructor = movebleTableinit;})(jQuery);/** * Created by wangcb on 2015/3/4. *//** * Created by wangcb on 2015/3/5. *//** * Created by wangcb on 2015/3/28. *//** * Created by wangcb on 2015/3/30. */

0 0