albertchendao
9/27/2018 - 9:03 AM

JQuery 排序插件

在页面上导入jquery和此js 用法有两种: A. 在需要触发排序事件的元素上添加如下属性: 1. sort-sel 可选项，默认值为 "sort-sel" 2. update-sel 可选项, 默认为 "input" 3. update-attr 可选项， 默认为 "name" 4. group-order 可选项, 默认为 1 5. parent-sel 可选项， 默认为 "body" 然后在触发排序的事件方法里使用 $(this).reorder() 调用 B. 调用方法时传递参数 $(this).reorder({ "sort-sel":"sort-sel", "parent-sel" : "body", "update-sel" : "input", "update-attr" : "name", "group-order" : 1, "regex" : /\d+/g }) 参数用法示例： + 新增 调用的js: $("body").delegate(".num-add-big", "click", function(){ $(this).reorder(); }) 这个按钮点击时会触发排序: 对每一个".jytj-sort-parent", 按照顺序查找其内部的所有 ".jytj-sort" 对每一个".jytj-sort", 查找其内部所有的 ".jytj-sort-update" 更新其属性 name ("update-attr"默认值)的值, 替换第 1("group-order" 默认值) 个数字为此 ".jytj-sort" 的序号

reorder
content_copyfile_download
(function ($) {
    $.fn.reorder =  function(option) {
        var defaultOpt = {
            "sort-sel":"sort-sel",
            "parent-sel" : "body",
            "update-sel" : "input",
            "update-attr" : "name",
            "group-order" : 1,
            "regex" : /\d+/g
        };
        var opt = $.extend(defaultOpt,option);
        var sortSel = $(this).attr("sort-sel") || opt["sort-sel"];
        var parentSel = $(this).attr("parent-sel") || opt["parent-sel"];
        var updateSel = $(this).attr("update-sel") || opt["update-sel"];
        var updateAttr = $(this).attr("update-attr") || opt["update-attr"];
        var order = parseInt($(this).attr("group-order")) || opt["group-order"];
        var regex = $(this).attr("regex") || opt["regex"] ;
        $(parentSel).each(function(parentNum, parentEle){
            $(parentEle).find(sortSel).each(function(sortNum, sortEle) {
                $(sortEle).find(updateSel).each(function(updateNum, updateEle) {
                    var oldAttr = $(updateEle).attr(updateAttr);
                    var count = 0;
                    $(updateEle).attr(updateAttr, oldAttr.replace(regex, function(arguments){count++;return count==order? sortNum:arguments[0]}));
                })
            });
        });
        return $(this);
    }
})(jQuery);