后端django+python
forms.py渲染form表单,字段定义如下:
forms.py
failure_type = forms.CharField(label='故障类型',
widget=forms.TextInput(attrs={'class': 'easyui-combobox', 'placeholder': '拼音首字母索引',
'data-options': mark_safe("valueField: 'value', textField: 'label'")}))
注意到data-options,其内容还需要加上mark_safe避免单引号被转义。
views.py
# 取故障类型
def get_failure_tag(request):
tag = request.POST['tag']
qs = FailureType.objects.filter(procedure=tag, deleted=False)
tags = [{'label': "其他", 'value': 999}]
if qs.count() > 0:
tags.clear()
for q in qs:
m_name = q.name
m_py = pinyin(q.words.replace(',', ' '), style=Style.NORMAL | Style.FIRST_LETTER)
m_py_2 = [''.join(p) for p in m_py]
m_pinyin = ''.join(m_py_2)
tags.append({'label': m_name + '|' + m_pinyin, 'value': q.id})
return HttpResponse(json.dumps(tags), content_type='application/json')
为了字母索引,使用了汉字转拼音,提前使用jieba做了分词再保存到数据库字段。
需要return一个json值。
json数组格式理解,可以看easyui的文档:
<input class="easyui-combobox" data-options="
valueField: 'label',
textField: 'value',
data: [{
label: 'java',
value: 'Java'
},{
label: 'perl',
value: 'Perl'
},{
label: 'ruby',
value: 'Ruby'
}]" />
label,value名字随便写,与data-options一致即可。
index.html
// 故障类型自动完成
function getFailureTag(procedure) {
$.ajax({
url: "{% url 'simple_enroll:get_failure_tag' %}",
type: 'POST',
dataType: 'JSON',
data: {
'tag': $("#{{ form.procedure.id_for_label }}").val(),
},
success: function (data) {
$("#{{ form.failure_type.id_for_label }}").combobox('loadData', data);
}
});
}
注意dataType要指定JSON,然后combox的装载数据方法是loadData。
写一个函数,是为了一个按钮刷新加载故障类型。
使用reload方法也更简单:
$("#{{ form.failure_type.id_for_label }}").combobox('reload','{% url 'simple_enroll:get_failure_tag' %}'); // reload list data using new URL