免费开源Yzncms系列教程:自定义字段的使用方法
前言截止目前yzncms可以定义以下字段输入框[text],复选框[checkbox],多行文本[textarea],单选按钮[radio]开关[switch],数组[array],下拉框[select],下拉框(多选)[selects]高级下拉框[selectpage],单张图[image],多张图[images]标签[tags],数字[number],日期和时间[datetime]百度编辑器[
·
前言
截止目前yzncms可以定义以下字段输入框[text],复选框[checkbox],多行文本[textarea],单选按钮[radio]
开关[switch],数组[array],下拉框[select],下拉框(多选)[selects]
高级下拉框[selectpage],单张图[image],多张图[images]
标签[tags],数字[number],日期和时间[datetime]
百度编辑器[Ueditor],markdown编辑器[markdown]
多文件[files],单文件[file],颜色值[color],城市地区[city]
当我们的字段不能够满足业务需求,或者需要对现有字段进行调整,可以使用本自定义字段。
需求例子1:我们需要拓展数组字段,如下效果
新建文件
在application/admin/view/custom/
目录下新建custom.html文件
代码
代码如下
<div class="layui-form-item layui-form-text">
<label>{$vo.title} {if condition="isset($vo.ifrequire) AND $vo.ifrequire"} <font color="red">*</font>{/if}</label>
<div class="layui-form-field-label fieldlist" data-name="{$vo.fieldArr}[{$vo.name}]" data-id="{$vo.name}" data-template="true">
<div class="arrBox"></div>
<button type="button" class="layui-btn btn-append">追加</button>
<textarea name="{$vo.fieldArr}[{$vo.name}]" class="layui-textarea layui-hide">{$vo.value}</textarea>
</div>
{if $vo.remark}<div class="layui-form-mid layui-word-aux">{$vo.remark|raw}</div>{/if}
</div>
<script type="text/html" id="{$vo.name}Tpl">
<div class="layui-form-item rules-item">
{{# layui.each(d.lists, function(index, item) { }}
<div class="layui-input-inline" style="width:120px;">
<input type="text" class="layui-input" name="{{item.name}}[{{item.index}}][name]" placeholder="姓名" value="{{item.row.name|| ''}}" />
</div>
<div class="layui-input-inline" style="width:120px;">
<input type="text" class="layui-input" name="{{item.name}}[{{item.index}}][age]" placeholder="年龄" value="{{item.row.age|| ''}}" />
</div>
<div class="layui-input-inline" style="width:120px;">
<input type="text" class="layui-input" name="{{item.name}}[{{item.index}}][score]" placeholder="成绩" value="{{item.row.score|| ''}}" />
</div>
<div class="layui-input-inline" style="width:120px;">
<select name="{{item.name}}[{{item.index}}][city]" lay-filter="fieldlist">
<option value=""></option>
<option value="1" {{# if(item.row.city == 1){ }}selected{{# } }}>江苏</option>
<option value="2" {{# if(item.row.city == 2){ }}selected{{# } }}>上海</option>
<option value="3" {{# if(item.row.city == 3){ }}selected{{# } }}>深圳</option>
<option value="4" {{# if(item.row.city == 4){ }}selected{{# } }}>香港</option>
</select>
</div>
<div class="layui-input-inline" style="width:150px;">
<input type="radio" class="layui-input" name="{{item.name}}[{{item.index}}][sex]" value="1" {{# if(item.row.sex == 1){ }}checked{{# } }} title="男" lay-filter="fieldlist"/>
<input type="radio" class="layui-input" name="{{item.name}}[{{item.index}}][sex]" value="2" {{# if(item.row.sex == 2){ }}checked{{# } }} title="女" lay-filter="fieldlist"/>
</div>
<label class="layui-form-mid">
<button type="button" class="layui-btn layui-btn-danger btn-remove layui-btn-xs"><i class="iconfont icon-close"></i></button>
<button type="button" class="layui-btn btn-dragsort layui-btn-xs"><i class="iconfont icon-yidong"></i></button>
</div>
{{# }); }}
</div>
</script>
新建字段
最后
这样就OK了,你可以完善更多的高级自定义字段
ps:需要注意的是,自定义没有经过处理,像上面的例子的字段要展现在前端需要json_decode处理下
更多推荐
所有评论(0)