通过 jQuery 订购 django 更改列表页面？

Posted 2023-02-24

【中文标题】通过 jQuery 订购 django 更改列表页面？

【英文标题】：Ordering a django change list page via jQuery?

【发布时间】：2010-11-20 15:18:22

【问题描述】：

我希望能够通过 jQuery 脚本重新排序模型列表。

我已经在模型更新页面的 inLines 中进行了重新排序，但我还想将它添加到 change_list 页面吗？

这可能吗？我正在使用 Django 1.1，因此可以访问操作表，如果这会让事情变得更容易...

任何信息将不胜感激。

【参考方案1】：

我设法找到了解决方案。以为我会为其他人发布它...

这是一个示例模型

class ExmapleModel(models.Model)
    order = models.PositiveSmallIntegerField()
    title = models.CharField()

管理类看起来像这样，注意添加的模板和 list_editable 字段。

class ExampleModelAdmin(admin.ModelAdmin):
    ordering = ('order')
    list_display = ( 'title', 'order', )
    list_editable = ('order',)
    change_list_template = 'admin/exampleModel/change_list.html'

change_list.html 模板如下所示。

% extends "admin/change_list.html" %
% load adminmedia admin_list i18n %

% block extrastyle %
   block.super 
    <script type="text/javascript" src="path/to/static/url/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="path/to/static/url/js/admin/change_list_sort.js"></script>
% endblock %

所有这些都是加载到 jquery 库和我们的自定义 change_list_sort.js 文件中。

最后，我在这里遵循了这个示例 - http://www.lukedingle.com/javascript/sortable-table-rows-with-jquery-draggable-rows/ - 并更改了几行代码以使其更新订单号。下面是我的代码。

$(document).ready(function()
    var mouseX, mouseY, lastX, lastY = 0;
    // This function captures the x and y positions anytime the mouse moves in the document.
    $().mousemove(function(e)  mouseX = e.pageX; mouseY = e.pageY; );
    var need_select_workaround = typeof $(document).attr('onselectstart') != 'undefined';

    $('table tbody tr').live('mousedown', function (e) 
        lastY = mouseY;

        var tr = $(this);

        // This is just for flashiness. It fades the TR element out to an opacity of 0.2 while it is being moved.
        tr.fadeTo('fast', 0.2);


        // jQuery has a fantastic function called mouseenter() which fires when the mouse enters
        // This code fires a function each time the mouse enters over any TR inside the tbody -- except $(this) one
        $('tr', tr.parent() ).not(this).mouseenter(function()
            // Check mouse coordinates to see whether to pop this before or after
            // If mouseY has decreased, we are moving UP the page and insert tr before $(this) tr where
            // $(this) is the tr that is being hovered over. If mouseY has decreased, we insert after
            if (mouseY > lastY) 
                $(this).after(tr);
             else 
                $(this).before(tr);
            
            // Store the current location of the mouse for next time a mouseenter event triggers
            lastY = mouseY;
        );

        // Now, bind a function that runs on the very next mouseup event that occurs on the page
        // This checks for a mouse up *anywhere*, not just on table rows so that the function runs even
        // if the mouse is dragged outside of the table.
        $('body').mouseup(function () 
            //Fade the TR element back to full opacity
            tr.fadeTo('fast', 1);
            // Remove the mouseenter events from the tbody so that the TR element stops being moved
            $('tr', tr.parent()).unbind('mouseenter');
            // Remove this mouseup function until next time
            $('body').unbind('mouseup');

            // Make text selectable for IE again with
            // The workaround for IE based browsers
            if (need_select_workaround)
                $(document).unbind('selectstart');

            reorder(); // This function just renumbers the position and adjusts the zebra striping, not required at all
        );



        // This part if important. Preventing the default action and returning false will
        // Stop any text in the table from being highlighted (this can cause problems when dragging elements)
        e.preventDefault();

        // The workaround for IE based browers
        if (need_select_workaround)
            $(document).bind('selectstart', function ()  return false; );
            return false;

    ).css('cursor', 'move');

    function reorder () 
        var position = 1;
        $('table tbody tr').each(function () 
            // Change the text of the first TD element inside this TR
            $('td:last input', $(this)).val(position);
            //Now remove current row class and add the correct one
            $(this).removeClass('row1 row2').addClass( position % 2 ? 'row1' : 'row2');
            position += 1;

        );
        $("form:last").submit();
    
);

希望对某人有所帮助！

【讨论】：

这不会在数据库中写入新订单。