一.X-editable介紹
X-editable是一款基於Jquery的表格編輯器。通過簡單調用即可輕鬆實現字段編輯效果。與django一起使用，可以在線編輯數據，修改後臺信息。
插件地址：
http://vitalets.github.io/x-editable/docs.html x-editable
用法（以bootstrap3爲例）：
下載x-editable，在html模板中添加
<link href="bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"> <script src="bootstrap-editable/js/bootstrap-editable.js"></script>
具體用法參考：
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
<!DOCTYPE html>
<!-- saved from url=(0041)http://v3.bootcss.com/examples/jumbotron/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bootstrap</title>
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/bootstrap/Font-Awesome-master/css/font-awesome.css" rel="stylesheet">
<link href="/static/bootstrap/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet">
</head>
<body>
<div style="margin: 150px">
<table id="users" class="table table-bordered table-condensed">
<tr><th>#</th><th>name</th><th>age</th></tr>
{% for ip in ip_list %}
<tr>
<td>{{ ip.id }}</td>
<td><a href="#" id="username" data-pk="{{ ip.id }}" data-url="/update/">{{ ip.hostname }}</a></td>
<td>{{ ip.ip }}</td>
</tr>
{% endfor %}
</table>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/bootstrap/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script>
$(function() {
$.fn.editable.defaults.mode = 'inline';
$('#users a').editable();
//或如下方式
//此種方式
$('#users a').editable({
type: 'text',
url: '/update/',
title: 'Enter username'
});
});
</script>
</body></html>前端顯示：
修改的值後臺可以看到：
例子2（修改單個值）：
html模板中添加：
<!--添加數據-->
{% for ip in ip_list %}
<a href="#" id="username" data-type="text" data-pk="1" data-url="/update/" data-title="Enter username">{{ ip.hostname }}</a>
{% endfor %}
<!--jquery-->
$(function() {
$.fn.editable.defaults.mode = 'inline';
$('#username').editable();
//或如下方式
//此種方式
$('#username').editable({
type: 'text',
pk: 1,
url: '/update/',
title: 'Enter username'
});
});前端顯示：
後臺同樣可以看到修改了的數據。