jQuery easyUI combobox下拉框 联动 级联

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/nnn_net/article/details/52228675

新做了一个下拉框联动的小功能,网上找的是省市级联,之前也套用了,这次是自定义的一个级联,相当于父子关系,有如下两张表:


表A: (分类表)(相当于主菜单)


表B: (目录表)(相当于子菜单)


注:LinkNumber是相当于一个序号 ,两张表之间用ClassNumber关联



前台信息填写如下:


分类名称下拉框代码:

<div style="margin-bottom: 20px; margin-right: 20px; width: 300px;">
                                            <div>分类名称: </div>
                                            <div id="_divTxtClass">
                                                <input class="easyui-textbox" id="txtClassName" type="text" data-options="prompt:'请输入分类名称',required:true" style="width: 100%; height: 32px">
                                            </div>
                                            <div id="_divSeleClass">
                                                <input style="width: 300px; height: 32px;" id="seleClass" class="easyui-combobox"
                                                       name="language"
                                                       data-options="
					                            url:'http://xxx/api/GetNavClass',
					                            method:'get',
					                            valueField:'ClassNumber',
					                            textField:'ClassName',
					                            panelHeight:'auto',
                                                   editable:false,
                                                   required:true">
                                            </div>
                                        </div>

这里直接通过data-options绑定,url请求api获取所有的分类,value,text分别绑定编号和名称,得到如下效果:


下面是通过下拉框的切换事件来改变目录下拉框的值,这里首先绑定value和text为表B的目录编号和目录名称

<div style="margin-bottom: 20px; margin-right: 20px; width: 300px;">
                                            <div>目录名称: </div>
                                            <div id="_divTxtLink">
                                                <input class="easyui-textbox" id="txtLinkName" type="text" data-options="prompt:'请输入目录名称',required:true" style="width: 100%; height: 32px">
                                            </div>
                                            <div id="_divSeleLink">
                                                <input style="width: 300px; height: 32px;" id="seleLink" class="easyui-combobox"
                                                       name="language"
                                                       data-options="
					                            method:'get',
					                            valueField:'LinkId',
					                            textField:'LinkName',
					                            panelHeight:'auto',
                                                   editable:false,
                                                   required:true"></div>

然后通过js事件,当分类下拉框的值发生改变,右边的目录下拉框对应的改变:

$('#seleClass').combobox({
                onSelect: function (row) {
                    if (row != null) {
                        $('#seleLink').combobox({
                            url: "http://xxx/api/GetNavLink?classNumber=" + row.ClassNumber
                        });
                    }
                }
            });
注:这里目录下拉框请求的api是传了一个值,也就是两表之间关联的classNumber:

 public IEnumerable<NavLink> FindLinkByNum(string classNumber)
        {
            if (string.IsNullOrWhiteSpace(classNumber))
            {
                return null;
            }
            var query = QueryFactory.DB<NavLink>().Where(c => c.ClassNumber.Equals(classNumber));
            var result = query.ToList();
            return result;
        }

这里是效果图来两张~



这里和linq的写法差的不远,反正大体意思就是,目录表(表B)里ClassNumber等于参数classsNumber的所有目录,

到这里大概就结束了,主要是利用combobox的下拉框改变事件来实现以上功能的,如果有需要给默认值,可以通过页面url参数传值到当前页,然后默认值用下面介个js来实现:

$('#cc').combobox({
onLoadSuccess :function(){
$('#cc').combobox('select','选项的valueField');
}
结束~~~



展开阅读全文

没有更多推荐了,返回首页