提升 Ajax 多选框

Posted 2023-03-04

【中文标题】提升 Ajax 多选框

【英文标题】：Lift Ajax multi select box

【发布时间】：2012-02-19 21:50:31

【问题描述】：

我是 scala 和 lift 的新手，我想用一些 ajax 制作一个表单。 因此主要形式来自正常的有状态的sn-p和中间内容 附有一些 ajax 形式（在另一个 sn-p 中有内容但是 不是有状态的，因为我不能在有状态中使用 ValueCell）。

在那里我想动态添加任何没有。多选框为 用户需要按“添加”按钮。

我通过选择 Shtml.ajaxSelect() 来进行正常的下拉选择 并保存在 ValueCell 中，也保存在会话上下文中。

这里我可以使用 ValueCell 来存储数据，因为 ajaxSelect 支持 阿贾克斯。但是在多选中没有“ajaxMultiSelect”？？所以我需要 从那些动态添加的多选框中检索数据 在整个表单中按下提交按钮时到我的表单变量。

http://seventhings.liftweb.net/wiring - 这个例子是我的指南 我的任务。他们在这里使用动态添加文本字段。但我想补充 点击提交按钮时多选并保存数据。

请帮助我。如果你想进一步澄清，我可以给。

谢谢大家...

【问题讨论】：

您能否提供一些代码并告诉我们它已经做了什么以及应该做什么？

如我之前所说，举个例子会很有用。

【参考方案1】：

如果您只需要在用户按下“保存”按钮时将其值发送到服务器的多选，那么 AJAX 表单上的一堆 SHtml.multiselect 对象就足够了。

另一方面，如果您每次用户更改多选的值时都需要 AJAX 调用，那么您可能必须使用相同的SHtml.multiselect，但添加一个 onchange 事件处理程序，该处理程序调用一个包含ajaxCall。

这里创建了一个 javascript 函数 doCallback() 并将其添加到页面 #placeholder。这会在服务器上调用commandCallback(commandString)。

val log = SHtml.ajaxCall(JsRaw("commandString"), commandCallback _)._2.cmd
val f = JsCmds.Function("doCallback", List[String](), log)
("#placeholder" #> JsCmds.Script(f)).apply(ns)

【讨论】：

嗨，唐纳德，我知道这是我正在评论的旧帖子。但是我的情况如下。我正在尝试解决与上面的海报完全相同的问题。我想在 onChange 上捕获选择的值（在多选中），以便我可以进行一些处理，例如编辑该选择的值，然后更新多选内容。但是，我无法在常规 LiftWeb 多选中使用您的功能。请建议我能做什么。

【参考方案2】：

我知道这是一个较老的问题，但这是我的镜头（因为在最新的快照中似乎仍然没有 ajax multiSelect），我可以看到它派上用场

您可以基于常规的 ajaxSelect。主要变化是：

您必须提取所有值并提交它们（表单提交只是常规的 urlEncoded postParams），但如果您只是看一下如何执行此操作，这是最不清楚的。 您必须将默认值更改为 Seq[String]（这还需要更改测试以查看是否应设置 selected）

您必须决定是否要在更改或模糊时进行回调。在我的示例中，我会将其设为 onblur，但您可以将其设为可配置。

  private def ajaxMultiSelect_*(opts: Seq[(String, String)], deflt: Seq[String], jsFunc: Box[Call], func: AFuncHolder, attrs: ElemAttr*): Elem = 
    val optionSelect =
    """function(funcName, element) 
      |  var postData = ""
      |  var i = 0;
      |  var k = 0;
      |  for (k = 0; k < element.length; k++) 
      |   if (element[k].selected) 
      |     if (i == 0)
      |       postData = funcName + '=' + encodeURIComponent(element[k].value);
      |     else 
      |       postData = postData + '&' + funcName + '=' + encodeURIComponent(element[k].value);
      |     
      |     i++;
      |   
      |  
      |  return postData;
      |""".stripMargin

    val raw = (funcName: String, value: String) => JsRaw(optionSelect + "('" + funcName + "'," + value + ")")
    val key = formFuncName

    val vals = opts.map(_._1)
    val testFunc = LFuncHolder(in => in.filter(v => vals.contains(v)) match case Nil => false case xs => func(xs), func.owner)
    fmapFunc((testFunc)) 
      funcName =>
          (attrs.foldLeft(<select multiple="multiple">opts.flatMap case (value, text) => (<option value=value>text</option>) % selected(default.contains(value)))</select>)(_ % _)) %
              ("onblur" -> (jsFunc match 
                  case Full(f) => JsCrVar(key, JsRaw("this")) & deferCall(raw(funcName, key), f)
                  case _ => makeAjaxCall(raw(funcName, "this"))
              ))
    
 

这应该可以工作，但我没有测试它。如果我有时间，我会测试它，看看是否可以将它（及其重载）添加到 master 分支。

祝你好运！

-奥斯汀