jQuery MiniUI

标题: 动态添加表单 [打印本页]

作者: manyunlai 时间: 2016-5-12 16:03:15 标题: 动态添加表单

我在一个弹出的mini-window的form中动态添加某些mini-textbox和mini-htmlfile，
怎么控件不能正常显示呢？
请指教，谢谢。

jsp：
<div id="add" class="mini-window" style="width:650px;height:470px">
<iframe name="cs" id="cs" style="display: none"></iframe>
<form action="/fee/sub/tickeMng/othercityticketprice/addSaveData?theme=none" id="form" method="post" target="cs" enctype="multipart/form-data">
<div class="mini-toolbar" style="border-bottom: 0; padding: 0px;">
      <a class="mini-button" iconCls="icon-add" plain="true">新增</a>
      <span class="separator"></span>
      <a class="mini-button" iconCls="icon-remove" plain="true">删除</a>
</div>
<table id=dynamicLine border="1" width="100%">
      <tr>
         <th width="4%"></th>
         <th width="6%">序号</th>
         <th width="40%">文号</th>
         <th width="50%">收费依据文件</th>
      </tr>
</table>
      <div style="text-align:center;padding:10px;">
         <input id="formSubmit" type="image" name="submit" style="display: none; float: left;" />
         <a id="type" name="type" class="mini-hidden"></a>
         <a id="save_button" class="mini-button" iconCls="icon-save" plain="false"  style="width:60px;margin-right:20px;">
         <span class="mini-button-span">保存</span>
      </a>
         <a id="cancel_button" class="mini-button" iconCls="icon-cancel" plain="false"  style="width:60px;">
         <span class="mini-button-span">取消</span>
      </a>
      </div>

</form>
</div>

js：
function addRow(){
var m = 0;
$("#dynamicLine").each(function () {
      m++;
});
var htmlStr = "";
htmlStr += "<tr>";
htmlStr += "<td>";
htmlStr += " <div id='ck" + m + "' name='ck" + m + "' class='mini-checkbox' ></div>";
htmlStr += "</td>";
htmlStr += "<td>";
htmlStr += " <input id='index" + m + "' name='index" + m + "'  class='mini-textbox' readOnly='true' />";
htmlStr += "</td>";
htmlStr += "<td>";
htmlStr += " <input id='add_FileCode" + m + "' name='add_FileCode" + m + "' class='mini-textbox' required='true' style='width:100%;'/>";
htmlStr += "</td>";
htmlStr += "<td>";
htmlStr += " <input id='add_FileNamet" + m + "' name='add_FileNamet" + m + "' class='mini-htmlfile' required='true' style='width:100%;'/>";
htmlStr += "</td>";
htmlStr += "</tr>";
$("#dynamicLine").append(htmlStr);
mini.repaint(document.body);
}

作者: manyunlai 时间: 2016-5-12 16:07:08

因为有文件上传，所以需要form的enctype="multipart/form-data"方式提交，对于mini-datagrid只会用ajax的方式提交数据，不能解决上传文件的问题，所以才想采取上面的方式动态添加表单，实现不确定数量的文件提交。

作者: felt 时间: 2016-5-12 16:22:51

manyunlai 发表于 2016-5-12 16:07
因为有文件上传，所以需要form的enctype="multipart/form-data"方式提交，对于mini-datagrid只会用ajax的方 ...

添加字符串的方式添加控件，添加完成之后，需要调用一下mini.parse()解析

作者: manyunlai 时间: 2016-5-13 09:29:17

felt 发表于 2016-5-12 16:22
添加字符串的方式添加控件，添加完成之后，需要调用一下mini.parse()解析

多谢，调用mini.parse()解析后就能显示了。

再帮我看一下，我想删除选中checkbox所在的tr，
下面的代码怎么进不到alert呢？
function deleteRow() {
$('.mini-checkbox').each(function() {
if ($(this).attr('checked') ==true) {
alert($(this).parent().parent());
}
});
}

作者: felt 时间: 2016-5-13 11:15:44

manyunlai 发表于 2016-5-13 09:29
多谢，调用mini.parse()解析后就能显示了。

再帮我看一下，我想删除选中checkbox所在的tr，

我们的选中又不是通过checked属性控制的

作者: manyunlai 时间: 2016-5-13 13:46:15

felt 发表于 2016-5-13 11:15
我们的选中又不是通过checked属性控制的

那怎么遍历所有选中的mini-checkbox

作者: felt 时间: 2016-5-13 15:03:47

manyunlai 发表于 2016-5-13 13:46
那怎么遍历所有选中的mini-checkbox

miniui控件只能根据name或id获取，你可以设置相同id
var controls=mini.getsbyName(name)
遍历判断control.GetChecked()

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