如何将来自服务器的数据设置为此动态形式
How to set the data from server into this dynamic form?
我正在使用这个bootsnipp进行BootStrap.JS来创建动态字段并从表单中捕获数据。
保存后,假设我从服务器以 JSON 形式作为键值对取回数据,如何构建此动态表单以便用户可以再次更新它。
任何示例片段都会有所帮助。
你所
要做的就是编写一些数据传播方法,相当简单,这里有一个快速(来自服务器的数据存储在变量requestData
中,我也删除了不必要的代码):
var requestData = [{"name":"phone0", "value":"890890809"},{"name":"fax1", "value":"1111"},{"name":"skype2", "value":"anonononono"},{"name":"email3", "value":"huhuhuhu@huhuhu.pl"}];
function capitalize(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
(function ($) {
$(function () {
var addFormGroup = function (event) {
[...]
};
var removeFormGroup = function (event) {
[...]
};
var selectFormGroup = function (event) {
[...]
}
var countFormGroup = function ($form) {
[...]
};
var collectData = function(ele) {
[...]
}
var propagateData = function(data){
var $formGroup = $('body').find('.form-group');
$.each(data, function(k,v){
var $formGroupClone = $formGroup.clone();
$formGroupClone.find('.btn-add').toggleClass('btn-success btn-add btn-danger btn-remove').html('–');
$formGroupClone.find('input').val(v.value);
$formGroupClone.find('.concept').text(capitalize(v.name.replace(/[0-9]/g, '')));
$formGroupClone.find('.input-group-select-val').val(v.name.replace(/[0-9]/g, ''));
$formGroupClone.insertBefore($formGroup);
});
}
$(document).on('click', '.btn-add', addFormGroup);
$(document).on('click', '.btn-remove', removeFormGroup);
$(document).on('click', '.dropdown-menu a', selectFormGroup);
propagateData(requestData);
$('#data').click(function(e){
collectData('.cache');
e.preventDefault();
});
});
})(jQuery);
编辑
好吧,所有重置表单的代码都隐藏在传播数据中,您只需要反转它,在您的 HTML 中您应该添加类似这样的东西<a href="#" class="btn btn-warning form-reset" style="margin: 10px;">Reset</a>
然后完整的 js 在这里:
var requestData = [{"name":"phone0", "value":"890890809"},{"name":"fax1", "value":"1111"},{"name":"skype2", "value":"anonononono"},{"name":"email3", "value":"huhuhuhu@huhuhu.pl"}];
function capitalize(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
(function ($) {
$(function () {
var addFormGroup = function (event) {
event.preventDefault();
var $formGroup = $(this).closest('.form-group');
var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
var $formGroupClone = $formGroup.clone();
$(this)
.toggleClass('btn-success btn-add btn-danger btn-remove')
.html('–');
$formGroupClone.find('input').val('');
$formGroupClone.find('.concept').text('Phone');
$formGroupClone.insertAfter($formGroup);
var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', true);
}
};
var removeFormGroup = function (event) {
event.preventDefault();
var $formGroup = $(this).closest('.form-group');
var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') >= countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', false);
}
$formGroup.remove();
};
var selectFormGroup = function (event) {
event.preventDefault();
var $selectGroup = $(this).closest('.input-group-select');
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$selectGroup.find('.concept').text(concept);
$selectGroup.find('.input-group-select-val').val(param);
}
var countFormGroup = function ($form) {
return $form.find('.form-group').length;
};
/* collectData Function~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~/
This function given a group of elements (in classic selector format) will assign each element
the values of the closest fields as a unique name and the user entered value (if any.)
Use the console to see it gather data.
*/
var collectData = function(ele) {
var $tgt = $(ele);
$tgt.each(function(index) {
// $tgt == $(this)
var $fieldNames = $(this).next('.input-group-select-val').val();
var $fieldValues = $(this).closest('.form-group').find('.form-control').val();
// Including index to each $fieldName in order to make each key/value pair unique.
$(this).attr('name', $fieldNames+index);
console.log('name: '+$(this).attr('name'));
$(this).val($fieldValues);
console.log('value: '+$(this).val());
});
}
var propagateData = function(data){
var $formGroup = $('body').find('.form-group');
$.each(data, function(k,v){
var $formGroupClone = $formGroup.clone();
$formGroupClone.find('.btn-add').toggleClass('btn-success btn-add btn-danger btn-remove').html('–');
$formGroupClone.find('input').val(v.value);
$formGroupClone.find('.concept').text(capitalize(v.name.replace(/[0-9]/g, '')));
$formGroupClone.find('.input-group-select-val').val(v.name.replace(/[0-9]/g, ''));
$formGroupClone.insertBefore($formGroup);
});
}
var clearData = function(elms){
$(elms).not(':last').remove();
var $el = $(elms);
$el.find('input').val('');
$el.find('.concept').text('Phone');
$el.find('.input-group-select-val').val('phone');
}
$(document).on('click', '.btn-add', addFormGroup);
$(document).on('click', '.btn-remove', removeFormGroup);
$(document).on('click', '.dropdown-menu a', selectFormGroup);
propagateData(requestData);
// Clicking the #data button will call the collectData('.cache') function.
$('#data').click(function(e){
collectData('.cache');
e.preventDefault();
});
$('.form-reset').click(function(e){
clearData('.multiple-form-group');
e.preventDefault();
});
});
})(jQuery);
相关文章:
- 使用AngularJs时,如何在img标记具有src-attr时设置数据src
- angular.js我如何设置数据什么是响应值
- Highcharts如何显示在设置数据时加载动画
- Ajax请求返回模块设置数据
- 如何在Calendario中从JSON设置数据
- 控制器在设置数据之前获取出厂数据
- 为什么jQuery验证“;远程:“;验证需要一个函数来设置数据值
- 是否可以在CSS中为JS设置数据,以了解某些媒体查询正在应用
- 动态设置数据量属性的值
- 通过后端c#在javascript文件中设置数据
- Sencha Touch 创建无法在单击时销毁弹出窗口 Container.It 创建多个弹出窗口并创建设置数据值的错误
- 无法设置 CKEditor 值;设置数据失败
- 如何在Meteor上使用IronRouter在操作中设置数据
- 解析云 - 在从云返回数据之前设置数据的属性
- 在具有跨源的 iframe 中设置数据属性值
- Angular2:如何在输入元素上动态设置数据绑定变量
- 设置数据样式并使用javascript将其导出为XLS/CSV/PDF
- 关于在 Vue.js 中设置数据对象属性的最佳实践
- 为包定义的模板设置数据上下文
- 如何设置数据幻灯片到,就像我为每个.carousel-indicators li设置id一样