本文实现了在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);
});
保存刷新即可。
评论回复