• 静态下拉选择器

    示例

    学历:

    源码

    <input id="test1" type="text" class="cselector" mode="xl" />

    其他扩展配置项

    值属性
    描述
    class="cselector"
    下拉列表的关键样式勾子
    mode
    字典名称 比如sex ordertype
    values
    自定义字典 直接设置字典值 比如1|男,2|女
    showother
    下拉类控件里是否显示其他 显示其他后 就可以让用户自由输入 比如 显示 男女___其他
    onlyshow
    下拉类控件默认点击后会隐藏项 配置onlyshow后可以不隐藏 用于实现一些一直显示的树
    isinput
    下拉类控件启动可输入搜索模式
    ispanel
    下拉类控件启动面板选择模式 面板选择会多一个ABCD~XYZ的选择器
  • 文件上传控件

    示例

     头像:

    源码

    <input id="test1" type="text" class="cselectorImageUpload" />

    其他扩展配置项

    值属性
    描述
    class="cselectorImageUpload"
    文件上传控件的关键样式勾子

    文件上传控件得到的值为图片的路径,绑定时直接绑定到img的src上即可,比如<img src="{{Img}}" />。


  • 文本编辑器

    示例


    文本编辑器属于外部引用控件 使用之前请引用 <script src="/js/kindeditor/kindeditor-min.js"></script> 文件

    源码

    <textarea id="grjj" class="ceditormin c11 h2" ></textarea>

    其他扩展配置项

    值属性
    描述
    class="ceditormin"
    文本编辑器的关键样式勾子 请注意一定要给textarea设置宽高
    class="ceditor"
    完整版编辑器 用于后台管理人员

  • 星级选择器

    示例

     环境: 展示示例
     服务:
     质量:

    源码

    <input id="test1" type="text" class="cselectorStar" />

    其他扩展配置项

    值属性
    描述
    class="cselectorStar"
    星级选择器的关键样式勾子

    星级选择器得到的值为1~5 的数字 显示时使用starshow样式 将值绑定到star{{star}}上即可。

    展示时的源码

    <div class="starshow star3"></div>
  • 单选按钮组

    示例

    民族:

    源码

    <input id="test1" type="text" class="cselectorRadio" mode="xxmz" />

    其他扩展配置项

    值属性
    描述
    class="cselectorRadio"
    单选按钮组的关键样式勾子
    mode
    字典名称 比如sex ordertype
    values
    自定义字典 直接设置字典值 比如1|男,2|女
    其他配置项请参见《2.4 参考手册》
  • 复选按钮组

    示例

    兴趣爱好:

    源码

    <input id="test1" type="text" class="cselectorCheckBox" mode="xcah" />

    其他扩展配置项

    值属性
    描述
    class="cselectorCheckBox"
    复选按钮组的关键样式勾子
    mode
    字典名称 比如sex ordertype
    values
    自定义字典 直接设置字典值 比如1|男,2|女
    其他配置项请参见《2.4 参考手册》
  • 二级联动

    示例

    性别:
    体型:

    源码

     <script type="text/javascript">  

    //二级联动的第一级变更事件函数  该事件有二种执行方式

    //第一种 当页面加载时 会默认触发一次 这时下面的二级组件还未变形 所以不用刷新二级值 在它自己变形时 会自动应用新值

    //第二种 当组件选择值变更时 这时二级组件已变形 需要调用refresh刷新

        function tconchange() {
            if ($("#testxb").val() == "男") {//变更二级联动的值 可根据需要自行处理 也可以从js变量中取值等等
                $("#testtx").attr("values", "成男,少侠");
            } else {
                $("#testtx").attr("values", "成女,萝利");
            }
            if($("#testtx").attr("values").indexOf($("#testtx").val()) == -1){//如果当前的值在变更后的值列表中 就不用管 否则就清空老值
                 $("#testtx").val("");
            }
            if (window.testform_testtx)//如果下面的组件已经变形 就刷新组件
                window.testform_testtx.refresh();
        }
    </script>
    <form id="testform" class="cform">
    <h4>示例</h4>
    <div class="htmldemo">
    <div class="form-item">
     <div class="item-title">性别:</div>
     <div class="item-input"><input id="testxb" class="cselector" mode="" values="男,女" conchange="tconchange()"/></div>
    </div>
    <div class="form-item">
     <div class="item-title">体型:</div>
     <div class="item-input"><input id="testtx" class="cselector" mode="" values="成男,少侠"/></div>
    </div>
    <div class="clear"></div>
    </div>
    </form>

    关键点解释

    值属性
    描述
    window.testform_testtx
    访问组件的方式 为 window.表单ID_组件ID
    window.testform_testtx.refresh()
    组件刷新方法 组件刷新方法没有参数 切换刷新内容需要自行处理 比如修改mode 修改values等等
    conchange="tconchange()"
    当组件内容变化时触发的函数 默认页面加载时也会触发一次 所以需要判断下面组件是否存在 如果存在就刷新 不存在说明还没加载 直接修改完值就不用管了 因为下面组件在初始化时会自动应用新值

    二级联动的模式同样适用于其他下拉类组件及单选复选组件等
  • 下拉复选按钮选择器

    示例

    喜欢章节:

    源码

    <input id="xhzj" type="text" class="cselectorCheckList" mode="" cmd-select="nColumn_SelectAll"
         template="<li><a value='{{ID}}'>{{Name}}</a></li>

    其他扩展配置项

    值属性
    描述
    class="cselectorCheckList"
    下拉复选按钮的关键样式勾子
    cmd-select
    下拉类控件绑定字典项分为2种模式
    一种是固定值 一种是动态的值 比如下拉列表中选择系统内用户列表 那就需要获取 配置cmd-select就是下拉框的获取数据的命令 给下拉框提供的数据和表格类默认数据结构一样
    parentKey
    启动数据缓存模式 parentKey为缓存的变量名 数据会缓存到top[parentKey]中 比如一个页面中有一个表格 里面需要用到10行记录 10个选择人员 配置相同的parentKey后 只有第一个人员列表从服务器返回 其他直接从缓存中读取
    urlpara
    配置下拉类控件获取数据命令时附带URL中的参数
    paras
    配置下拉类控件获取数据命令时附带的固定参数 和URL的格式一样 比如:paras="a=1&b=2&c=3"
    updatewait
    更新等待模式 就不发起命令 这种情况出现在 添加时加载默认列表 修改时 要根据参数获取列表
    prevtemplate
    下拉类控件前置的HTML内容 可任意配置
    template
    树节点的模板 正常的为<li><a>{{title}}<a></li> 模板中{{}}为绑定数据变量 需要根据自己的数据结果绑定
  • 下拉复选树选择器

    示例

    喜欢章节:

    源码

    <input id="xhzj" type="text" class="cselectorCheckTree" mode="" cmd-select="nColumn_SelectAll" idkey="ID" pidkey="PID"
         template="<li><a value='{{ID}}'>{{Name}}</a></li>

    其他扩展配置项

    值属性
    描述
    class="cselectorCheckTree"
    下拉复选树的关键样式勾子 和下拉树的区别就在于此
    cmd-select
    下拉类控件绑定字典项分为2种模式
    一种是固定值 一种是动态的值 比如下拉列表中选择系统内用户列表 那就需要获取 配置cmd-select就是下拉框的获取数据的命令 给下拉框提供的数据和表格类默认数据结构一样
    idkey
    数据主键字段名
    pidkey
    数据父键字段名
    parentKey
    启动数据缓存模式 parentKey为缓存的变量名 数据会缓存到top[parentKey]中 比如一个页面中有一个表格 里面需要用到10行记录 10个选择人员 配置相同的parentKey后 只有第一个人员列表从服务器返回 其他直接从缓存中读取
    urlpara
    配置下拉类控件获取数据命令时附带URL中的参数
    paras
    配置下拉类控件获取数据命令时附带的固定参数 和URL的格式一样 比如:paras="a=1&b=2&c=3"
    updatewait
    更新等待模式 就不发起命令 这种情况出现在 添加时加载默认列表 修改时 要根据参数获取列表
    prevtemplate
    下拉类控件前置的HTML内容 可任意配置
    template
    树节点的模板 正常的为<li><a>{{title}}<a></li> 模板中{{}}为绑定数据变量 需要根据自己的数据结果绑定
  • 下拉树选择器

    示例

    喜欢章节:

    源码

    <input id="xhzj" type="text" class="cselectorTree" mode="" cmd-select="nColumn_SelectAll" idkey="ID" pidkey="PID"
         template="<li><a value='{{ID}}'>{{Name}}</a></li>

    其他扩展配置项

    值属性
    描述
    class="cselectorTree"
    下拉树的关键样式勾子 和复选树的区别就在于此
    cmd-select
    下拉类控件绑定字典项分为2种模式
    一种是固定值 一种是动态的值 比如下拉列表中选择系统内用户列表 那就需要获取 配置cmd-select就是下拉框的获取数据的命令 给下拉框提供的数据和表格类默认数据结构一样
    idkey
    数据主键字段名
    pidkey
    数据父键字段名
    parentKey
    启动数据缓存模式 parentKey为缓存的变量名 数据会缓存到top[parentKey]中 比如一个页面中有一个表格 里面需要用到10行记录 10个选择人员 配置相同的parentKey后 只有第一个人员列表从服务器返回 其他直接从缓存中读取
    urlpara
    配置下拉类控件获取数据命令时附带URL中的参数
    paras
    配置下拉类控件获取数据命令时附带的固定参数 和URL的格式一样 比如:paras="a=1&b=2&c=3"
    updatewait
    更新等待模式 就不发起命令 这种情况出现在 添加时加载默认列表 修改时 要根据参数获取列表
    prevtemplate
    下拉类控件前置的HTML内容 可任意配置
    template
    树节点的模板 正常的为<li><a>{{title}}<a></li> 模板中{{}}为绑定数据变量 需要根据自己的数据结果绑定
  • 动态下拉选择器

    示例

    审批人1:
    审批人2:

    源码

    审批人1:<input id="test1" class="cselector" mode="" cmd-select="Demos_List" template="<a value='{{ID}}'>{{xm}}</a>" parentKey="DemoList"/>
    审批人2:<input id="test2" class="cselector" mode="" cmd-select="Demos_List" template="<a value='{{ID}}'>{{xm}}</a>" parentKey="DemoList"/>


    类似这种一个页面有几个相同的数据集的 就可以启用parentKey属性 相同的数据直接绑定 不再获取,其他属性用法请同学们自行探索。

    其他扩展配置项

    值属性
    描述
    class="cselector"
    下拉列表的关键样式勾子
    cmd-select
    下拉类控件绑定字典项分为2种模式
    一种是固定值 一种是动态的值 比如下拉列表中选择系统内用户列表 那就需要获取 配置cmd-select就是下拉框的获取数据的命令 给下拉框提供的数据和表格类默认数据结构一样
    parentKey
    启动数据缓存模式 parentKey为缓存的变量名 数据会缓存到top[parentKey]中 比如一个页面中有一个表格 里面需要用到10行记录 10个选择人员 配置相同的parentKey后 只有第一个人员列表从服务器返回 其他直接从缓存中读取
    urlpara
    配置下拉类控件获取数据命令时附带URL中的参数
    paras
    配置下拉类控件获取数据命令时附带的固定参数 和URL的格式一样 比如:paras="a=1&b=2&c=3"
    updatewait
    更新等待模式 就不发起命令 这种情况出现在 添加时加载默认列表 修改时 要根据参数获取列表
    prevtemplate
    下拉类控件前置的HTML内容 可任意配置
    template
    树节点的模板 正常的为<li><a>{{title}}<a></li> 模板中{{}}为绑定数据变量 需要根据自己的数据结果绑定
  • 色彩选择器

    示例

    背景颜色:

    源码

    色彩选择器是外部引用的js-color控件,使用之前请先引用 <script src="/js/p.jquery.jscolor.js"></script> 文件
    <input id="scolor" class="color" />


  • 城市选择器

    示例

    所在城市:

    源码

    城市选择器比较大,没有默认引用,使用之前请先引用 <script src="/js/m.cselector.citys.js"></script> 文件
    <input id="scity" class="cselectorCity"/>

    城市选择器使用标准的行政区划代码,六位数字代码,比如410100就是郑州 110000就是北京

    其他扩展配置项


    解释
    more="true"
    显示父级名称 比如选择金水区后显示的是 河南省-郑州市-金水区
    check="true"
    复选模式 复选模式下的值为逗号分割(结尾不截),比如410100,110000,120000,
    checknum="5"
    复选模式下最多可以选几个
    hoverlevel="0"
    显示等级 0省级 1市级 2县区级


    conchange
    被选择值后的回调函数

  • 日期选择器

    示例

    出生日期:

    源码

    日期选择器是外部引用的my97日历控件,使用之前请先引用 <script src="/js/p.WdatePicker.js"></script> 文件
    <input id="sdate" type="text" onClick="WdatePicker()"/>

    其他API请参见my97官网

  • 组件简介

    组件是指前端开发中经常遇到的功能性输入字段,比如单选复选下拉等等。

    uiZjs里封装了几乎在开发中常用的全部组件,其中也有外部引用的其他组件,比如my97 jscolor等等。

    注意:控件变形必须在form表单中 表单关键样式为cform

  • 组件思路

    uiZjs中的组件统一使用class样式表为勾子,mode为字典。

    通过切换class可以方便的切换显示样式,通过更改mode字典,可以方便的切换内容。

    关于字典的介绍,请参见《常用字典》

  • 组件用法

    下拉示例

    学历:

    单选示例

    学历:

    复选示例

    学历:

    源码

    学历下拉:<input id="test1" class="cselector" mode="xl"/>
    学历单选:<input id="test2" class="cselectorRadio" mode="xl"/>
    学历复选:<input id="test3" class="cselectorCheckBox" mode="xl"/>


继续阅读

    uiZjs