flutter - 使用动态行构建表单
问题描述
如何使颤振小部件等同于我下面的 html5 小部件?
在我的html中,我有一个表格形式的表格,其中只出现第一行,然后用户可以添加他想要的任何行,(并且可以删除他想要的任何行,除非它是表单中唯一的行)如显示:
我正在使用的代码是:
<script>
function deleteRow(row) {
var i = row.parentNode.parentNode.rowIndex - 1; // this -> td -> tr // -1 because the first row is used for header
var tbl = document.querySelector('#dataTable');
if(tbl && tbl.rows.length > 1) {
tbl.deleteRow(i);
Array.from(tbl.rows).forEach((row, index) => {
row.cells[0].innerHTML = index + 1;
});
}
}
function insRow(row) {
var i = row.parentNode.parentNode.rowIndex - 1; // this -> td -> tr // -2 because the first row is used for header
var tbl = document.querySelector('#dataTable');
var row = document.createElement('tr');
row.innerHTML=`
<th></th>
<td><input size=25 type="text" name="color1" /></td>
<td><input size=25 type="text" name="color2" ></td>
<td><i class="fas fa-edit" onclick="insRow(this)"></i></td>
<td><i class="fas fa-eraser" onclick="deleteRow(this)"></i></td>
`;
var len = tbl.rows.length;
row.cells[0].innerHTML = len + 1;
tbl.insertBefore(row, tbl.children[i+1]);
Array.from(tbl.rows).forEach((row, index) => {
row.cells[0].innerHTML = index + 1;
});
//tbl.appendChild(row);
}
</script>
表单本身是用以下 html 制作的
<form method="POST">
<fieldset>
<legend>توزيع مبلغ البيان على طلبات الشراء</legend>
<table>
<thead>
<tr>
<th>التسلسل</td>
<th>رقم طلب الشراء</td>
<th>قيمة فاتورة طلب الشراء</td>
<th colspan="2">إضافه/حذف</td>
</tr>
</thead>
<tbody id="dataTable">
<tr>
<th>1</th>
<td><input size=25 type="text" name="color1" /></td>
<td><input size=25 type="text" name="color2" /></td>
<td colspan="2"><i class="fas fa-edit" onclick="insRow(this)"></i></td>
</tr>
</tbody>
</table>
</fieldset>
<br/>
<input dir="ltr" type="submit" value="SEND إرسال">
</form>
该表单从 GO 代码执行为:
// ContactDetails ...
type ContactDetails struct {
Email string
Subject string
Message string
Color1 []string
Color2 []string
}
// ReturnedResult ...
type ReturnedResult struct {
Result bool `json:"result"`
Message string `json:"message"`
}
func index(w http.ResponseWriter, r *http.Request) {
tmpl := template.Must(template.ParseFiles(fmt.Sprintf("%v", "formen.html"))) // index.html
if r.Method != http.MethodPost {
tmpl.Execute(w, nil)
return
}
r.ParseForm()
fmt.Println(r.Form) // print information on server side.
fmt.Println("path", r.URL.Path)
fmt.Println("scheme", r.URL.Scheme)
for k, v := range r.Form {
fmt.Println("key:", k)
fmt.Println("val:", v)
}
details := ContactDetails{
Email: r.FormValue("email"),
Subject: r.FormValue("subject"),
Message: r.FormValue("message"),
Color1: r.Form["color1"],
Color2: r.Form["color2"],
}
fmt.Printf("Post from website! r.PostFrom = %v\n", r.PostForm)
fmt.Printf("Details = %v\n", details)
//r.FormValue("username")
fmt.Println()
// do something with details
sheetID := "AKfycbxfMucXOzX15tfU4errRSAa9IzuTRbHzvUdRxzzeYnNA8Ynz8LJuBuaMA/exec"
url := "https://script.google.com/macros/s/" + sheetID + "/exec"
bytesRepresentation, err := json.Marshal(details)
if err != nil {
log.Fatalln(err)
}
resp, err := http.Post(url, "application/json", bytes.NewBuffer(bytesRepresentation))
if err != nil {
log.Fatalln(err)
}
// read all response body
data, _ := ioutil.ReadAll(resp.Body)
// close response body
resp.Body.Close()
webReturn := ReturnedResult{}
if err := json.Unmarshal([]byte(data), &webReturn); err != nil {
panic(err)
}
fmt.Println(webReturn.Message)
webReturn.Message = strings.ReplaceAll(webReturn.Message, "&export=download", "")
//tmpl.Execute(w, struct{ Success bool }{webReturn.Result})
tmpl.Execute(w, webReturn)
}