zoukankan      html  css  js  c++  java
  • easyUI combox静态动态联动

    easyUI重写了select,取而代之的是combobox,有如下几种方式可以创建一个combobox

    1、使用select标签,并加上class="easyui-combobox",这种方式比较适用于静态的选项

    2、使用input标签,并加上class="easyui-combobox",后面跟上data-options,可以用local或是remote方式动态加载数据

    3、使用js方式,和2基本相同,只是把combobox一些属性的设置分离到了js中

    今天我就遇到了要在静态选项中后面加上动态联动这样的情况,网上的大部分都是动态加载的。来个小清新,来个静态加载的

    <select id="modulechoose" name="permissionType" editable="false" class="easyui-combobox"
                                style=" 200px" data-options="
                    onChange:function(record){
                                var selectvalue=$('#modulechoose').combobox('getValue');
                                var url = '/sysPer/getsupermodule?pertype='+selectvalue;
                                $('#parentName').combobox('clear');
                                 if(selectvalue=='module'){
                                 $('#parentName').combobox({disabled:true});
                                }
                                else{
                                 $('#parentName').combobox({disabled:false});
                                 $('#parentName').combobox('reload',url);
                                }
                    }">
                        <option value="module" selected="selected">模块</option>
                        <option value="menu">模块子菜单</option>
                        <option value="permission">子模块操作</option>
                    </select>

    使用data-options这个属性来控制。

    具体思路是:

    1,添加一个onchange事件,检测combobox值的改变

    2,清除下一级的combobox的内容,然后重新reload异步获取的信息

    下面是下一级的combobox的内容

    <input id="parentName" name="parentName" editable="false" class="easyui-combobox"
                               data-options="valueField:'moduleId',textField:'moduleName',200"/>

    二,针对两个动态资源的联动,这个以后碰到再记录

  • 相关阅读:
    页面跳转
    获取gridview 某列的值
    C#日期格式化的几种处理方法(转)
    asp.net 退出 按钮
    asp.net控件大全(一)
    导出Excel
    DropDownList的二级联动 (SqlDataSource实现和SQL 绑定实现)
    asp.net控件大全(二)
    如何让Gridview在没有数据的时候显示表头(asp.net)
    自定义日期格式
  • 原文地址:https://www.cnblogs.com/ningheshutong/p/6409634.html
Copyright © 2011-2022 走看看