mirror of https://gitee.com/karson/fastadmin.git
fieldlist增加Table布局方式
parent
938671cf2b
commit
1ee56b58fd
|
|
@ -1,7 +1,8 @@
|
|||
define(['jquery', 'bootstrap', 'upload', 'validator'], function($, undefined, Upload, Validator) {
|
||||
var Form = {
|
||||
config: {
|
||||
fieldlisttpl: '<dd class="form-inline"><input type="text" name="<%=name%>[<%=index%>][key]" class="form-control" value="<%=row.key%>" size="10" /> <input type="text" name="<%=name%>[<%=index%>][value]" class="form-control" value="<%=row.value%>" /> <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span> <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span></dd>'
|
||||
fieldlisttpl: '<dd class="form-inline"><input type="text" name="<%=name%>[<%=index%>][key]" class="form-control" value="<%=row.key%>" size="10" /> <input type="text" name="<%=name%>[<%=index%>][value]" class="form-control" value="<%=row.value%>" /> <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span> <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span></dd>',
|
||||
tablelisttpl: '<tr><td><input type="text" name="<%=name%>[<%=index%>][key]" class="form-control" value="<%=row.key%>" size="10" /></td><td><input type="text" name="<%=name%>[<%=index%>][value]" class="form-control" value="<%=row.value%>" /></td><td><span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span> <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span></td></tr>'
|
||||
},
|
||||
events: {
|
||||
validator: function(form, success, error, submit) {
|
||||
|
|
@ -38,7 +39,8 @@ define(['jquery', 'bootstrap', 'upload', 'validator'], function ($, undefined, U
|
|||
return $msgbox;
|
||||
},
|
||||
valid: function(ret) {
|
||||
var that = this, submitBtn = $(".layer-footer [type=submit]", form);
|
||||
var that = this,
|
||||
submitBtn = $(".layer-footer [type=submit]", form);
|
||||
that.holdSubmit(true);
|
||||
submitBtn.addClass("disabled");
|
||||
//验证通过提交表单
|
||||
|
|
@ -298,12 +300,13 @@ define(['jquery', 'bootstrap', 'upload', 'validator'], function ($, undefined, U
|
|||
textarea.val(JSON.stringify(result));
|
||||
};
|
||||
//监听文本框改变事件
|
||||
$(document).on('change keyup', ".fieldlist input,.fieldlist textarea,.fieldlist select", function () {
|
||||
$(document).on('blur change keyup', ".fieldlist input,.fieldlist textarea,.fieldlist select", function() {
|
||||
refresh($(this).closest("dl").data("name"));
|
||||
});
|
||||
//追加控制
|
||||
$(".fieldlist", form).on("click", ".btn-append,.append", function(e, row) {
|
||||
var container = $(this).closest("dl");
|
||||
var layout = container.data("layout");
|
||||
var index = container.data("index");
|
||||
var name = container.data("name");
|
||||
var template = container.data("template");
|
||||
|
|
@ -312,25 +315,48 @@ define(['jquery', 'bootstrap', 'upload', 'validator'], function ($, undefined, U
|
|||
container.data("index", index + 1);
|
||||
var row = row ? row : {};
|
||||
var vars = { index: index, name: name, data: data, row: row };
|
||||
if (layout == 'table') {
|
||||
var table = $(container).children('table');
|
||||
var html = template ? Template(template, vars) : Template.render(Form.config.tablelisttpl, vars);
|
||||
$(html).insertAfter($(table).find("tr:last"));
|
||||
$(this).trigger("fa.event.appendfieldlist", $(table).find("tr:last"));
|
||||
} else {
|
||||
var html = template ? Template(template, vars) : Template.render(Form.config.fieldlisttpl, vars);
|
||||
$(html).insertBefore($(this).closest("dd"));
|
||||
$(this).trigger("fa.event.appendfieldlist", $(this).closest("dd").prev());
|
||||
}
|
||||
});
|
||||
//移除控制
|
||||
$(".fieldlist", form).on("click", "dd .btn-remove", function () {
|
||||
$(".fieldlist", form).on("click", "dd .btn-remove,tr .btn-remove", function() {
|
||||
var container = $(this).closest("dl");
|
||||
var layout = container.data("layout");
|
||||
if (layout == 'table') {
|
||||
$(this).closest("tr").remove();
|
||||
}else{
|
||||
$(this).closest("dd").remove();
|
||||
}
|
||||
refresh(container.data("name"));
|
||||
});
|
||||
//拖拽排序
|
||||
$("dl.fieldlist", form).dragsort({
|
||||
itemSelector: 'dd',
|
||||
$("dl.fieldlist", form).each(function(index, element) {
|
||||
var layout = $(this).data("layout");
|
||||
var itemSelector = 'dd';
|
||||
var placeHolderTemplate = "<dd></dd>";
|
||||
if (layout == 'table') {
|
||||
itemSelector = 'tr';
|
||||
placeHolderTemplate = "<tr></tr>";
|
||||
element = $(element).children('table')
|
||||
}
|
||||
$(element).dragsort({
|
||||
itemSelector: itemSelector,
|
||||
dragSelector: ".btn-dragsort",
|
||||
dragEnd: function() {
|
||||
refresh($(this).closest("dl").data("name"));
|
||||
},
|
||||
placeHolderTemplate: "<dd></dd>"
|
||||
placeHolderTemplate: placeHolderTemplate
|
||||
});
|
||||
});
|
||||
|
||||
//渲染数据
|
||||
$(".fieldlist", form).each(function() {
|
||||
var container = this;
|
||||
|
|
@ -342,8 +368,7 @@ define(['jquery', 'bootstrap', 'upload', 'validator'], function ($, undefined, U
|
|||
var json = {};
|
||||
try {
|
||||
json = JSON.parse(textarea.val());
|
||||
} catch (e) {
|
||||
}
|
||||
} catch (e) {}
|
||||
$.each(json, function(i, j) {
|
||||
$(".btn-append,.append", container).trigger('click', template ? j : {
|
||||
key: i,
|
||||
|
|
|
|||
Loading…
Reference in New Issue