三級或多級聯動的場景經常會碰到,比如省、市、區,比如品牌、車系、車型,比如類別的多級聯動......我們首先想到的是用三個select來展示,這是最通常的做法。但在另外一些場景中,比如確定搜索條件的時候,對於三級聯動來說,可能選擇1個,2個,或3個條件,我想,以下的方式可能更適合:
以上,可以只選擇品牌,或同時選擇品牌、車系,或同時選擇品牌、車系、車型,最后把選擇的內容展示到input上,並以逗號隔開。
可以實現的功能包括:
○ 點擊最上面的input彈出div,此時只顯示品牌區域
○ 點擊最左邊拼音首字母,導航到對應的品牌上
○ 當把鼠標移動到某個品牌上,品牌為選中狀態,其對應的車系顯示在車系區域
○ 當鼠標不在任何品牌上,所有品牌都為不選中狀態
○ 當把鼠標移動到某個車系上,車系為選中狀態,其對應的車型顯示在車型區域,選中車系的所屬品牌也為選中狀態
○ 當鼠標不在任何車系上,所有車系、品牌都為不選中狀態
○ 當把鼠標移動到某個車型上,車型為選中狀態,選中車型的所屬車系為選中狀態,選中車系所屬品牌為選中狀態
○ 當鼠標不在任何車型上,所有車型、車系、品牌為不選中狀態
○ 點擊品牌,品牌顯示到input上
○ 點擊車系,品牌、車系顯示到input上,並以逗號隔開
○ 點擊車型,品牌、車系、車型顯示到input上,並以逗號隔開
○ 點擊div上的關閉按鈕或者頁面空白區域,div隱藏
界面的構成如下:
○ 最上面的是一個input
○ 品牌、車系、車型被包裹在一個div中,點擊關閉按鈕或點擊空白處關閉的就是這個div
○ 品牌區域是一個div,分為首字母導航div和品牌顯示div
○ 車系區域是一個div
○ 車型區域是一個div
○ 品牌、車系、車型內的內容是一些dl, dt, dd的html元素
○ 樣式的事情交給css
實現的思路大致這樣:
○ 給input點擊事件,點擊彈出品牌、車系、車型顯示的div,並綁定頁面空白區域的點擊事件
○ 導航首字母指向錨點,品牌按首字母分類並提供錨點id
○ 在控制器中把品牌按照首字母分類,以json格式返回到前端,填充到tmpl模版,再追加到頁面品牌區域
○ 給品牌添加鼠標移上事件,品牌為選中狀態,對應的車系顯示在車系區域
○ 給品牌添加鼠標移去事件
○ 給品牌添加點擊事件,把點擊品牌顯示到input上
○ 給車系添加鼠標移上事件,當前車系為選中狀態,其對應的車型顯示在車型區域,其所屬的品牌為選中狀態
○ 給車系添加鼠標移去事件
○ 給車系添加點擊事件,把點擊車系和所屬品牌顯示到input上,以逗號隔開
○ 給車型添加鼠標移上事件,當前車型為選擇狀態,其所屬父類車系為選中狀態,車型所屬父類品牌也為選中狀態
○ 給車型添加點擊事件,把點擊車型和所屬車系、品牌顯示到input上,以逗號隔開
○ 給關閉按鈕添加點擊事件,關閉div,並解除頁面空白區域點擊事件的綁定
領域先行,首先是有關品牌、車系、車型的模型:
public class CarCategory{public int Id { get; set; }public string Name { get; set; }public int PId { get; set; }public string FirstLetter { get; set; }public string AnchorName { get; set; }public int Level { get; set; }}
○ PId屬性用來表示父類Id,車系的父類Id為某個品牌Id,車型的父類Id為某個車系Id
○ FirstLetter屬性用來表示首字母,作為分組的條件
○ AnchorName屬性用來表示品牌的錨點id,車系和車型此項為空
在ASP.NET MVC4中,在Shared/Layout.cshtml中,該有的css,js都必須有:
<head><meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /><title>@ViewBag.Title</title>@Styles.Render("~/Content/css")
@RenderSection("styles", required: false)<link href="~/bootstrap/css/bootstrap.min.css" rel="stylesheet" />@Scripts.Render("~/bundles/jquery")
<script src="~/bootstrap/js/bootstrap.min.js"></script>
</head><body>@RenderBody()@RenderSection("scripts", required: false)</body>
模擬一個數據庫,該數據庫類可以獲取到所有的品牌、車系、車型,以及根據品牌Id或車系Id獲取對應的車系和車型。
public class Database{public static IEnumerable<CarCategory> GetCarCategories(){return new List<CarCategory>(){new CarCategory(){Id = 0, Name = "奧迪",FirstLetter = "A",AnchorName = "aa", Level = 1, PId = -1},new CarCategory(){Id = 1, Name = "奧斯頓·馬丁",FirstLetter = "A",AnchorName = "aa", Level = 1, PId = -1},new CarCategory(){Id = 2, Name = "寶駿",FirstLetter = "B",AnchorName = "bb", Level = 1, PId = -1},new CarCategory(){Id = 3, Name = "巴博斯",FirstLetter = "B",AnchorName = "bb", Level = 1, PId = -1},new CarCategory(){Id = 4, Name = "北汽威旺",FirstLetter = "B",AnchorName = "bb", Level = 1, PId = -1},new CarCategory(){Id = 5, Name = "北汽制造",FirstLetter = "B",AnchorName = "bb", Level = 1, PId = -1},new CarCategory(){Id = 6, Name = "奔馳",FirstLetter = "B",AnchorName = "bb", Level = 1, PId = -1},new CarCategory(){Id = 7, Name = "別克",FirstLetter = "B",AnchorName = "bb", Level = 1, PId = -1},new CarCategory(){Id = 8, Name = "賓利",FirstLetter = "B",AnchorName = "bb", Level = 1, PId = -1},new CarCategory(){Id = 9, Name = "保時捷",FirstLetter = "B",AnchorName = "bb", Level = 1, PId = -1},new CarCategory(){Id = 10, Name = "比亞迪",FirstLetter = "B",AnchorName = "bb", Level = 1, PId = -1},new CarCategory(){Id = 11, Name = "奔騰",FirstLetter = "B",AnchorName = "bb", Level = 1, PId = -1},new CarCategory(){Id = 12, Name = "標致",FirstLetter = "B",AnchorName = "bb", Level = 1, PId = -1},new CarCategory(){Id = 13, Name = "本田",FirstLetter = "B",AnchorName = "bb", Level = 1, PId = -1},new CarCategory(){Id = 14, Name = "寶馬",FirstLetter = "B",AnchorName = "bb", Level = 1, PId = -1},new CarCategory(){Id = 15, Name = "北京汽車",FirstLetter = "B",AnchorName = "bb", Level = 1, PId = -1},new CarCategory(){Id = 16, Name = "昌河",FirstLetter = "C",AnchorName = "cc", Level = 1, PId = -1},new CarCategory(){Id = 17, Name = "長安",FirstLetter = "C",AnchorName = "cc", Level = 1, PId = -1},new CarCategory(){Id = 18, Name = "長城",FirstLetter = "C",AnchorName = "cc", Level = 1, PId = -1},new CarCategory(){Id = 19, Name = "奧迪A4",FirstLetter = "A",AnchorName = "", Level = 2, PId = 0},new CarCategory(){Id = 20, Name = "奧迪A6L",FirstLetter = "A",AnchorName = "", Level = 2, PId = 0},new CarCategory(){Id = 21, Name = "奧迪Q3",FirstLetter = "A",AnchorName = "", Level = 2, PId = 0},new CarCategory(){Id = 22, Name = "奧迪A4舒適版",FirstLetter = "A",AnchorName = "", Level = 3, PId = 19},new CarCategory(){Id = 23, Name = "奧迪A4尊貴版",FirstLetter = "A",AnchorName = "", Level = 3, PId = 19},new CarCategory(){Id = 24, Name = "奧迪A6L舒適版",FirstLetter = "A",AnchorName = "", Level = 3, PId = 20},new CarCategory(){Id = 25, Name = "奧迪A6L黃金版",FirstLetter = "A",AnchorName = "", Level = 3, PId = 20},new CarCategory(){Id = 26, Name = "奧迪Q3舒適版",FirstLetter = "A",AnchorName = "", Level = 3, PId = 21},new CarCategory(){Id = 27, Name = "奧迪Q3至尊版",FirstLetter = "A",AnchorName = "", Level = 3, PId = 21},};}//根據品牌或車系I獲取所有車系或車型
public static IEnumerable<CarCategory> GetCarCategoriesByPId(int pid){return GetCarCategories().Where(c => c.PId == pid);
}}
在HomeController中,在前端頁面加載的時候,這里提供一個分組好的所有品牌的json格式給前端;當前端把鼠標移動到某個品牌上,這里根據品牌Id返回車系的json格式給前端;當前端把鼠標移動到某個車系上,這里根據車系Id返回車型的json格式給前端。
public class HomeController : Controller{public ActionResult Index()
{return View();
}//獲取所有品牌
public ActionResult GetPinPai()
{var allPinPai = Database.GetCarCategories().Where(c => c.Level == 1).OrderBy(c => c.Id);var result = from p in allPinPai
group p by new
{p.FirstLetter,p.AnchorName}into gselect new {firstletter = g.Key.FirstLetter, anchor = g.Key.AnchorName, pinpais = g};
return Json(result, JsonRequestBehavior.AllowGet);
}//根據品牌Id獲取車系
[HttpPost]public ActionResult GetCheXiByPId(int pid){var allCheXi = Database.GetCarCategoriesByPId(pid).OrderBy(c => c.Id);var result = from c in allCheXi
select new {chexi = c.Name, cxid = c.Id, parentId = c.PId};
return Json(result);
}//根據車系Id獲取車型
[HttpPost]public ActionResult GetCheXingByCxId(int cxid){var allCheXing = Database.GetCarCategoriesByPId(cxid).OrderBy(c => c.Id);var result = from c in allCheXing
select new { chexing = c.Name, chexingid = c.Id, parentId = c.PId };
return Json(result);
}}
在Home/Index.cshtml視圖中,品牌、車系、車型內容都是先填充到tmpl模版中,然后追加到頁面某個區域上的。
@{ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}@section styles{<link href="~/Content/CarSelect.css" rel="stylesheet" />}<div class="input-group"><input type="text" id="mychoice" class="form-control"><span class="input-group-btn"><button class="btn btn-default" type="button">∨</button></span></div><div id="carcategory-picker-outer">
<a href="javascript:void(0)" class="cancel"></a><div id="carcategory-picker-inner">
<div id="pinpai" class="carcategory-list"><h6>請選擇品牌</h6><div id="PreLetter">
<a href="#aa">A</a>
<a href="#bb">B</a>
<a href="#cc">C</a>
<a href="#dd">D</a>
<a href="#ff">F</a>
<a href="#gg">G</a>
<a href="#hh">H</a>
<a href="#jj">J</a>
<a href="#kk">K</a>
<a href="#ll">L</a>
<a href="#mm">M</a>
<a href="#nn">N</a>
<a href="#oo">O</a>
<a href="#qq">Q</a>
<a href="#rr">R</a>
<a href="#ss">S</a>
<a href="#ww">W</a>
<a href="#xx">X</a>
<a href="#yy">Y</a>
<a href="#zz">Z</a>
</div><div id="AllPinPai">
</div></div><div id="chexi" class="carcategory-list"><h6>請選擇車系</h6><div id="AllCheXi">
</div></div><div id="chexin" class="carcategory-list"><h6>請選擇車型</h6><div id="AllCheXing">
</div></div></div></div>@section scripts{<script src="~/Scripts/jquery.tmpl.min.js"></script>
<script type="text/javascript">
$(function() {//加載所有品牌
$.getJSON('@Url.Action("GetPinPai", "Home")', function(data) {$('#pinpaiTemplate').tmpl(data).appendTo('#AllPinPai');});//點擊input彈出品牌車系車型選擇
$('#mychoice').on("click", function() {
$('#carcategory-picker-outer').css('display', 'block');$("body").bind("mousedown", onBodyDown);//綁定鼠標單擊事件});//點擊關閉按鈕隱藏品牌車系車型選擇
$('.cancel').on("click", function() {
hideMenu();});//給所有品牌加上鼠標移動上事件
$('#AllPinPai').on("mouseover", ".ppm", function() {$(this).addClass('selected');
$('#chexi').css("display", "block");$.post('@Url.Action("GetCheXiByPId","Home")', { 'pid': $(this).attr('pid') }, function (data) {$('#AllCheXi').empty();$('#AllCheXing').empty();$('#chexiTemplate').tmpl(data).appendTo('#AllCheXi');});});//給所有品牌加上鼠標移去事件
$('#AllPinPai').on("mouseout", ".ppm", function () {$(this).removeClass('selected');
});//品牌點擊事件
$('#AllPinPai').on("click", ".ppm", function () {$('#mychoice').val('');$('#mychoice').val($(this).text());
hideMenu();});//給車系加上鼠標移動上事件
$('#AllCheXi').on("mouseover", ".cxm", function () {//取取當前車系的父類Id
var parentId = $(this).attr('parentid');
//把品牌中該父類添加selected這個類
$('#AllPinPai').find("a[pid='" + parentId + "']").addClass('selected');$(this).addClass('selected');
$('#chexin').css("display", "block");$.post('@Url.Action("GetCheXingByCxId","Home")', { 'cxid': $(this).attr('pid') }, function (data) {$('#AllCheXing').empty();$('#chexingTemplate').tmpl(data).appendTo('#AllCheXing');});});//給車系加上鼠標移去事件
$('#AllCheXi').on("mouseout", ".cxm", function () {$(this).removeClass('selected');
//取取當前車系的父類Id
var parentId = $(this).attr('parentid');
//把品牌中該父類添加selected這個類
$('#AllPinPai').find("a[pid='" + parentId + "']").removeClass('selected');});//車系點擊事件
$('#AllCheXi').on("click", ".cxm", function () {$('#mychoice').val('');//取取當前車系的父類Id
var parentId = $(this).attr('parentid');
$('#mychoice').val($('#AllPinPai').find("a[pid='" + parentId + "']").text() + "," + $(this).text());hideMenu();});//給車型加上鼠標移上事件
$('#AllCheXing').on("mouseover", ".cxim", function () {//取出車型的父類id
var parentId = $(this).attr('parentid');
//把車系中該父類添加selected這個類
$('#AllCheXi').find("a[pid='" + parentId + "']").addClass('selected');//取出車系的父類id
var parentparentId = $('#AllCheXi').find("a[pid='" + parentId + "']").attr('parentid');//把品牌中該父類添加selected這個類
$('#AllPinPai').find("a[pid='" + parentparentId + "']").addClass('selected');});//給車型加上鼠標移去事件
$('#AllCheXing').on("mouseout", ".cxim", function () {//取出車型的父類id
var parentId = $(this).attr('parentid');
//把車系中該父類添加selected這個類
$('#AllCheXi').find("a[pid='" + parentId + "']").removeClass('selected');//取出車系的父類id
var parentparentId = $('#AllCheXi').find("a[pid='" + parentId + "']").attr('parentid');//把品牌中該父類添加selected這個類
$('#AllPinPai').find("a[pid='" + parentparentId + "']").removeClass('selected');});//車型點擊事件
$('#AllCheXing').on("click", ".cxim", function () {$('#mychoice').val('');//取出車型的父類id
var parentId = $(this).attr('parentid');
//取出車系的父類id
var parentparentId = $('#AllCheXi').find("a[pid='" + parentId + "']").attr('parentid');$('#mychoice').val($('#AllPinPai').find("a[pid='" + parentparentId + "']").text() + "," + $('#AllCheXi').find("a[pid='" + parentId + "']").text() + "," + $(this).text());hideMenu();});});//隱藏樹並解除綁定
function hideMenu() {$("#carcategory-picker-outer").fadeOut("fast");$("body").unbind("mousedown", onBodyDown);}//鼠標單擊空白處事件
function onBodyDown(event) {
if (!(event.target.id == "mychoice" || event.target.id == "carcategory-picker-outer" || $(event.target).parents("#carcategory-picker-outer").length > 0)) {hideMenu();}}</script><script id="pinpaiTemplate" type="text/x-jQuery-tmpl"><dl><dt id="${anchor}">${firstletter}</dt>
{{if pinpais}}
{{each pinpais}}<dd><a class="ppm" pid="${$value.Id}">${$value.Name}</a></dd>{{/each}}{{else}}
<dd>沒有此品牌</dd>{{/if}}
</dl></script><script id="chexiTemplate" type="text/x-jQuery-tmpl"><dl><dd><a class="cxm" pid="${cxid}" parentid="${parentId}">${chexi}</a></dd></dl></script><script id="chexingTemplate" type="text/x-jQuery-tmpl"><dl><dd><a class="cxim" pid="${chexingid}" parentid="${parentId}">${chexing}</a></dd></dl></script>}
css部分如下,關閉按鈕可自找。
展開