云静Admin TP6

# 单一字段调用

# 说明

表单构建器提供的表单字段类型（含新增字段类型和自定义字段）除了在表单构建器里面集成使用外，还可以单独调用渲染使用。

提示！字段集合顶部容器须携带属性lay-filter=""

  • html

    <div class="layui-form" lay-filter="test">
    <div class="field-box text">
        <div class="title">单行文本框示例</div>
        <div class="control"></div>
    </div>
    ...
</div>

  • js

    layui.use(['yunj'],function (){

    // 配置项
    let options = {
        formId:"test",
        key:"text_key",
        args:{
            "placeholder":"测试文本框"
        }
    };
    
    yunj.formField("text",options).then(field=>{
        // 指定父容器渲染
        return field.render(`.field-box.text .control`).then(res=>{});
    }).then(field=>{
        // field为当前字段对象
        
    }).catch(err=>console.log(err));

});

# 方法 yunj.formField(type,options)

构建字段对象。 此方法返回值是一个promise对象，执行成功返回字段对象，根据字段对象可渲染字段html结构 / 设置字段值 / 获取字段值

  • 参数

    key 类型 是否必须 说明
    type string、function 是 字段类型。为function闭包时，默认为自定义字段类型。字段类型详见：字段配置
    options object 是 配置项

  • 配置项参数

    key 类型 是否必须 说明
    formId string 是 表单id
    key string 是 字段key
    args object 否 字段配置

    注意：字段配置args中type属性不再必须（由yunj.formField(type,options)第一个参数取代），title/desc属性不设置的情况下，不再渲染对应属性的html结构。

# 常用方法

  • yunj.formClear(formId) 清空表单id对应的所有字段值

  • yunj.formReset(formId) 重置表单id对应的所有字段值

  • yunj.formData(formId,validate) 获取表单id对应的所有字段值，传入validate则会自动校验参数。示例如下：

    layui.use(["yunj","validate"],()=>{
    let validate = yunj.validate;
    let data = yunj.formData("test",validate);
});

# 演示

详见：http://tp6admin.iyunj.cn/admin (opens new window)

单独引用单行文本框、复选框、富文本、Markdown及自定义字段，代码示例如下：

{extend name="$adminPage"}

{block name="headStyle"}
<style type="text/css">
    .field-box {
        padding: 15px 0;
    }

    .field-box:not(:first-child) {
        border-top: 1px dashed #c2c2c2;
    }

    .field-box .title {
        margin-bottom: 15px;
    }
</style>
{/block}

{block name="content"}
<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-body layui-form" lay-filter="test">
            <!-- 单行文本框 -->
            <div class="field-box text">
                <div class="title">单行文本框示例</div>
                <div class="control"></div>
                <div class="btn-box" data-field-key="text_key">
                    <button type="button" class="layui-btn layui-btn-sm btn-set-val" data-value="你好">设置单行文本框示例值为：你好
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm btn-get-val">获取单行文本框示例值</button>
                </div>
            </div>
            <!-- 复选框 -->
            <div class="field-box checkbox">
                <div class="title">复选框示例</div>
                <div class="control"></div>
                <div class="btn-box" data-field-key="checkbox_key">
                    <button type="button" class="layui-btn layui-btn-sm btn-set-val" data-value="2">设置复选框示例值为：香蕉
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm btn-get-val">获取复选框示例值</button>
                </div>
            </div>
            <!-- 富文本 -->
            <div class="field-box editor">
                <div class="title">富文本示例</div>
                <div class="control"></div>
                <div class="btn-box" data-field-key="editor_key">
                    <button type="button" class="layui-btn layui-btn-sm btn-set-val" data-value="<p>你好</p>">设置富文本示例值为：&lt;p&gt;你好&lt;/p&gt;</button>
                    <button type="button" class="layui-btn layui-btn-sm btn-get-val">获取富文本示例值</button>
                </div>
            </div>
            <!-- markdown -->
            <div class="field-box markdown">
                <div class="title">Markdown示例</div>
                <div class="control"></div>
                <div class="btn-box" data-field-key="markdown_key">
                    <button type="button" class="layui-btn layui-btn-sm btn-set-val" data-value="## 你好">
                        设置Markdown示例值为：## 你好
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm btn-get-val">获取Markdown示例值</button>
                </div>
            </div>
            <!-- custom -->
            <div class="field-box custom">
                <div class="control"></div>
                <div class="btn-box" data-field-key="custom_key">
                    <button type="button" class="layui-btn layui-btn-sm btn-set-val" data-value="你好">设置自定义字段示例值为：你好</button>
                    <button type="button" class="layui-btn layui-btn-sm btn-get-val">获取自定义字段示例值</button>
                </div>
            </div>
            <!-- 按钮区域 -->
            <div class="field-box btn-box">
                <button type="button" class="layui-btn layui-btn-sm btn-clear-val">清空所有字段值</button>
                <button type="button" class="layui-btn layui-btn-sm btn-reset-val">重置所有字段值</button>
                <button type="button" class="layui-btn layui-btn-sm btn-all-val">获取所有字段值</button>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
    layui.use(['yunj', "jquery", "validate"], function () {
        let win = window;
        let doc = document;
        let $ = layui.jquery;
        let validate = layui.validate;

        class SingleField {

            constructor() {
                this.formId = "test";
                this.formFieldObj = {};
                this.init();
            }

            init() {
                let that = this;
                that.setText();
                that.setCheckbox();
                that.setEditor();
                that.setMarkdown();
                that.setCustom();
                that.setEventBind();
            }

            // 设置单行文本框
            setText() {
                let that = this;

                // 配置项
                let options = {
                    formId: that.formId,
                    key: "text_key",
                    args: {
                        default: "初始值",
                        verifyTitle: "单行文本框"
                    }
                };

                yunj.formField("text", options).then(field => {
                    // 指定父容器渲染
                    return field.render(`.field-box.text .control`);
                }).then(field => {
                    // 保存字段对象
                    that.formFieldObj[options.key] = field;
                }).catch(err => {
                    console.log(err);
                });
            }

            // 设置复选框
            setCheckbox() {
                let that = this;

                // 配置项
                let options = {
                    formId: that.formId,
                    key: "checkbox_key",
                    args: {
                        default: 1,
                        options: {
                            1: "苹果",
                            2: "香蕉",
                            3: "西瓜"
                        },
                        verifyTitle: "复选框"
                    }
                };

                yunj.formField("checkbox", options).then(field => {
                    // 指定父容器渲染
                    return field.render(`.field-box.checkbox .control`);
                }).then(field => {
                    // 保存字段对象
                    that.formFieldObj[options.key] = field;
                }).catch(err => {
                    console.log(err);
                });
            }

            // 设置富文本
            setEditor() {
                let that = this;

                // 配置项
                let options = {
                    formId: that.formId,
                    key: "editor_key",
                    args: {
                        default: "富文本初始值",
                        verifyTitle: "富文本"
                    }
                };

                yunj.formField("editor", options).then(field => {
                    // 指定父容器渲染
                    return field.render(`.field-box.editor .control`);
                }).then(field => {
                    // 保存字段对象
                    that.formFieldObj[options.key] = field;
                }).catch(err => {
                    console.log(err);
                });
            }

            // 设置Markdown
            setMarkdown() {
                let that = this;

                // 配置项
                let options = {
                    formId: that.formId,
                    key: "markdown_key",
                    args: {
                        default: "Markdown初始值",
                        verifyTitle: "Markdown"
                    }
                };

                yunj.formField("markdown", options).then(field => {
                    // 指定父容器渲染
                    return field.render(`.field-box.markdown .control`);
                }).then(field => {
                    // 保存字段对象
                    that.formFieldObj[options.key] = field;
                }).catch(err => {
                    console.log(err);
                });
            }

            // 设置自定义字段
            setCustom() {
                let that = this;

                // 配置项
                let options = {
                    formId: that.formId,
                    key: 'custom_key',
                    args: {
                        default: '这是自定义字段示例内容'
                    }
                };

                // @param {string} formId 表单构建起id
                yunj.formField((formId)=>{
                    return `<label class='layui-form-label'>自定义字段示例标题</label>
                            <div class='layui-input-inline yunj-form-item-control'>自定义字段示例内容：<span class='value'></span></div>
                            <div class='yunj-form-item-desc'>自定义字段示例描述</div>
                            <script type='application/javascript'>
                                layui.use(['jquery'],function() {
                                    let $ = layui.jquery;

                                    // 设置字段值。事件名：yunj_form_{当前表单构建器id}_{字段key}_set_value
                                    $(document).bind('yunj_form_${formId}_custom_key_set_value',function(e,field,value) {
                                        // field.boxEl 当前字段外部父元素的jQuery对象
                                        // value 当前字段的值
                                        field.boxEl.find('.value').html(value);
                                    });
                                    // 获取字段值。事件名：yunj_form_{当前表单构建器id}_{字段key}_get_value
                                    $(document).bind('yunj_form_${formId}_custom_key_get_value',function(e,field,val) {
                                        // field.boxEl 当前字段外部父元素的jQuery对象
                                        // val.value 当前字段的值，默认为空字符串''
                                        val.value = field.boxEl.find('.value').html();
                                    });
                                });
                            <\/script>`;
                }, options).then(field => {
                    // 指定父容器渲染
                    return field.render(`.field-box.custom .control`);
                }).then(field => {
                    // 保存字段对象
                    that.formFieldObj[options.key] = field;
                }).catch(err => {
                    console.log(err);
                });
            }

            // 事件绑定
            setEventBind() {
                let that = this;

                // 根据字段对象设置单个字段值
                $(".field-box .btn-box .btn-set-val").on("click", function () {
                    let fieldKey = $(this).parents(".btn-box").eq(0).data("fieldKey");
                    let fieldObj = that.formFieldObj.hasOwnProperty(fieldKey) ? that.formFieldObj[fieldKey] : null;
                    if (!fieldObj) {
                        alert(`字段key=[${fieldKey}]还未完成渲染`);
                        return;
                    }
                    let value = $(this).data("value");
                    fieldObj.setValue(value);
                });

                // 根据字段对象获取单个字段值
                $(".field-box .btn-box .btn-get-val").on("click", function () {
                    let fieldKey = $(this).parents(".btn-box").eq(0).data("fieldKey");
                    let fieldObj = that.formFieldObj.hasOwnProperty(fieldKey) ? that.formFieldObj[fieldKey] : null;
                    if (!fieldObj) {
                        alert(`字段key=[${fieldKey}]还未完成渲染`);
                        return;
                    }
                    alert(`字段[${fieldKey}] = ` + fieldObj.getValue());
                });

                // 根据表单id清空所有字段值
                $(".field-box.btn-box .btn-clear-val").on("click", function () {
                    yunj.formClear((that.formId));
                });

                // 根据表单id重置所有字段值
                $(".field-box.btn-box .btn-reset-val").on("click", function () {
                    yunj.formReset(that.formId);
                });

                // 根据表单id获取所有字段值
                $(".field-box.btn-box .btn-all-val").on("click", function () {
                    let formData = yunj.formData(that.formId, validate);
                    alert(JSON.stringify(formData));
                });
            }

        }

        $(doc).ready(function () {
            new SingleField();
        });
    });
</script>
{/block}

← 基础/示例 →