社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
MVC设计模式实例
先放一张效果图
数据库表设计
我的基础数据表都在一张表,可以参考我的表设计。
三键上下级关系设计,最后一个键是他上级的ID,实现上下级关系的确定。
先说说原理:无限联动下拉框是由文本框和无序列表组成,通过点击文本框实现自动查询出最外层的分类并显示出来,在点击分类查询下一级,直到没有下级分类就隐藏无序列表。并且,每次点击都把文本给回填到文本框显示出来,把ID回填到隐藏域,最终提交的对象就是隐藏域的ID。
第一步:Controller层数据查询
public ActionResult SelectProductClass(int index)
{
var list = myModels.Bs_Basics.Where(m => m.TypeID == 6 && m.Number == index).ToList();
if (list.Count > 0)
{
return Json(list, JsonRequestBehavior.AllowGet);
}
else
{
return Json("", JsonRequestBehavior.AllowGet);
}
}
如果传递一个0过来查询的就是最外层的分类,如果没有下级分类返回一个空字符。
第二步:View层的数据渲染方法
在这之前先放出html代码与样式
html代码
<div class="col-sm-8" style="position:relative;">
<input type="hidden" name="ProductClass" value="" /> //储存ID的隐藏域
<input type="text" id="ProductClass" readonly="readonly" class="form-control" value="" placeholder="请选择" style="position:relative" /> //文本框显示
<mybox><span class="glyphicon glyphicon-eye-close" id="myspan" style="position:absolute; right:-14px;top:11px;display:none; " "openTo()"></span></mybox> //眼睛小图标(用于点击他隐藏下拉框)
<mybox><div id="Box" style="display:none;"></div></mybox> <!-- 无限联动下拉框的盒子 -->
</div>
css样式
#Box{
position:absolute;
width:1000px;
height:200px;
top:36px;
left:15px;
z-index:2018;
}
#Box ul {
overflow:auto;
float:left;
height:100%;
width:160px;
border: solid 1px #d1dbe5;
background:#ffffff;
border-left:none;
}
#Box ul:first-child{
border-left:solid 1px #d1dbe5;
}
#Box ul li{
font-size: 14px;
padding: 8px 30px 8px 10px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #48576a;
height: 36px;
line-height: 1.5;
box-sizing: border-box;
cursor: pointer;
text-align:left;
}
#Box ul li:hover{
color: #fff;
background-color: #20a0ff;
}
#Box ul .li{
color: #fff;
background-color: #20a0ff;
}
数据渲染方法
function Add(index) {
var span = '<span class="glyphicon glyphicon-triangle-right" style="position:absolute;right:10px;top:11px;"></span>'; //小箭头图标
var AddValue = "";
$.post("SelectProductClass?index=" + index, function (data) { //传递参数进行提交
if (data != '') { //判断是否有数据,也就是是否有下级分类
$.each(data, function (i) { //循环数据组合成无序列表,并且把该分类的ID保持在隐藏域中
var hidden = '<input type="hidden" value=" ' + data[i].BasicsID + ' " />';
AddValue += '<li class="click" > ' + data[i].BasicsName + hidden + span + ' </li>'
});
$("#Box").append('<ul> ' + AddValue + ' </ul>'); //追加到页面上
} else {
openTo(); / //没有下级分类就隐藏下拉框
}
})
}
//显示隐藏
function openTo() { //判断无序列表组成的下拉框是什么状态,如果是显示就让他隐藏,隐藏就让他显示
if ($("#Box")[0].style.display == "block") {
$("#Box")[0].style.display = "none";
$("#myspan")[0].style.display = "none"; //隐藏眼睛小图标
} else {
$("#Box")[0].style.display = "block";
}
}
第三步:无序列表的点击事件
var array = new Array(10); //创建数组保存每一层分类的类名(用于文本框显示)
$(document).on("click", '.click', function () { //给有类名为click的添加全局点击事件。(也就是给每一个li标签添加点击事件)
var input = $("#ProductClass"); //获取显示文本框的标签后面进行赋值
var number = $(this).find("input").val(); //获取点击对象中隐藏的ID
$('#ProductForm [name="ProductClass"]').val(number); //把ID赋值给需要提交的隐藏域
$(this).siblings().attr("class", "click"); //获取同辈元素把类更新为标准状态
$(this).attr("class", "click li"); //把点击的这一个类设置为选中状态实现选中效果
//每一层由一个ul组成,获取我点击的那一层的ul在父级的索引并加1(索引从零开始)
var index = $(this).closest("ul").index() + 1;
var ul = $("#Box ul"); //获取所有的ul
for (var j = index; j < ul.length; j++) { //利用循环移除我后方的所有ul
$(ul[j]).remove();
}
for (var i = index ; i < array.length; i++) { //利用循环把我后面的数组给清空
array[i] = "";
}
array[index - 1] = $(this).text().trim(); //把该层数组的值保存在数组中
var value = "";
for (var k = 0; k < array.length; k++) { //循环数组
if ( array[k] != '') {
value += array[k] + ' / ';
}
}
value = value.substr(0,value.length - 2); //切割点后两位
input.val(value); //赋值提示文本
Add(number); //传递ID渲染下一层分类
});
第四步:焦点事件弹出下拉框。
$("#ProductClass").focus(function () { //文本框的焦点事件
openTo(); //显示
$("#myspan")[0].style.display = "inline-block"; //显示眼睛小图标(眼睛小图标的点击事件会隐藏下拉框)
});
——宋心成
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!