• 基础示例

    示例

    源码

    <script src="/js/m.cselector.citys.js"></script><!-- 外部引用 城市选择器 -->

    <script src="/js/kindeditor/kindeditor-min.js"></script><!-- 外部引用 文本编辑器 -->

    <script src="/js/p.WdatePicker.js"></script><!-- 外部引用 日期选择器 -->

    <!-- 关键属性 单条查询 修改 新增 3个命令 -->

    <form id="DemosAdd" cmd-select="Demos_Query" cmd-update="Demos_Modify" cmd-insert="Demos_Add">
        <input id="ID" type="hidden" />
        <table border="0" cellpadding="0" cellspacing="12" class="c12">
            <tr>
                <td class="ws">姓名:</td>
                <td class="w4"><!-- id对应字段名 rule为表单检验 格式为多规则以;分号分割 规则多值以:冒号分割 具体请参见《6.3 表单检验》 -->
                    <input id="xm" type="text" rule="length:25;required;" /></td>
                <td class="ws">性别:</td>
                <td><!-- cselectorRadio为单选选择器 mode为性别字典 字典的值为 zjs.sex = '1|男,2|女'; -->
                    <input id="xb" type="text" class="cselectorRadio" mode="sex" /></td>
            </tr>
            <tr>
                <td>喜欢章节:</td>
                <td><!-- cselectorCheckTree为下拉复选树 cmd-select为获取树数据的命令 idkey为主键字段 pidkey为父键字段 template为模板 -->
                    <input id="xhzj" type="text" class="cselectorCheckTree" mode="" cmd-select="nColumn_SelectAll"
                        idkey="ID" pidkey="PID" template="<li><a value='{{ID}}'>{{Name}}</a></li>" /></td>
                <td>打分:</td>
                <td><!-- cselectorStar为星星选择器 1-5星 -->
                    <input id="df" type="text" class="cselectorStar" /></td>
            </tr>
            <tr>
                <td>所在地:</td>
                <td><!-- cselectorCity城市选择器 more="true"为显示完整路径 比如金水区 显示为 河南省-郑州市-金水区  -->
                    <input id="szd" class="cselectorCity" more="true" /></td>
                <td>出生日期:</td>
                <td><!-- WdatePicker日期选择器 -->
                    <input id="csrq" type="text" onclick="WdatePicker()" /></td>
            </tr>
            <tr>
                <td>头像:</td>
                <td><!-- cselectorImageUpload文件上传组件 -->
                    <input id="tx" type="text" class="cselectorImageUpload" /></td>
                <td>学历:</td>
                <td><!-- cselector下拉选择器 mode为学历字典 字典值为 zjs.xl = "0|大专以下,1|大专,2|本科,4|硕士,5|博士,6|博士后,"; -->
                    <input id="xl" type="text" class="cselector" mode="xl" /></td>
            </tr>
            <tr>
                <td>兴趣爱好:</td>
                <td colspan="11"><!-- cselectorCheckBox复选选择器 -->
                    <input id="xcah" type="text" class="cselectorCheckBox" mode="xcah" /></td>
            </tr>
            <tr>
                <td>个人简介:</td>
                <td colspan="11"><!-- ceditormin为简易版文本编辑器 ceditor为完整版文本编辑器 简易版的给普通用户 完整的给后台管理员 -->
                    <textarea id="grjj" class="ceditormin h2" rule="length:250;"></textarea></td>
            </tr>
            <tr>
                <td></td><!-- id="submit"为提交按钮的关键勾子 注意不是input type="submit" 而是id 只认id -->
                <td><a id="submit" class="btn">提交</a></td>
            </tr>
        </table>
    </form>

    示例介绍:


    id
    表单的ID 必须保证页面中唯一
    cmd-select
    表单的查询命令
    cmd-update
    表单的更新命令
    cmd-insert
    表单的插入命令
    input的id
    对应的字段名
    input的rule
    字段的校验规则
    id="submit"
    提交按钮的关键钩子

继续阅读

    uiZjs