新年
快乐

垃圾堆中的精品

垃圾堆中的精品

Fastadmin键值对嵌入图片选择器

本文实现了在Fastadmin下,使用键值对的方式,嵌入了图片选择器。方便快捷。

先上效果图

在模版文件中添加具体代码如下:

{case imgsurl}
<dl {$item.extend_html} class="fieldlist imgsurl" data-name="row[{$item.name}]" data-template="{$item.name}">
	<dd>
		<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>
	<textarea name="row[{$item.name}]" class="form-control hide" cols="30" rows="5">{$item.value|htmlentities}</textarea>
</dl>
<script type="text/html" id="{$item.name}">
	<dd class="form-inline">
		<input type="text" name="row[{$item.name}][<%=index%>][url]" value="<%=row.url%>" class="form-control"/>
		<div class="form-control-static">
			<input id="c-{$item.name}-img-<%=index%>" class="form-control" size="20" name="row[{$item.name}][<%=index%>][img]" type="text" value="<%=row.img%>" style="width: 150px;">
			<span><button type="button" id="faupload-{$item.name}-img-<%=index%>" class="btn btn-danger faupload" data-input-id="c-{$item.name}-img-<%=index%>" data-multiple="false"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
			<span><button type="button" id="fachoose-{$item.name}-img-<%=index%>" class="btn btn-primary fachoose" data-input-id="c-{$item.name}-img-<%=index%>" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
			<span class="msg-box n-right" for="c-{$item.name}-img-<%=index%>"></span>
		</div>
		<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>
{/case}
{case channel}
<dl {$item.extend_html} class="fieldlist channel" data-name="row[{$item.name}]" data-template="{$item.name}">
	<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>
	<textarea name="row[{$item.name}]" class="form-control hide" cols="30" rows="5">{$item.value|htmlentities}</textarea>
</dl>
<script type="text/html" id="{$item.name}">
	<dd class="form-inline">
		<input type="text" name="row[{$item.name}][<%=index%>][title]" value="<%=row.title%>" class="form-control"/>
		<input type="text" name="row[{$item.name}][<%=index%>][url]" value="<%=row.url%>" class="form-control" style="width:110px"/>
		<div class="form-control-static">
			<input id="c-{$item.name}-img-<%=index%>" class="form-control" size="20" name="row[{$item.name}][<%=index%>][img]" type="text" value="<%=row.img%>" style="width: 150px;">
			<span><button type="button" id="faupload-{$item.name}-img-<%=index%>" class="btn btn-danger faupload" data-input-id="c-{$item.name}-img-<%=index%>" data-multiple="false"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
			<span><button type="button" id="fachoose-{$item.name}-img-<%=index%>" class="btn btn-primary fachoose" data-input-id="c-{$item.name}-img-<%=index%>" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
			<span class="msg-box n-right" for="c-{$item.name}-img-<%=index%>"></span>
		</div>
		<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>
{/case}

然后在对应js中补充绑定事件:

var form = $("form[role=form]");
$(".fieldlist", form).on("click", ".btn-append,.append", function (e, row) {
	setTimeout(function () {
		Form.events.faupload($(".imgsurl,.channel"));
		Form.events.faselect($(".imgsurl,.channel"));
	}, 100);
});

保存刷新即可。

评论回复

回到顶部