如何使用 golang's 模板实现级联下拉菜单 [英] How do I implement cascading dropdown using golang's templates

问题描述

场景:

我有一个级联场景，其中第二个下拉列表中的值取决于第一个.我有布局"、输入"和内部"三个模板.

尝试:

我正在对输入"模板中第一个下拉列表的更改进行 ajax 调用，并坚持处理返回的响应.目前我找到了一种通过替换第二个下拉列表的 html 来修复它的方法.但是，我认为这不是更好的处理方式.我想要一些不需要修改 html 的渲染模板.

请帮助以更好的方式完成任务或指向一些维基.仅标准库

谢谢，

Layout.html:http://play.golang.org/p/LikKy6rf3-

Input.html:http://play.golang.org/p/wM7EpPdXuM

Inner.html:http://play.golang.org/p/xFpInKZfFT

Main.go:http://play.golang.org/p/cxtJU-Lhi1

解决方案

在更高级别上，您有 2 个选择:

• 要么发送下拉列表的所有值(例如作为树)，并在更高级别的下拉列表发生变化时更改第 2 级和第 3 级的值(适合小列表，不适合大数据集)
• Or the one you chose: when selection changes, you make an AJAX call (triggered from onchange) and you populate the list from the results.

详细说明 #2:从 AJAX 调用结果填充列表

您还有两种选择:

• AJAX 调用返回 HTML 调用，您可以简单地使用它来替换 HTML <select> 标记的内部 HTML.

• 或者 AJAX 调用可能只返回数据(例如使用 JSON 编码)，并且 Javascript 代码可以构建列表的内容.

AJAX 返回 HTML

AJAX 调用可能会返回需要替换的完整 HTML 代码作为 的内部 HTML.为了在服务器端实现这一点，您可以创建/分离仅负责生成此 HTML 代码的 HTML 模板，例如:

{{define "innerList"}}{{范围 .}}<option value="{{.Key}}">{{.Text}}</option>{{结尾}}{{结尾}}

你只能像这样执行这个模板:

//tmpl 是你的模板的集合values := ...//加载/构造值tmpl.ExecuteTemplate(w, "innerList", values)

这里的 values 是以下结构的一部分:

type Pair struct {钥匙串文本字符串}

使用 Javascript 构建

内容

AJAX 调用可能会返回一个 JSON 数据结构，一个 value;text 对的数组/列表，您可以从中添加 子标签.>

要将 添加到 标签:

var x = document.getElementById("mySelect");var option = document.createElement("option");option.value = "1234";option.text = "猕猴桃";x.添加(选项)；

所以基本上你需要做的是删除

的当前子项，迭代接收到的列表作为响应并添加一个新的 由每个标签构造而成.

Scenario:

I have a cascade scenario, where values in second dropdown depends upon first. I have three templates "layout", "input" and "inner".

Attempt:

I'm making ajax call on change of first dropdown in "input" template and stuck with handling the response returned. Currently I found a way to fix it by replacing html of second dropdown. But, I think this is not the better way to handle. I want something in line of rendering templates where I do not need to amend html.

please help in acheiving the task in better way or point to some wiki. Only Standard Library

Thanks,

Layout.html: http://play.golang.org/p/LikKy6rf3-

Input.html: http://play.golang.org/p/wM7EpPdXuM

Inner.html: http://play.golang.org/p/xFpInKZfFT

Main.go: http://play.golang.org/p/cxtJU-Lhi1

解决方案

On the higher level you have 2 options:

• Either send all the values for the dropdown lists (e.g. as a tree) and change the values on the 2nd and 3rd level when the dropdown of a higher level changes (suitable for small lists, unsuitable for large dataset)
• Or the one you chose: when selection changes, you make an AJAX call (triggered from onchange) and you populate the list from the results.

Elaborating #2: populating list from the AJAX call result

You also have 2 options to do this:

• Either the AJAX call returns HTML call which you can simply use to replace the inner HTML of the HTML <select> tag.

• Or the AJAX call may only return the data (e.g. encoded using JSON), and a Javascript code can build the content of the list.

AJAX returning HTML

The AJAX call may return the complete HTML code needed to be replaced as the inner HTML of the <select>. To achieve this at server side, you can create/separate the HTML template responsible only to generate the HTML code of this, for example:

{{define "innerList"}}
    {{range .}}
        <option value="{{.Key}}">{{.Text}}</option>
    {{end}}
{{end}}

You can execute only this template like this:

// tmpl is the collection of your templates
values := ... // Load/construct the values
tmpl.ExecuteTemplate(w, "innerList", values)

Here values is a slice of the following structure:

type Pair struct {
    Key string
    Text string
}

Building <select> content with Javascript

The AJAX call may return a JSON datastructure, an array/list of value;text pairs from which you add the <option> child tags yourself.

To add an <option> to a <select> tag:

var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.value = "1234";
option.text = "Kiwi";
x.add(option);

So basically what you need to do is remove current children of the <select>, iterate over the list received as the response and add a new <option> tag constructed from each.

这篇关于如何使用 golang's 模板实现级联下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！