一个多行多列的表格大表单数据,并且行数是不确定的会根据用户自己添加行数确定,怎么实现很好的获取所有提交数据,我准备使用 ajax 提交数据,如何设计实现?

2016-06-19 21:15:40 +08:00
 scott123
				<div class="col-md-11 form-table">
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>
									Category
								</th>
								<th>
									Model
								</th>
								<th>
									Asset_ID
								</th>
								<th>
									SN
								</th>
								<th>
									Qty
								</th>
							</tr>
						</thead>
						<tbody id="suggest1">
							<tr>
								<td>
									<input type="text" name=""  value="" />
								</td>
								<td>
									<input type="text" name="" id="" value="" />
								</td>
								<td>
									<input type="text" />
								</td>
								<td>
									<input type="text" />
								</td>
								<td>
									<input type="text" />
								</td>
							</tr>
								<td>
									<input type="text" name="" id="" value="" />
								</td>
								<td>
									<input type="text" name="" id="" value="" />
								</td>
								<td>
									<input type="text" />
								</td>
								<td>
									<input type="text" />
								</td>
								<td>
									<input type="text" />
								</td>
							</tr>
                    
                        
						</tbody>
					</table>
				</div>
		</div>
4218 次点击
所在节点    Python
8 条回复
hrong
2016-06-19 22:14:12 +08:00
看你用什么后端了?前端就 jqgrid?
murmur
2016-06-19 22:44:39 +08:00
现在用 jquery easyui 的很多吧 ie6-ie11 兼容性都很好 企业开发几乎首选了
rekulas
2016-06-19 22:50:26 +08:00
设计什么?动态添加表单、 ajax 数据提交教程一大把有什么好需要设计的。。
scott123
2016-06-19 22:55:53 +08:00
我现在不太清楚的是,我有一个固定四列,动态 n 行的 input 表格,当用户将数据填满的时候,提交数据的时候,我以怎么方式,把每一行的数据安装对应的列的值的取得,而且还是安装顺序的,然后我会存在一个字典里,然后我会用 ajax ,将数据创给后台。有木有相关的代码参考一下。
jugelizi
2016-06-19 22:59:45 +08:00
所以你是不知道 input name="field[]" ?
scott123
2016-06-19 23:05:32 +08:00
我一个数据表格可能有三四十个 input ,像我上面写的,都是相同规律的,没有什么简单的方法?类似使用 each 方法搞个双循环,写一个函数可以直接获得数据到一个字典。
xmh51
2016-06-19 23:12:48 +08:00
@scott123 jquery 不是能获得当前节点下所有的 input 元素吗? 遍历不行吗?
scott123
2016-06-23 08:28:11 +08:00
function GetReceivedItemData(){
var item_time= 0;
var item = {
'category':'',
'model':'',
'asset_id':'',
'sn':'',
'qty':'',
};
var item_list_array={'item_data':[]};
$('#suggest1 input').each(function (index, value) {
//console.log('div' + index + ':' + $(this).val());
if(index%5==0){
item['category']=$(this).val();
}
if(index%5==1){
item['model']=$(this).val();
}
if(index%5==2){
item['asset_id']=$(this).val();
}
if(index%5==3){
item['sn']=$(this).val();
}
if(index%5==4){
item['qty']=$(this).val();
if(is_valid_data(item)){
item_list_array['item_data'].push(JSON.stringify(item));
item_time+=1;
}
else{
if(is_empty_data(item,this)){
return true;
}
else{
alert('The '+[item_time+1]+' item data is invalid.');
return false;
}
};
}
});
//console.log(item_list_array['item_data']);
return item_list_array;
}

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/286880

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX