如何使用Golang的模板实现级联下拉菜单?

huangapple go评论98阅读模式
英文:

How do I implement cascading dropdown using golang's templates

问题

场景:

我有一个级联场景,第二个下拉菜单的值取决于第一个下拉菜单。我有三个模板:“layout”、“input”和“inner”。

尝试:

我在“input”模板中对第一个下拉菜单的更改进行了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

英文:

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

答案1

得分: 1

在更高的层次上,你有两个选择:

  • 要么发送所有下拉列表的值(例如作为树形结构),并在更高级别的下拉列表更改时更改第二级和第三级的值(适用于小型列表,不适用于大型数据集)
  • 要么选择你选择的方法:当选择改变时,你发起一个 AJAX 调用(从 onchange 触发),并从结果中填充列表。

关于选项2的详细说明:从 AJAX 调用结果填充列表

你还有两个选项可以实现这个:

  • 要么 AJAX 调用返回 HTML 代码,你可以简单地用它来替换 HTML <select> 标签的内部 HTML。

  • 要么 AJAX 调用可能只返回数据(例如使用 JSON 编码),然后 JavaScript 代码可以构建列表的内容。

AJAX 返回 HTML

AJAX 调用可以返回需要替换为 <select> 标签内部 HTML 的完整 HTML 代码。为了在服务器端实现这一点,你可以创建/分离只负责生成此 HTML 代码的 HTML 模板,例如:

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

你可以像这样执行这个模板:

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

这里的 values 是以下结构的切片:

type Pair struct {
    Key string
    Text string
}

使用 JavaScript 构建 <select> 内容

AJAX 调用可以返回一个 JSON 数据结构,一个由 value;text 对组成的数组/列表,你可以自己添加 <option> 子标签。

要向 <select> 标签添加一个 <option>

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

所以基本上你需要做的是删除 <select> 的当前子元素,遍历作为响应接收到的列表,并从每个列表项构建一个新的 <option> 标签。

英文:

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.

huangapple
  • 本文由 发表于 2015年4月8日 17:03:20
  • 转载请务必保留本文链接:https://go.coder-hub.com/29510296.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定