Eova自定義控件

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}){}%>

顯示效果