EasyUI Combobox 級聯查詢

00潤物無聲00發表於2016-02-28

        在維護市委組織部專案的時候,使用了級聯組合框,維護的時候是Asp.net,純三層架構+Aspx頁面+ashx(一般處理程式),在重構市委組織部專案的時候,用到了ITOO的框架,在ITOO4.1專案中熟悉了基本的框架,組織部專案中搭了三次框架,對框架的理解更深刻了一些;

        ITOO框架,前臺使用MVC,在頁面cshtml和Controller之間傳值,實現級聯組合框,程式碼和維護時候的一樣;

前臺頁面程式碼:

  單位類別:
    <input id ="unitCategory" class="easyui-combobox" name ="cc" data-options="
        method:'get',
        valueField:'id',
        textField:'text',
        url:'/CadresRate/queryCategory',
        panelHeight:'auto',
        onSelect:function(rec)          //rec表示被選擇的內容,把id值傳到controller中;                          
        {
            var url ='/CadresRate/queryUnitName?id=' +rec.id ;
            $('#unitName').combobox('reload',url);    //重新載入單位名稱的組合框;
        }
"/>
    單位名稱
    <input id ="unitName2" class ="easyui-combobox" name ="cc" data-options="
        panelHeight:'auto',
        valueField:'id',
        textField:'id'
        " />

Controller中程式碼:

        頁面載入查詢出所有的單位類別;

        #region queryCategory + 查詢單位型別 範曉權 2016年2月26日
        /// <summary>
        /// 查詢單位型別;
        /// </summary>
        /// <returns></returns>
        public JsonResult queryCategory()
        {
            //定義一個字典的ViewModel
            BasicDictionaryViewModel vBasicDictionary = new BasicDictionaryViewModel()
            {
                //表示設定vBasicDictionary.DictionaryType = 5
                DictionaryType = 5
            };
            //呼叫伺服器的查詢型別的方法;
            List<BasicDictionaryViewModel> basicDictionary = IBasicDictionary.queryType(vBasicDictionary);
            
            //選擇字典id 和 基礎資訊
            var unitCategory = from c in basicDictionary
                               select new
                               {
                                   id = c.DictionaryName,
                                   text = c.BasicInfoType

                               };
            return Json(unitCategory, JsonRequestBehavior.AllowGet);
        } 
        #endregion

<pre name="code" class="csharp">        #region queryUnitName 根據單位類別查詢單位名稱;
        /// <summary>
        /// queryUnitName
        /// </summary>
        /// <returns></returns>
        public JsonResult queryUnitName()
        {
            string type = Request["id"].ToString();

            //
            if (type == "xsq")
            {
                List<CityBasicInfoViewModel> cityBasicInfoList = ICityBasicInfo.queryAllCity();
                var tempCityBasicInfoList = from c in cityBasicInfoList
                                            select new
                                            {
                                                id = c.CityID,
                                                text = c.CityName
                                            };
                return Json(tempCityBasicInfoList, JsonRequestBehavior.AllowGet);
            }
            else if (type == "szdw")
            {
                List<UnitBasicInfoViewModel> unitBasicInfoList = IUnitBasicInfo.queryAllUnit();
                var tempUnitBasicInfoList = from p in unitBasicInfoList
                                        select new
                                        {
                                            id = p.UnitID,
                                            text = p.UnitName
                                        };


                return Json(tempUnitBasicInfoList, JsonRequestBehavior.AllowGet);
            }
            else if (type == "kfq")
            {
                List<DevelopmentBasicInfoViewModel> developmentBasicInfoList = IDevelopmentBasicInfo.queryAllDevelopment();
                var tempDevelopmentBasicInfoList = from a in developmentBasicInfoList
                                                   select new
                                                   {
                                                       id = a.DevelopmentID,
                                                       text = a.DevelopmentName
                                                   };
                return Json(tempDevelopmentBasicInfoList, JsonRequestBehavior.AllowGet);
            }
            else
            {
                return null;
            }
        }


效果圖:


總結:

        舉一反三,根據二級的級聯選單,可以發展為N級的級聯,省,市,縣也是級聯中經常用到的,多實現,積累自己的程式碼庫,很重要。經常用到的內容就收藏或者寫出來;



相關文章