bootstrap插件之X-editable+django

一.X-editable介绍

X-editable是一款基于Jquery的表格编辑器。通过简单调用即可轻松实现字段编辑效果。与django一起使用，可以在线编辑数据，修改后台信息。

插件地址：

http://vitalets.github.io/x-editable/docs.html  x-editable

用法（以bootstrap3为例）：

下载x-editable，在html模板中添加

具体用法参考：

http://hellocr.w102.hsftp.net/html/qd/201409/11/123.html(bootstrap插件之X-editable在线表格编辑器)

二.与django配合使用

例子1（修改表格中的字段）：

models.py

from django.db import models

# Create your models here.
class IP(models.Model):
    hostname = models.CharField(max_length=50, unique=True)
    ip = models.IPAddressField(unique=True)
    idc = models.CharField(max_length=30, null=True, blank=True)
    port = models.IntegerField(default='22')
    os = models.CharField(max_length=20, default='linux', verbose_name='Operating System')

    def __unicode__(self):
        return self.hostname

views.py

def update(request):
    print "==>", request.POST.get('value'),request.POST.get('pk')
    if request.method == 'POST':
        pk = request.POST.get('pk')
        v = request.POST.get('value')
        try:
            a = IP.objects.get(id=pk)
            a.hostname = v
            a.save()
        except:
            a = IP(hostname=v, id=pk)
            a.save()
    return HttpResponse('yes')

html

    

    
	
	 
    
  
  


    
        #nameage
		{% for ip in ip_list %}
        
            {{ ip.id }}
            {{ ip.hostname }}
            {{ ip.ip }}       
          
		{% endfor %}
        

                    

前端显示：

修改的值后台可以看到：

例子2（修改单个值）：

html模板中添加：

{% for ip in ip_list %}
{{ ip.hostname }}
{% endfor %}


$(function() {    
	$.fn.editable.defaults.mode = 'inline';
    $('#username').editable();
    //或如下方式
    //此种方式
    $('#username').editable({
        type: 'text',
        pk: 1,
        url: '/update/',
        title: 'Enter username'
     });
});

前端显示：

后台同样可以看到修改了的数据。