easyUI的combobox设置隐藏和显示

今天遇到一个需求,需要在combobox选择不同选项时,分别切换另一个控件为text或者combobox.

当时想了各种办法,想将combobx和text切换隐藏,但是都没得到自己想要的效果.最终还是在combobx上加了个div,用来控制div的显示和隐藏,打到自己想要的效果.

不过需要注意的是:当切换到text或其他非combobox时,将combobox的值要设置为空.

如下图所示:

原始状态:

切换为text时效果如图:

切换到combobox时,效果如图:

下面贴出控件显示的代码

<!-- 用来切换显示文本 -->
            <th id="th${id }">
            </th>
            <td>
                <!-- 显示和隐藏 combobox -->
                <div id="hjlxdiv${id }" style="width: auto; display: none;" >
                   <input name="hjlx${id }" id="hjlx${id }" class="easyui-combobox" style="width: 152px;"  data-options="valueField:‘itemid‘,textField:‘itemname‘,url:‘warning.lx?method=viewSysObjectById&typeid=11030‘" />
                </div>
                <!-- 显示和隐藏text -->
                <input type="text" name="yjglh${id }" id="yjglh${id }" class="easyui-validatebox" style="width:152px;display:none;"/>
            </td>

下面是操作的js:

/*
        ${id }是Spring从后台传过来的id号,用来区分不同的控件id,不需要的无视就行了
    */
     $("#pccs"+${id }).combobox({
         //调用combobox的onChange方法
        onChange: function ddlchange(obj)
        {
            var id = ${id };
            var hjlx= $("#hjlx"+id);
            var th1=  $("#th"+id);
            //获取text文本控件和combobox的div控件
            var yjglh= document.getElementById("yjglh" + id);
            var div = document.getElementById("hjlxdiv" + id);
            if(obj)
            {
                if(obj=="1")
                {
                    //当选择"忽略"时,将combobox的值设置为空 ,控件隐藏掉   th和text设置为显示
                    hjlx.combobox(‘setValue‘,‘‘);
                    th1.text("依据关联号:");
                    div.style.display=‘none‘;
                    yjglh.style.display=‘block‘;
                }
                else if(obj=="3")
                {
                    //当选择"函调"时,将th的值切换,combobx控件设置为显示,text控件隐藏.
                    th1.text("函件类型:");
                    div.style.display=‘block‘;
                    yjglh.style.display=‘none‘;
                }
                else
                {
                    //将th,combobox,text控件都隐藏起来
                    var a = hjlx.combobox(‘setValue‘,‘‘);
                    th1.text("");
                    div.style.display=‘none‘;
                    yjglh.style.display=‘none‘;
                }
            }
        }
    });
时间: 2024-10-08 02:26:34

easyUI的combobox设置隐藏和显示的相关文章

通过onWindowAttributesChanged和onSystemUiVisibilityChange监听状态栏页面的隐藏与显示、动态显示与隐藏状态栏

最近添加系统功能需要监听状态栏的隐藏与显示,小小研究了下结合资料做下总结: 首先我用这个WindowAttributesChanged方法来监听视频播放页面状态栏的隐藏与显示,通过打印getWindow().getAttributes().flags,获取页面属性,从而来判断状态栏的显示与隐藏,可正常监听! @Override public void onWindowAttributesChanged(LayoutParams params) { super.onWindowAttributes

SAP 设置屏幕字段的隐藏、显示、必填和可选,以设置物料组为例

1.事务码MM01,把物料组设为选填字段. 2.找到物料组的屏幕字段. 3.在后台根据屏幕字段找到对应字段组.后台路径:后勤-常规—物料主数据—字段选择—给字段组分配字段.点击后面的箭头进入下一屏幕. 4.物料组的显示.隐藏.可选.必填跟工厂.物料类型等都有关系.比如说找到物料类型Z40的字段参考. 5.在字段参考里找到UERP,就可以设置字段的显示.隐藏.可选或是必填了. 5.我把这里设为可选条目,但是在用事务码MM01创建物料主数据的时候,物料类型为Z40的物料组仍旧是必填项目,这是因为决定

js设置控件的隐藏与显示的两种方法

js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了,下面有个示例,需要的朋友可以参考下用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性.当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility=&qu

解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题

此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的实用性.但是再好的程序也会有瑕疵,项目开发中就遇到了其提供的设置隐藏显示列的方法 table.fnSetColumnVis(colShowDic_key[i], true);//colShowDic_key[i]为列的索引.会多次提交刷新数据(有多少列会提交刷新多少次). 为解决这个问题尝试了很多种

js 控制 easyui datagrid 隐藏之后显示不来的问题

最近有的用到easyui的datagrid,有一个这样的需求,就是当触发一个事件之后控制datagrid的显示与隐藏,初始状态是将其datagrid隐藏起来. 说起隐藏datagrid的时候,也遇到了一些问题,关于easyui的datagrid是不可以直接用display这个属性的,那若是想要隐藏这个table,那么就要在它的外面写一个父级div,然后通过控制这个div的隐藏与显示去满足这个需求. <div class="divEditTabKc" style="dis

easyui的combobox下拉框初始化默认值以及保持该值一直显示的方法

easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库"字段,并且在下拉的时候,"全部数据库"一直排在最顶部. 初始化效果如下: 下拉之后的效果如下: 实现方式: easyui的combobox有一个loader属性,easyui的API对loader属性说明如下: easyui的combobox有一个onLoadSuccess事件,eas

easyui中如何设置下拉列表框combobox只能选择,列表框内不能输入

像下面这样,用easyui的combobox做的下拉列表,要使它只可以选择列表里面的值,不可以直接输入或删除值 data-options在支持HTML5的浏览器中有效,如果浏览器版本较低,那么最好直接把配置写成属性,例如: <input id="demoCombo" type="text" class="easyui-combobox" editable="false"/> 或者不行的话就用js来控制: $(&qu

利用easyUI的combobox打造自动提示组件

自动提示是时下一个很流行的功能,比如说百度.谷歌的搜索输入框都使用到了这么一个功能. 由于easyUI的combobox设计师已经考虑到了这个功能,所以只需简单几步我们可以轻松打造自己的自动提示组件. 自动提示有两种模式,一种是本地(local)一种是远程的(remote). local的意思也就是说先将所有的数据都加载到客户端页面,之后仅仅是在这些已加载的数据中去过滤,不会向服务器发出额外的请求 而remote呢,也就是说事先并不加载所有数据,而是等到用户输入关键字之后,再向服务器发出请求,返

利用easyUI的combobox打造自己主动提示组件

自己主动提示是时下一个非常流行的功能,比方说百度.谷歌的搜索输入框都使用到了这么一个功能. 因为easyUI的combobox设计师已经考虑到了这个功能.所以仅仅需简单几步我们能够轻松打造自己的自己主动提示组件. 自己主动提示有两种模式,一种是本地(local)一种是远程的(remote). local的意思也就是说先将全部的数据都载入到client页面,之后不过在这些已载入的数据中去过滤,不会向server发出额外的请求 而remote呢,也就是说事先并不载入全部数据.而是等到用户输入keyw