add
~~~
<div class="form-group">
<label class="control-label col-xs-14 col-sm-2">{:__('内容')}:</label>
<div class="col-xs-12 col-sm-10">
<dl class="fieldtimelist" data-template="eventtpl" data-name="row[guige]">
<dd>
<!-- <ins>{:__('时刻名称')}</ins>-->
<ins>{:__('标题')}</ins>
<ins>{:__('内容')}</ins>
</dd>
<dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></dd>
<!--请注意 dd和textarea间不能存在其它任何元素，实际开发中textarea应该添加个hidden进行隐藏-->
<textarea name="row[guige]" class="form-control hide" cols="30" rows="5" ></textarea>
</dl>
<script id="eventtpl" type="text/html">
<dd class="form-inline">
<!--这一块是input框 将需要的input放在这-->
<ins>
<input class="form-control" name="<%=name%>[<%=index%>][title]" type="text" value="">
</ins>
<ins>
<input class="form-control" name="<%=name%>[<%=index%>][content]" type="text" value="">
</ins>
<!--下面的两个按钮务必保留-->
<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>
</script>
</div>
</div>
~~~
edit $row.guige是一个从控制器传的json集合
~~~
<div class="form-group">
<label class="control-label col-xs-14 col-sm-2">{:__('内容')}:</label>
<div class="col-xs-12 col-sm-10">
<dl class="fieldtimelist" data-template="eventtpl" data-name="row[guige]">
<dd>
<!-- <ins>{:__('时刻名称')}</ins>-->
<ins>{:__('标题')}</ins>
<ins>{:__('内容')}</ins>
</dd>
<dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></dd>
<!--请注意 dd和textarea间不能存在其它任何元素，实际开发中textarea应该添加个hidden进行隐藏-->
<textarea name="row[guige]" class="form-control hide" cols="30" rows="5" >{$row.guige}</textarea>
</dl>
<script id="eventtpl" type="text/html">
<dd class="form-inline">
<ins>
<input class="form-control" name="<%=name%>[<%=index%>][title]" type="text" value="<%=row.title%>">
</ins>
<ins>
<input class="form-control" name="<%=name%>[<%=index%>][content]" type="text" value="<%=row.content%>">
</ins>
<!--下面的两个按钮务必保留-->
<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>
</script>
</div>
</div>
~~~
js
api中添加
~~~
fieldtimelist: function (form) {
//绑定fieldtimelist
if ($(".fieldtimelist", form).size() > 0) {
require(['dragsort', 'template'], function (undefined, Template) {
//刷新隐藏textarea的值
var refresh = function (name) {
var data = {};
var textarea = $("textarea[name='" + name + "']", form);
var container = $(".fieldtimelist[data-name='" + name + "']");
var template = container.data("template");
$.each($("input,select,textarea", container).serializeArray(), function (i, j) {
var reg = /\[(\w+)\]\[(\w+)\]$/g;
var match = reg.exec(j.name);
if (!match)
return true;
match[1] = "x" + parseInt(match[1]);
if (typeof data[match[1]] == 'undefined') {
data[match[1]] = {};
}
data[match[1]][match[2]] = j.value;
});
var result = template ? [] : {};
$.each(data, function (i, j) {
if (j) {
if (!template) {
if (j.key != '') {
result[j.key] = j.value;
}
} else {
result.push(j);
}
}
});
textarea.val(JSON.stringify(result));
};
//监听文本框改变事件
$(document).on('change keyup changed', ".fieldtimelist input,.fieldtimelist textarea,.fieldtimelist select", function () {
refresh($(this).closest(".fieldtimelist").data("name"));
});
//追加控制
$(".fieldtimelist", form).on("click", ".btn-append,.append", function (e, row) {
var container = $(this).closest(".fieldtimelist");
var tagName = container.data("tag") || (container.is("table") ? "tr" : "dd");
var index = container.data("index");
var name = container.data("name");
var template = container.data("template");
var data = container.data();
index = index ? parseInt(index) : 0;
container.data("index", index + 1);
row = row ? row : {};
var vars = {index: index, name: name, data: data, row: row};
var html = template ? Template(template, vars) : Template.render(Form.config.fieldtimelisttpl, vars);
$(html).attr("fieldtimelist-item", true).insertBefore($(tagName + ":last", container));
$(this).trigger("fa.event.appendfieldtimelist", $(this).closest(tagName).prev());
});
//移除控制
$(".fieldtimelist", form).on("click", ".btn-remove", function () {
var container = $(this).closest(".fieldtimelist");
var tagName = container.data("tag") || (container.is("table") ? "tr" : "dd");
$(this).closest(tagName).remove();
refresh(container.data("name"));
});
//渲染数据&拖拽排序
$(".fieldtimelist", form).each(function () {
var container = this;
var tagName = $(this).data("tag") || ($(this).is("table") ? "tr" : "dd");
$(this).dragsort({
itemSelector: tagName,
dragSelector: ".btn-dragsort",
dragEnd: function () {
refresh($(this).closest(".fieldtimelist").data("name"));
},
placeHolderTemplate: $("<" + tagName + "/>")
});
var textarea = $("textarea[name='" + $(this).data("name") + "']", form);
if (textarea.val() == '') {
return true;
}
var template = $(this).data("template");
textarea.on("fa.event.refreshfieldtimelist", function () {
$("[fieldtimelist-item]", container).remove();
var json = {};
try {
json = JSON.parse($(this).val());
} catch (e) {
}
$.each(json, function (i, j) {
$(".btn-append,.append", container).trigger('click', template ? j : {
key: i, value: j
});
});
});
textarea.trigger("fa.event.refreshfieldtimelist");
});
});
}
},
~~~
js add edit中 ~~~
Controller.api.fieldtimelist();
~~~
