easyui combox 动态加载数据

后端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

但是得使用get方式传递类型值。
easyui combox 动态加载数据_第1张图片

你可能感兴趣的:(电脑网络,Python)