我正在开发 django 项目,并且已成功将其与 jQuery 数据表显示集成(这是一个通用示例,我的代码稍长且更具体,但这是重要部分):
模板:
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/employee_table/"
} );
} );
</script>
<table id='example'>
<thead>
<th>name</th>
<th>state</th>
<th>email</th>
<th>registration date</th>
<th>projects</th>
</thead>
<tbody>
<td colspan="5" class="dataTables_empty">Loading data from server</td>
</tbody>
</table>
服务器端:
def main_view(request):
return render_to_response('index.html')
def datatables_view(request):
start = request.GET['iDisplayStart']
length = request.GET['iDisplayLength']
query = Employee.objects.all()
if request.GET.has_key('sSearch'):
# filtering...
query = query[start:start+length]
response = ["aaData": [(q.name, q.state, q.email_disp(), q.regdate_disp(), q.projects_disp()) for q in query]]
# return serialized data
这很顺利。现在我想允许我的用户就地编辑数据。jEditable 插件可以工作,但它存在一些问题:
email_disp 是一个根据内容为电子邮件着色的函数(例如,它在字段周围添加 html 标签,因此如果它是 gmail,则文本颜色为绿色)。当我想用 jEditable 编辑它时,它还会向我显示标签,这不太好。
regdate_disp 是一个简单地以特定方式输出注册日期和时间的函数。但是,当人们编辑此 td 时,我希望他们看到两个不同的输入 - 一个用于日期(即 jQuery 日期选择器),一个用于时间(只是一个规则文本字段)。
每个员工都有多个项目(这是一个多对多关系),projects_disp 函数执行以下操作:return ', '.join(Employee.projects.all())。但是,在编辑此字段时,我认为最好的显示是下拉清单。
如您所见,jEditable 的简单功能并没有真正帮助我。我认为解决这个问题的理想方法是在表格的每一行旁边都有一个按钮,单击该按钮时,将向服务器发送这一行,并返回一个自定义输入数组(如 aaData)以替换每个 td。该按钮将更改为保存图标,并且在第二次单击时将重新收集数据。
但是,我真的不太擅长 javascript,我不知道该怎么做。任何帮助或完整的示例将不胜感激(包括如何在不破坏任何内容的情况下将解决方案与数据表集成)。