Snippet List
Adds drag-and-drop ordering of rows in the admin list view for Grappelli. This is a updated version of Snippet [#2306](http://djangosnippets.org/snippets/2306/) that works with the current version of Grappelli.
The model needs to have a field holding the position and that field has to be made list_editable in the ModelAdmin. The changes of the ordering are applied after clicking 'Save'.
- django
- sorting
- django-admin
- sortable
- grappelli
Adds drag-and-drop ordering of rows in the admin list view for [Grappelli](http://code.google.com/p/django-grappelli/). This is based on [Snippet #2057](http://djangosnippets.org/snippets/2057/) and fixes some bugs as well as switching to jQuery/jQuery UI provided by Grappelli. No additional files need to be installed.
The model needs to have a field holding the position and that field has to be made list_editable in the ModelAdmin. The changes of the ordering are applied after clicking 'Save'.
- admin
- sort
- jquery
- order
- sortable
- grappelli
Adds drag-and-drop ordering of rows in the admin list view.
The only requirements is that the model has a field holding the position and that the field is made list_editable in the ModelAdmin. The changes of the ordering are applied after clicking 'Save'.
The included javascript uses [jQuery UI's sortable](http://jqueryui.com/demos/sortable/) plugin
Inspired by snippets [#1053](http://djangosnippets.org/snippets/1053) and [#998](http://djangosnippets.org/snippets/998/). Another similar snippet using AJAX is [#2047](http://djangosnippets.org/snippets/2047/).
- admin
- sort
- jquery
- order
- sortable
If you have a model that has an "ordering" column, and you want to be able to re-position records (eg, order items by priority), this base class should make it fairly easy. To use it, you extend your model using this abstract class, then hook up the pre_save event to the pre_save event of the base class, and you're good to go. Whenever you save an item, it ensures that it has a valid "order" number. The meat of this class is the "move()" method. Just call instance.move(number) where instance is your model instance, and this class will do all the logic necessary to shift around the order numbers for you.
- sort
- order
- sortable
- orderable
- sorted
- ordered
This jQuery javascript enables dynamic add/delete of rows in tabular inlines. It adds a "+" icon at the bottom of the inline to allow addition of new rows, and replaces the default delete checkbox with a "x" icon for deletion, giving you the possibility to add/delete rows instantly without reloading the page.
In addition, it gives you drag-n-drop ordering functionality with a named position model field using jQuery UI Sortable.
**Usage (see below for example):**
Just include the javascript on your admin page, together with jQuery, and it'll automatically affect all tabular inlines. Optionally, also include jQuery UI Sortable and an Integer field in your inline model named "position" (or whatever you set "position_field" to), which will automatically hide the position field and enable drag-n-drop sorting.
**Developed for:**
* jQuery 1.3.2
* jQuery UI 1.7.1
* Django trunk (tested in Django v1.0.2)
* (Might work with other versions with or without adjustments, but not tested)
**Settings (in top of javascript):**
* "position_field" is the name of an integer model field that is used for ordering the inline model. If left empty or not found, the drag-n-drop functionality is dropped. Defaults to "position".
* "add_link_html" for custom look of "add"-buttons. Defaults to Django's built-in "+" image icon.
* "delete_link_html" for custom look of "delete"-buttons. Defaults to Django's built-in "x" image icon.
**Use example: **
*admin.py:*
class NameInline(admin.TabularInline):
model = Name
extra = 1
class PersonAdmin(admin.ModelAdmin):
inlines = [NameInline]
class Media:
js = ['js/jquery-1.3.2.min.js', 'js/ui/ui.core.js',
'js/ui/ui.sortable.js', 'js/dynamic_inlines_with_sort.js',]
css = { 'all' : ['css/dynamic_inlines_with_sort.css'], }
admin.site.register(Person, PersonAdmin)
*models.py:*
class Person(models.Model):
year_born = models.PositiveIntegerField(_('year born'), null=True, blank=True)
class Name(models.Model):
profile = models.ForeignKey(Profile, verbose_name=_('profile'))
position = models.PositiveIntegerField(_('position'), default=0)
name = models.CharField(_('name'), max_length=100)
class Meta:
ordering = ('position',)
*dynamic_inlines_with_sort.css:*
/* To make row height of saved items same as others */
.inline-group .tabular tr.has_original td { padding-top:0.5em; }
.inline-group .tabular tr.has_original td.original p { display:none; }
Please post bugs in comments.
- javascript
- dynamic
- admin
- sort
- jquery
- ordering
- inlines
- inline
- tabular
- sortable
5 snippets posted so far.