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="width: 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',width:200"/>

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

 

posted @ 2017-02-17 14:14  凝荷  阅读(2250)  评论(0编辑  收藏  举报