无限级别联动，怎样才能做活？

对于级别联动，相信大家都不再陌生。级别联动讲的就是一些级别不同的管理机构，通过选取上一层的组织，显示下面组织的名称。

就好比说，我这里有三个下拉框，我通过第一个下拉框选择了廊坊师范学院，第二个下拉框列表中会出现：物电学院、数信学院等等，而通过我再选取物电学院等，来显示二级学院下的专业等。

概念了解了，那么我们来说逻辑，整体逻辑：

1.加载一级目录的选项。

2.通过选取一级目录下的值，根据id来获取二级目录下的选项。

3.通过选取二级目录下的值，根据id来获取三级目录下的选项。

……以此类推。

刚开始做这一块的时候，我想着怎么去实现它？于是我先用cs做了一遍，逻辑彻底通了，之后我开始用bs做，实现也是没有问题。可是问题来了，我这么做，符不符合需求，怎样才能做活，怎样才能让这个级别联动让大家都可以用，可扩展，可维护？

下面来看看这个在MVC框架中的例子：

1.首先视图view中加载：

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;">@*前面参数是调用的方法的名字，后面是控制器名字*@
@{Html.RenderAction("PermissionComBoPartial", "ComTest");}</span></span>

2.控制器中部分：

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"> public PartialViewResult PermissionComBoPartial(){//从某处得到权限按钮的Json串，然后拼接成按钮comboEntity enCombo=new comboEntity{Id1 = "province",Id2 = "city",Id3="county",name ="dept",valueField1="provinceId",textField1="provinceName",Url1 = "GetProvince",Url2 = "GetCity",Url3="GetCounty",par1 = "provinceId",valueField2 = "cityId",textField2="cityName",valueField3="countyId",textField3="countyName",};ConverEasyUICombobox html = new ConverEasyUICombobox();ViewData["PermissionCombo"] = html.PermissionCombo(enCombo);return PartialView();}</span></span>

拼接字符串，创建下拉框部分：

<span style="font-size:18px;"> public class ConverEasyUICombobox{/// <summary>/// 拼接权限按钮/// </summary>/// <param name="list"></param>/// <returns></returns>public StringBuilder PermissionCombo(comboEntity enCombo){StringBuilder strHtml = new StringBuilder();//strHtml.Append(ConverEasyUIcombo(enCombo));//strHtml.Append(ConverEasyUIcombo1(enCombo));strHtml.Append(ConverEasyUIcombo2(enCombo));return strHtml;}//#region 转换成 combo//一级下拉框public string ConverEasyUIcombo(comboEntity enCombo){StringBuilder strBuilder = new StringBuilder();//放置html代码strBuilder.Append("<input id=\"");strBuilder.Append(enCombo.Id1);//加入IDstrBuilder.Append("\" class=\"easyui-combobox\" name=\"");strBuilder.Append(enCombo.name);strBuilder.Append("\" data-options=\"valueField:'");strBuilder.Append(enCombo.valueField1);//实际值strBuilder.Append("',textField:'");strBuilder.Append(enCombo.textField1);//显示值strBuilder.Append("',url:'");strBuilder.Append(enCombo.Url1);//数据源strBuilder.Append("'\" />");return strBuilder.ToString();}//#endregion//二级下拉框#region 转换成 combopublic string ConverEasyUIcombo1(comboEntity enCombo){//    @*<input id="province" class="easyui-combobox" data-options="//valueField: 'provinceId',//textField: 'provinceName',//url: 'GetProvince',//onSelect: function(rec){//     $.get('GetCity', { provinceId: rec.provinceId }, function (data) {//        $('#city').combobox('clear').combobox('loadData',data);//        $('#county').combobox('clear');},'json');//}">StringBuilder strBuilder = new StringBuilder();//放置html代码strBuilder.Append("<input id=\"");strBuilder.Append(enCombo.Id1);//combobox IDstrBuilder.Append("\" class=\"easyui-combobox\" name=\"");strBuilder.Append(enCombo.name);   //控件名字strBuilder.Append("\" data-options=\"valueField:'");strBuilder.Append(enCombo.valueField1);//实际值strBuilder.Append("',textField:'");strBuilder.Append(enCombo.textField1);//显示值strBuilder.Append("',url:'");strBuilder.Append(enCombo.Url1);//数据源strBuilder.Append("',onSelect: function(rec){$.get('");strBuilder.Append(enCombo.Url2);strBuilder.Append("', {");strBuilder.Append(enCombo.par1);strBuilder.Append(": rec.");strBuilder.Append(enCombo.valueField1);strBuilder.Append(" }, function (data) {");strBuilder.Append("$('#");strBuilder.Append(enCombo.Id2);strBuilder.Append("').combobox('clear').combobox('loadData',data);");//strBuilder.Append("\"$('#\"");//strBuilder.Append(enCombo.Id3);//strBuilder.Append("'\" />");//strBuilder.Append("\"').combobox('clear');},'json');\"");strBuilder.Append("},'json');}");strBuilder.Append("\"");strBuilder.Append(">");//<input id="county" class="easyui-combobox" data-options="valueField:'countyId',textField:'countyName'">*@strBuilder.Append("<input id=\"");strBuilder.Append(enCombo.Id2);//加入IDstrBuilder.Append("\" class=\"easyui-combobox\" name=\"");strBuilder.Append(enCombo.name);strBuilder.Append("\" data-options=\"valueField:'");strBuilder.Append(enCombo.valueField2);//实际值strBuilder.Append("',textField:'");strBuilder.Append(enCombo.textField2);//显示值strBuilder.Append("'\" />");return strBuilder.ToString();}#endregion//三级下拉框#region 转换成 combopublic string ConverEasyUIcombo2(comboEntity enCombo){//    @*<input id="province" class="easyui-combobox" data-options="//valueField: 'provinceId',//textField: 'provinceName',//url: 'GetProvince',//onSelect: function(rec){//     $.get('GetCity', { provinceId: rec.provinceId }, function (data) {//        $('#city').combobox('clear').combobox('loadData',data);//        $('#county').combobox('clear');},'json');//}">StringBuilder strBuilder = new StringBuilder();//放置html代码strBuilder.Append("<input id=\"");strBuilder.Append(enCombo.Id1);//combobox IDstrBuilder.Append("\" class=\"easyui-combobox\" name=\"");strBuilder.Append(enCombo.name);   //控件名字strBuilder.Append("\" data-options=\"valueField:'");strBuilder.Append(enCombo.valueField1);//实际值strBuilder.Append("',textField:'");strBuilder.Append(enCombo.textField1);//显示值strBuilder.Append("',url:'");strBuilder.Append(enCombo.Url1);//数据源strBuilder.Append("',onSelect: function(rec){$.get('");strBuilder.Append(enCombo.Url2);strBuilder.Append("', {");strBuilder.Append(enCombo.par1);strBuilder.Append(": rec.");strBuilder.Append(enCombo.valueField1);strBuilder.Append(" }, function (data) {");strBuilder.Append("$('#");strBuilder.Append(enCombo.Id2);strBuilder.Append("').combobox('clear').combobox('loadData',data);");//strBuilder.Append("\"$('#\"");//strBuilder.Append(enCombo.Id3);//strBuilder.Append("'\" />");//strBuilder.Append("\"').combobox('clear');},'json');\"");strBuilder.Append("},'json');}");strBuilder.Append("\"");strBuilder.Append(">");//<input id="county" class="easyui-combobox" data-options="valueField:'countyId',textField:'countyName'">*@//    <input id="city" class="easyui-combobox" data-options="//    valueField: 'cityId',//    textField: 'cityName',//    onSelect:function(rec){//        $.get('GetCounty', { cityId: rec.cityId }, function (data) {//            $('#county').combobox('clear').combobox('loadData',data);//        },'json');//}">strBuilder.Append("<input id=\"");strBuilder.Append(enCombo.Id2);//加入IDstrBuilder.Append("\" class=\"easyui-combobox\"");strBuilder.Append("\" data-options=\"valueField:'");strBuilder.Append(enCombo.valueField2);//实际值strBuilder.Append("',textField:'");strBuilder.Append(enCombo.textField2);//显示值strBuilder.Append("',onSelect: function(rec){$.get('");strBuilder.Append(enCombo.Url3);strBuilder.Append("', {");strBuilder.Append(enCombo.valueField2);strBuilder.Append(": rec.");strBuilder.Append(enCombo.valueField2);strBuilder.Append(" }, function (data) {");strBuilder.Append("$('#");strBuilder.Append(enCombo.Id3);strBuilder.Append("').combobox('clear').combobox('loadData',data);");strBuilder.Append("},'json');}");strBuilder.Append("\"");strBuilder.Append(">");//<input id="county" class="easyui-combobox" data-options="valueField:'countyId',textField:'countyName'">*@strBuilder.Append("<input id=\"");strBuilder.Append(enCombo.Id3);//加入IDstrBuilder.Append("\" class=\"easyui-combobox\"");strBuilder.Append(" data-options=\"valueField:'");strBuilder.Append(enCombo.valueField3);//实际值strBuilder.Append("',textField:'");strBuilder.Append(enCombo.textField3);//显示值strBuilder.Append("'\">");return strBuilder.ToString();}#endregion}</span>

这样我们就可以根据我们查询数据库返回来需要的级别，自己去生成级联下拉框。下面来看看运行效果：

1.单个下拉框的：

2.两个下拉框的：

3.三个下拉框的：

实现功能简单，但是做到可扩展，运行快，能提高用户体验度就很难了，也许这就是当下社会，实现功能的很多软件，就有那么几款为大多数用户接受的原因吧。

这个级别联动，还有不足之处就是重复代码很多，还需要改进，希望大家能够提供好的建议，一起研究，进步！

无限级别联动，怎样才能做活？相关推荐

java springMVC SSM 操作日志 4级别联动文件管理头像编辑 shiro redis
A 调用摄像头拍照,自定义裁剪编辑头像 [新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统] B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单; ...
Magento: 获取类别所有子类别 (无限级别-目录树) Get All Sub Categories
生成分类目录树(Category Tree) $rootcatId = Mage::app()->getStore()->getRootCategoryId(); $categories ...
下拉框丿html宙斯,无限级别js联动下拉框类
/* ** ============================================================================================== ...
angular 实现无限极联动下拉
在项目中有个2层的联动下拉的效果,百度了一下,发现都是在页面上写死了几个select 来实现的,在一些数据结构不一样的时候就会玩不转了.比如切换到另一个的时候它下面已经没有下一层结构的时候, 后面 ...
JS级别联动下拉列表
<form name="form1" method="post" action="index_cx.asp"> <tabl ...
借贷宝如何才能利益最大化
哈喽,我们又见面了.我前段时间分享的借贷宝狂砸20亿推广APP,最高一天破万元的文章,相信你已经看过并了解借贷宝.当然你可以现在去搜这篇借贷宝的文章,连续几周,关键词借贷宝.借贷宝推广.借贷宝APP ...
java 下拉多级联动头像裁剪调用摄像头 SpringMVC mybatis SSM
获取[下载地址] QQ 313596790 三大数据库 mysql oracle sqlsever 更专业.更强悍.适合不同用户群体 [新录针对本系统的视频教程,手把手教开发一个模块,快速 ...
怎样才能使呼叫中心创新变得更有价值
精准创新,是指在目前资源有限的情况下找出最能带来直观经济效益的创新点.创新的最终目标是为了客户认可.市场青睐,所以这时候就要从客户需求本身出发,抛开目前热门的大数据不谈,其实企业内部已经有了很好的需求 ...
java中支持mp3格式_可以播放mp3格式文件的机器，都遵守了什么协议，才能让mp3格式的文件可以：“一处保存，到处播放？...
//题主修改了问题,第一段的立场就有点奇怪了 >_<.> //不是mp3格式去适应各种机器的,是各种机器按照mp3规范通过硬件或软件去解码mp3格式的文件,然后经过DAC(数字-&g ...

无限级别联动，怎样才能做活？

无限级别联动，怎样才能做活？相关推荐

最新文章

热门文章