index.html
13.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<div class="row">
<div class="col-md-6">
<div class="box box-success">
<div class="panel-heading">
{:__('自定义图片描述')}
</div>
<div class="panel-body">
<div class="alert alert-success-light">
<b>温馨提示</b><br>
默认我们的多图是没有图片描述的，如果我们需要自定义描述，可以使用以下的自定义功能<br>
特别注意的是图片的url和描述是分开储存的，也就是说图片一个字段，描述一个字段，你在前台使用时需要自己匹配映射关系<br>
<b>下面的演示textarea为了便于调试，设置为可见的，实际使用中应该添加个hidden的class进行隐藏</b>
</div>
<form id="first-form" role="form" data-toggle="validator" method="POST" action="">
<div class="form-group row">
<label class="control-label col-xs-12 col-sm-2">{:__('一维数组示例')}:</label>
<div class="col-xs-12 col-sm-8">
<div class="input-group">
<input id="c-files" data-rule="required" class="form-control" size="50" name="row[files]" type="text" value="https://cdn.fastadmin.net/uploads/addons/blog.png,https://cdn.fastadmin.net/uploads/addons/cms.png,https://cdn.fastadmin.net/uploads/addons/vote.png">
<div class="input-group-addon no-border no-padding">
<span><button type="button" id="plupload-files" class="btn btn-danger plupload" data-input-id="c-files" data-mimetype="*" data-multiple="true" data-preview-id="p-files"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
<span><button type="button" id="fachoose-files" class="btn btn-primary fachoose" data-input-id="c-files" data-mimetype="*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
</div>
<span class="msg-box n-right" for="c-files"></span>
</div>
<!--ul需要添加 data-template和data-name属性，并一一对应且唯一 -->
<ul class="row list-inline plupload-preview" id="p-files" data-template="introtpl" data-name="row[intro]"></ul>
<!--请注意 ul和textarea间不能存在其它任何元素，实际开发中textarea应该添加个hidden进行隐藏-->
<textarea name="row[intro]" class="form-control" style="margin-top:5px;">["简洁响应式博客","CMS内容管理系统","在线投票系统"]</textarea>
<!--这里自定义图片预览的模板 开始-->
<script type="text/html" id="introtpl">
<li class="col-xs-3">
<a href="<%=fullurl%>" data-url="<%=url%>" target="_blank" class="thumbnail">
<img src="<%=fullurl%>" class="img-responsive">
</a>
<input type="text" name="row[intro][<%=index%>]" class="form-control" placeholder="请输入文件描述" value="<%=value?value:''%>"/>
<a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>
</li>
</script>
<!--这里自定义图片预览的模板 结束-->
</div>
</div>
<div class="form-group row">
<label class="control-label col-xs-12 col-sm-2">{:__('二维数组示例')}:</label>
<div class="col-xs-12 col-sm-8">
<div class="input-group">
<input id="c-images" data-rule="required" class="form-control" size="50" name="row[images]" type="text" value="https://cdn.fastadmin.net/uploads/addons/example.png,https://cdn.fastadmin.net/uploads/addons/upyun.png,https://cdn.fastadmin.net/uploads/addons/alioss.png">
<div class="input-group-addon no-border no-padding">
<span><button type="button" id="plupload-images" class="btn btn-danger plupload" data-input-id="c-images" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="true" data-preview-id="p-images"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
<span><button type="button" id="fachoose-images" class="btn btn-primary fachoose" data-input-id="c-images" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
</div>
<span class="msg-box n-right" for="c-images"></span>
</div>
<!--ul需要添加 data-template和data-name属性，并一一对应且唯一 -->
<ul class="row list-inline plupload-preview" id="p-images" data-template="desctpl" data-name="row[desc]"></ul>
<!--请注意 ul和textarea间不能存在其它任何元素，实际开发中textarea应该添加个hidden进行隐藏-->
<textarea name="row[desc]" class="form-control" style="margin-top:5px;">[{"info":"开发者示例插件","size":"1M"},{"info":"又拍云储存整合","size":"2M"},{"info":"阿里OSS云储存","size":"1M"}]</textarea>
<!--这里自定义图片预览的模板 开始-->
<script type="text/html" id="desctpl">
<li class="col-xs-3">
<a href="<%=fullurl%>" data-url="<%=url%>" target="_blank" class="thumbnail">
<img src="<%=fullurl%>" class="img-responsive">
</a>
<input type="text" name="row[desc][<%=index%>][info]" class="form-control" placeholder="请输入插件描述" value="<%=value?value['info']:''%>"/>
<input type="text" name="row[desc][<%=index%>][size]" class="form-control" placeholder="请输入插件大小" value="<%=value?value['size']:''%>"/>
<a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>
</li>
</script>
<!--这里自定义图片预览的模板 结束-->
</div>
</div>
<div class="form-group row">
<label class="control-label col-xs-12 col-sm-2"></label>
<div class="col-xs-12 col-sm-8">
<button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
<button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="box box-info">
<div class="panel-heading">
{:__('自定义Fieldlist示例')}
</div>
<div class="panel-body">
<div class="alert alert-danger-light">
<b>温馨提示</b><br>
默认我们的fieldlist只有一维数组，为键值形式，如果需要二维数组，可使用下面的自定义模板来实现<br>
默认追加的元素是没有进行事件绑定的，我们需要监听btn-append这个按钮的fa.event.appendfieldlist事件<br>
<b>下面的演示textarea为了便于调试，设置为可见的，实际使用中应该添加个hidden的class进行隐藏</b>
</div>
<form id="second-form" role="form" data-toggle="validator" method="POST" action="">
<div class="form-group row">
<label class="control-label col-xs-12 col-sm-2">{:__('Fieldlist示例')}:</label>
<div class="col-xs-12 col-sm-8">
<dl class="fieldlist" data-template="basictpl" data-name="row[basic]">
<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[basic]" class="form-control" cols="30" rows="5">[{"title":"开发者示例插件","intro":"开发者必备","size":"1M"},{"title":"又拍云储存整合","intro":"一款云储存","size":"2M"},{"title":"阿里OSS云储存","intro":"一款云储存","size":"1M"}]</textarea>
</dl>
<script id="basictpl" type="text/html">
<dd class="form-inline">
<ins><input type="text" name="<%=name%>[<%=index%>][title]" class="form-control" value="<%=row.title%>" placeholder="标题" size="10"/></ins>
<ins><input type="text" name="<%=name%>[<%=index%>][intro]" class="form-control" value="<%=row.intro%>" placeholder="描述"/></ins>
<ins><input type="text" name="<%=name%>[<%=index%>][size]" class="form-control" value="<%=row.size%>" placeholder="大小"/></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>
<div class="form-group row">
<label class="control-label col-xs-12 col-sm-2">{:__('元素事件')}:</label>
<div class="col-xs-12 col-sm-8">
<dl class="fieldlist" data-template="eventtpl" data-name="row[event]">
<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[event]" class="form-control" cols="30" rows="5">[{"id":"1","name":"admin","time":"2019-06-28 12:05:03"}]</textarea>
</dl>
<script id="eventtpl" type="text/html">
<dd class="form-inline">
<ins><input type="text" name="<%=name%>[<%=index%>][id]" class="form-control selectpage" data-source="auth/admin/selectpage" data-field="username" value="<%=row.id%>" placeholder="管理员" size="10"/></ins>
<ins><input type="text" name="<%=name%>[<%=index%>][name]" class="form-control" value="<%=row.name%>" placeholder="名称"/></ins>
<ins><input type="text" name="<%=name%>[<%=index%>][time]" class="form-control datetimepicker" value="<%=row.time%>" placeholder="时间"/></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>
<div class="form-group row">
<label class="control-label col-xs-12 col-sm-2"></label>
<div class="col-xs-12 col-sm-8">
<button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
<button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>