jQuery MiniUI

标题: 关于复制form表单 [打印本页]

作者: MrArthur 时间: 2014-7-15 11:16:52 标题: 关于复制form表单

本帖最后由 MrArthur 于 2014-7-15 13:22 编辑

<div  class="mini-panel panel2" title="内存相关信息"  style="width:23%;height:300px;float: left;margin:2px 7px"
            showToolbar="true" showCollapseButton="false" showFooter="false" allowResize="false" collapseOnTitleClick="true">
         
         <div property="toolbar" >
            
            <a class="mini-button memorySaveBtn" iconCls="icon-save" >保存</a>
            <a class="mini-button" iconCls="icon-edit">编辑</a>
         </div>
         <div name="memoryForms" method="post">
            <table>
                  <tr>
                     <th>名称：</th>
                     <th>
                        <input  name="p.Name"  class="mini-textbox"  />
                     </th>
                  </tr>
            。。。。。。
            </table>
         </div>
      </div>
      <div  id="otherMemory"></div>

以上面代码为模板  克隆表单， $("#.panel2").clone(true).appendTo($("#otherMemory"));

并为form 添加id属性

然后  为按钮添加  onclick事件  执行
                  var form = new mini.Form("#memoryForm" + num);//取得表单
                  var data = form.getData(true); //我在克隆的表单中输入数据然后运行js data也取不到数据
                  data = form.getData();
但是为什么只有模板能够取得data.p,而克隆的却取不到呢

下面是我在示例上改的一段代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>数据验证</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="../demo.css" rel="stylesheet" type="text/css" />

<script src="../../scripts/boot.js" type="text/javascript"></script>

</head>
<body  id="otherMemory">
<h1>数据验证</h1>

<div name="form1">
<table>
      <tr>
         <td><label for="username$text">帐号：</label></td>
         <td>
            <input name="username" vtype="email" class="mini-textbox" required="true" requiredErrorText="帐号不能为空"/>

         </td>
      </tr>
      <tr>
         <td><label for="pwd$text">密码：</label></td>
         <td>
            <input name="pwd" class="mini-password" vtype="minLength:5" required="true" minLengthErrorText="密码不能少于5个字符" />

         </td>
      </tr>
      <tr>
         <td></td>
         <td>
            <input value="Login" type="button" />
         </td>
      </tr>
</table>
</div>

<script type="text/javascript">
      mini.parse();

      $("div[name='form1']").clone(true).appendTo($("#otherMemory"));
      $("div[name='form1']").eq(0).attr("id", "form0");
      $("div[name='form1']").eq(1).attr("id", "form1");

      function submitForm() {

         var form = new mini.Form("#form1");

         form.validate();
         if (form.isValid() == false) return;

         //提交数据
         var data = form.getData();
         var json = mini.encode(data);
         alert("提交成功"+data.pwd);
      }

</script>

<div class="description">
      <h3>Description</h3>
      <p>
         监听处理表单控件的"validation"事件。在此验证事件函数中，可以对控件值做任意逻辑规则的验证。
      </p>
      <p>使用Form控件的validate方法，可以对表单元素之内的所有控件进行批量验证。</p>
</div>
</body>
</html>

一样的问题不知道怎么解决  感谢大神了先

我觉得应该是clone 之后没有加载上class的原因请问有办法解决么

作者: felt 时间: 2014-7-15 13:22:39

你这样克隆出来的只是miniui已经解析到界面上的html，他不是miniui控件，只是miniui控件结构一样的HTML而已。

作者: MrArthur 时间: 2014-7-15 13:26:37

felt 发表于 2014-7-15 13:22
你这样克隆出来的只是miniui已经解析到界面上的html，他不是miniui控件，只是miniui控件结构一样的HTML而 ...

目前状况是我需要访问activeObject来获得一些数据，所以需要js来控制页面表单的数量和内容，请问有什么建议或者解决办法么么？

作者: felt 时间: 2014-7-15 13:29:35

MrArthur 发表于 2014-7-15 13:26
目前状况是我需要访问activeObject来获得一些数据，所以需要js来控制页面表单的数量和内容，请问有什么建 ...

动态生成html,加载页面之后，再调用mini.parse()解析成miniui控件

作者: MrArthur 时间: 2014-7-15 14:02:19

felt 发表于 2014-7-15 13:29
动态生成html,加载页面之后，再调用mini.parse()解析成miniui控件

你的意思是我先clone $("#.panel2").clone(true).appendTo($("#otherMemory"));

然后 mini.parse(); 么？
我试试先

作者: felt 时间: 2014-7-15 14:14:26

MrArthur 发表于 2014-7-15 14:02
你的意思是我先clone $("#.panel2").clone(true).appendTo($("#otherMemory"));

然后 mini.parse() ...

$("#.panel2").clone(true)
你这样获取的是已经解析完的结构，已经不是可以解析成MiniUI控件的html了
var html='<input class="mini-textbox" />'
$(html).appendTo($("#outerMemory")
mini.parse(html)

作者: MrArthur 时间: 2014-7-15 14:23:01

felt 发表于 2014-7-15 14:14
$("#.panel2").clone(true)
你这样获取的是已经解析完的结构，已经不是可以解析成MiniUI控件的html了
var ...

恩恩谢谢明白你的意思了,这就去试试
但是这样增加控件还好，增加表单有点。。。
目前也只有这种解决办法了。。。

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)