码迷,mamicode.com
首页 > 其他好文 > 详细

无限级别联动,怎样才能做活?

时间:2014-12-29 15:26:00      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:

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

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

  概念了解了,那么我们来说逻辑,整体逻辑:

    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);//加入ID
            strBuilder.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 转换成 combo
        public 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 ID
            strBuilder.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);//加入ID
            strBuilder.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 转换成 combo
        public 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 ID
            strBuilder.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);//加入ID
            strBuilder.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);//加入ID
            strBuilder.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.三个下拉框的:
技术分享

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

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

无限级别联动,怎样才能做活?

标签:

原文地址:http://blog.csdn.net/gaibian0823/article/details/42236819

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!