• 静态下拉选择器

    示例

    学历:

    源码

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

    其他扩展配置项

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

    示例

    性别:
    体型:

    源码

     <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()"
    当组件内容变化时触发的函数 默认页面加载时也会触发一次 所以需要判断下面组件是否存在 如果存在就刷新 不存在说明还没加载 直接修改完值就不用管了 因为下面组件在初始化时会自动应用新值

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

    示例

    审批人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> 模板中{{}}为绑定数据变量 需要根据自己的数据结果绑定

继续阅读

    uiZjs