Eova自定义控件

• Z时代
• 2024-01-10
• 分类：综合

Eova form扩展 
自定义所有控件自定义使用：
大部分都是直接定义使用，自动适配
少数需要设置值表达式

附代码
 

<%var body = {%>
<form id="diy_form" class="eova-form">
    <div class="eova-form-field">
        <label class="eova-form-label">文本框</label>
        <#text id="txtInfo" name="info" value="一句话构建文本框" placeholder="请输入信息..." validator="" options="" isReadonly="" />
    </div>
    <br/>
    <div class="eova-form-field">
        <label class="eova-form-label">文本域</label>
        <#texts id="txtArea" name="" value="" placeholder="" validator="" style="width:99.9%;height:50px;" isReadonly=""
        />
    </div>
    <br/>
    <div class="eova-form-field">
        <label class="eova-form-label">图标框</label>
        <#icon id="" name="" value="" isReadonly="" />
    </div>
    <div class="eova-form-field">
        <label class="eova-form-label">布尔框</label>
        <#bool id="" name="" value="" isReadonly="" />
    </div>
    <br/>
    <div class="eova-form-field">
        <label class="eova-form-label">日期框</label>
        <#time id="" name="" value="" isReadonly="" options="format:"yyyy-MM-dd""/>
    </div>
    <div class="eova-form-field">
        <label class="eova-form-label">时间框</label>
        <#time id="" name="" value="" isReadonly="" options="format:"yyyy-MM-dd HH:mm:ss"" />
    </div>
    <br/>
    <div class="eova-form-field">
        <label class="eova-form-label">下拉框</label>
        <#combo id="dropdown" />
    </div>
    <div class="eova-form-field">
        <label class="eova-form-label">查找框</label>
        <#find id="findData" name="" code="" field="" value="" multiple="" isReadonly="" />
    </div>
    <br/>
    <div class="eova-form-field">
        <label class="eova-form-label">下拉树</label>
        <#combotree id="tree" name="" value="" code="" field="" filedir="" options="" />
    </div>
    <div class="eova-form-field">
        <label class="eova-form-label">文件框</label>
        <#file id="file1" name="" value="" code="test_info" field="v_file" filedir="" options="" />
    </div>
    <div class="eova-form-field">
        <label class="eova-form-label">附件框</label>
        <#files id="file1" name="files" value="" code="test_info" field="v_file" filedir="" options="" />
    </div>
    <br/>
    <div class="eova-form-field">
        <label class="eova-form-label">图片框</label>
        <#img id="img1" name="" value="" code="test_info" field="avatar" filedir="" options="" />
    </div>
    <br/>
    <div class="eova-form-field">
        <label class="eova-form-label">多图框</label>
        <#imgs id="img2" name="imgs" value="" code="test_info" field="avatar" filedir="" options="" />
    </div>
    <br/>
    <div class="eova-form-field">
        <label class="eova-form-label">编辑框</label>
        <#edit id="edit11" name="" value="" code="player_code" field="info" style="width: 50%;height:250px;"
        isReadonly="" />
    </div>
    <div class="eova-form-field" style="width: 800px">
        <label class="eova-form-label">Json框</label>
        <#json id="json" name="" value="" style="height: 200px;" isReadonly="" />
    </div>
</form>
<script>
    // 下拉框手动填充数据  或者 使用exp填充数据
    $("#dropdown").eovacombo({
        json: [
            {id: "xls", cn: "Excel"},
            {id: "doc", cn: "Word"},
            {id: "pdf", cn: "PDF暂不支持"}
        ], onChange: function (oldValue, newValue) {
            console.log(oldValue + "->" + newValue);
        }
    }).reload();
    //树控件 需要使用exp来设置数据
    $("#tree").eovacombotree({
        exp: "selectEovaMenu", onChange: function (oldValue, newValue) {
            console.log(oldValue + "->" + newValue);
        }
    });
    // 查找框需要使用exp来设置数据
    $("#findData").eovafind({
        exp: "findArea", onChange: function (oldValue, newValue, row) {
            console.log(oldValue + "->" + newValue);
        }
    });
</script>
<!--多图 附件  编辑 json框 均需要设置"isEditor" : true 不使用这些时可设为false-->
<%};include("/eova/layout/form.html",{"title" : "Tab", "layoutContent" : body, "isEditor" : true}){}%>

显示效果

以上是 Eova自定义控件 的全部内容， 来源链接： utcz.com/z/511723.html