無限層級聯動，怎樣才能做活？

標籤：

 對於層級聯動，相信大家都不再陌生。層級聯動講的就是一些層級不同的管理機構，通過選取上一層的組織，顯示下面組織的名稱。

    就好比說，我這裡有三個下拉框，我通過第一個下拉框選擇了廊坊師範學院，第二個下拉框列表中會出現：物電學院、數信學院等等，而通過我再選取物電學院等，來顯示二級學院下的專業等。

 概念瞭解了，那麼我們來說邏輯，整體邏輯：

    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.三個下拉框的：

    實現功能簡單，但是做到可擴充，運行快，能提高使用者體驗度就很難了，也許這就是當下社會，實現功能的很多軟體，就有那麼幾款為大多數使用者接受的原因吧。

    這個層級聯動，還有不足之處就是重複代碼很多，還需要改進，希望大家能夠提供好的建議，一起研究，進步！

無限層級聯動，怎樣才能做活？