Django xadmin插件修复style=“tab“后台不能正常显示

Django xadmin插件修复style="tab"后台不能正常显示

xadmin 用做后台管理插件，在使用中也会有bug出现。这个bug官方没有修复，我调试了很久,修改了源代码，使这个功能能够正常使用。

使用场景： 有两个model 

class CorpuseKeywordsInLine(object):
    model = CorpuseKeywords
    extra = 1
    style = "tab"
    exclude = ["add_time"]

class TopicTagInLine(object):
    model = TopicTag
    extra = 0
    style="tab"
    exclude = ["add_time"]

class CorpuseAdmin(object):
    list_display = ["id","newspaper","title","domain","fav_nums","click_nums","date"]
    search_fields = ["title","domain"]
    list_filter = ["title","domain","date","add_time"]
    ordering = ["-date"]
    inlines = [CorpuseKeywordsInLine,TopicTagInLine]

    def get_form_layout(self):
        if self.org_obj:
            self.form_layout = (
                Main(
                    Fieldset(
                        "语料信息",
                        'title','newspaper','domain','content','language'
                    ),
                    Fieldset(
                        "基本信息",
                        'date','length','url'
                    ),
                ),
                Side(
                    Fieldset("选择信息",
                             'fav_nums', 'click_nums', 'is_classics','add_time','update_time'
                             ),
                )
            )
        return super(CorpuseAdmin,self).get_form_layout()

这个是修复后正常添加，编辑的结果。

源代码修复在xadmin/static/xadmin/js/xadmin.plugin.formset.js这个代码，用下面这个代码替换：

;(function($) {
    $.fn.formset = function(opts){
        var $$ = $(this);

        var options = $.extend({
            prefix: $$.data('prefix')
        }, $.fn.formset.styles[$$.data('style')], opts),

            updateElementIndex = function(elem, prefix, ndx) {
                var idRegex = new RegExp(prefix + '-(\\d+|__prefix__)-'),
                    replacement = prefix + '-' + ndx + '-';
                if (elem.attr("for")) elem.attr("for", elem.attr("for").replace(idRegex, replacement));
                if (elem.attr('id')) elem.attr('id', elem.attr('id').replace(idRegex, replacement));
                if (elem.attr('name')) elem.attr('name', elem.attr('name').replace(idRegex, replacement));
                if (elem.attr('href')) elem.attr('href', elem.attr('href').replace(idRegex, replacement));
                elem.find('.formset-num').html(ndx + 1);
            },

            hasChildElements = function(row) {
                return row.find('input,select,textarea,label,div,a').length > 0;
            },

            updateRowIndex = function(row, i){
                // if (options.update) options.update(row, (function(elem){
                //     updateElementIndex(elem, options.prefix, i);
                // }));
                if (options.update) options.update(row, (function(elem){
                    updateElementIndex(elem, options.prefix);
                }));
                updateElementIndex(row, options.prefix, i);
                row.find('input,select,textarea,label,div,a').each(function() {
                    updateElementIndex($(this), options.prefix, i);
                });
                row.data('row-index', i);
            },

            insertDeleteLink = function(row) {
                row.find('a.delete-row').click(function() {
                    var row = $(this).parents(".formset-row"),
                        del = row.find('input[id $= "-DELETE"]');

                    if (options.removed) options.removed(row, del, $$);

                    if (del.length) {
                        if(del.val() == 'on'){
                            row.removeClass('row-deleted');
                        } else {
                            row.addClass('row-deleted');
                        }
                        del.val(del.val() == 'on'?'':'on');
                    } else {
                        var parent = row.parent();
                        row.remove();
                        var forms = parent.find('.formset-row');
                        $('#id_' + options.prefix + '-TOTAL_FORMS').val(forms.length);
                        for (var i=0, formCount=forms.length; i<formCount; i++) {
                            updateRowIndex(forms.eq(i), i);
                        }
                    }
                    return false;
                });
            };

        $$.find(".formset-row").each(function(i) {
            insertDeleteLink($(this));
        });

        if ($$.length) {
            var template, el = $('#' + options.prefix + '-empty');
            if(el.is('textarea')) {
                template = el.val();
            } else if(el.is('span')) {
                template = el.html();
            }else if(el.is('script')) {
                template = el.html();
            }

            template = el.html(template).text(); // decoded
            template = $($.parseHTML(template));

            template.removeAttr('id');
            if(template.data("replace-id")){
                template.attr('id', template.data("replace-id"));
                template.removeAttr('data-replace-id');
            }
            options.formTemplate = template;

            $('#' + options.prefix + '-add-row').click(function() {
                var formCount = parseInt($('#id_' + options.prefix + '-TOTAL_FORMS').val()),
                    row = options.formTemplate.clone(true).removeClass('empty-form');
                updateRowIndex(row, formCount);
                row.appendTo($$);
                insertDeleteLink(row);
                row.exform();
                $('#id_' + options.prefix + '-TOTAL_FORMS').val(formCount + 1);
                // If a post-add callback was supplied, call it with the added form:
                if (options.added) options.added(row,options.prefix,formCount, $$);
                return false;
            });
        }

        return $$;
    }

    $.fn.formset.styles = {
        'tab': {
            added: function(row,options,formCount, $$){
                var new_tab = $('<li><a data-toggle="tab" href="#'+(options)+'-'+(formCount)+'-body">#<span class="formset-num">'+ (formCount+1) +'</span></a></li>');
                row.attr('id', row.data("replace-id"));
                row.removeAttr('data-replace-id');
                var idRegex = new RegExp(options + '-(\\d+|__prefix__)-'),
                    replacement = options + '-' + formCount + '-';
                if (row.attr('id')) {
                    row.attr('id', row.attr('id').replace(idRegex, replacement));
                }
                else{
                    row.attr('id', options+ '-' +formCount+'-'+'body');
                }

                // console.log($$)
                // console.log(row)
                $$.parent().find('.nav-tabs').append(new_tab);
                new_tab.find('a').tab('show');
            },
            update: function(row, update){
                var rowId = row.attr('id');
                if(rowId){
                    $('a[href=#'+rowId+']').each(function(){
                        update($(this));
                    })
                }
            },
            removed: function(row, del, $$){
                var rowId = row.attr('id');
                if(rowId){
                    var tab = $('a[href=#'+rowId+']');
                    if (del.length) {
                        if(del.val() == 'on'){
                            tab.removeClass('row-deleted');
                        } else {
                            tab.addClass('row-deleted');
                        }
                    } else {
                        if(tab.parent().next().length){
                            tab.parent().next().find('a').tab('show');
                        } else {
                            tab.parent().prev().find('a').tab('show');
                        }
                        tab.parent().remove();
                    }
                }
            }
        }
    };

    $(function(){
        $('.formset-content').each(function(){
            $(this).formset();
        });
    });
})(jQuery);

替换掉源文件中的代码就可以，源码出错的原因是在程序的‘tab’：{add:function.....}这个方法add方法，其实已经创建了tab下面的div,只是在做id标记的时候源码没有能够成功执行                row.removeAttr('data-replace-id');现在我截图看下修改后的tab下面的div

注意看标蓝出，div后面的id,之前出错的原因是这个id没有生成，现在生成就可以正常使用