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