其实JS我也不熟,但刚进新公司做WEB项目,做一个三级联动的选项栏。网上搜了很多,因为选项栏中的数据是要从数据库中取出的。听说jQuery很强大,就用jQuery了。
思路:
1 将数据库中的数据转换成JSO格式,然后用getJSON获取。
GetTypeData.aspx
protected void Page_Load(object sender, EventArgs e)
{
//从数据库中获取数据
ChooseTypeService typeService = new ChooseTypeService();
List<Cxzs_Type> typeList = typeService.GetTypeList() as List<Cxzs_Type>;
string josonStr = GetJosonData(typeList);
//写出数据
Response.Clear();
Response.Write(josonStr);
Response.End();
}
/// <summary>
/// 获取Json类型的数据
/// </summary>
/// <param name="type"></param>
/// <returns></returns>
private string GetJosonData(List<Cxzs_Type> type)
{
string strJoson = "[";
for (int i = 0; i < type.Count; i++)
{
strJoson += @"{""id"":""";
strJoson += "" + type[i].Id + "\"" + ",";
strJoson += @"""name"":""";
strJoson += "" + type[i].Name + "\"" + ",";
strJoson += @"""ParentId"":""";
strJoson += "" + type[i].ParentId + "\"" + ",";
strJoson += @"""FullName"":""";
strJoson += "" + type[i].FullName + "\"" + "}";
//多个的时候增加逗号分割符
if (type.Count > 1 && i < type.Count - 1)
{
strJoson += ",";
}
}
strJoson += "]";
return strJoson;
}
JS中获取JSON数据的代码:
$.getJSON("../data/GetTypeData.aspx", { "resultType": "json" }, function(data, textStatus) {
typeData = data;
var arrayparent = new Array();
for (var i = 0; i < data.length; i++) {
if (data[i].ParentId == 0) {
arrayparent.push(data[i]);
}
})
2 用jQuery动态的将JSON数据转换成插入HTML中
前台HTML主要代码:
<div id="mainContainer" style="border:solid 1px #CCC;">
<div id="CategorySelector">
<ul id="Category_LeftTag" class="Blank">
</ul>
<ul id="Category_CenterTag" class="Blank">
</ul>
<ul id="Category_RightTag" class="Blank">
</ul>
</div>
</div>
插入数据的JS代码:
var typeData;
$.getJSON("../data/GetTypeData.aspx", { "resultType": "json" }, function(data, textStatus) {
typeData = data;
var arrayparent = new Array();
for (var i = 0; i < data.length; i++) {
if (data[i].ParentId == 0) {
arrayparent.push(data[i]);
}
}
//添加一级标签
var parentDiv = document.getElementById("Category_LeftTag");
for (var j = 0; j <= arrayparent.length - 1; j++) {
$('<li class="leftpanel" οnclick="btnOK(this,1,' + arrayparent[j].id + ')" value="' + arrayparent[j].id + '" οnmοuseοver="" οnmοuseοut="mouseOut(this)">' + arrayparent[j].name + '</li>').appendTo(parentDiv);
}
}
)
//根据父ID获得子类
function GetChildData(id, data) {
var childData = new Array();
for (var i = 0; i < data.length; i++) {
if (id == data[i].ParentId) {
childData.push(data[i]);
}
}
return childData;
}
//添加二级标签
function spitShow(value) {
var array = GetChildData(value, typeData);
//alert(array.length);
var centerDiv = document.getElementById("Category_CenterTag");
centerDiv.innerHTML = '';
if (array.length > 0) {
for (var j = 0; j < array.length; j++) {
$('<li class="centerpanel" οnclick="btnOK(this,2,' + array[j].id + ')" value="' + array[j].id + '" οnmοuseοver="" οnmοuseοut="mouseOut(this)">' + array[j].name + '</li>').appendTo(centerDiv);
}
}
var rightDiv = document.getElementById("Category_RightTag");
rightDiv.innerHTML = '';
}
//添加三级标签 class="Selected"
function thspitShow(value) {
var array = GetChildData(value, typeData);
//alert(array.length);
var rightDiv = document.getElementById("Category_RightTag");
rightDiv.innerHTML = '';
if (array.length > 0) {
/ for (var j = 0; j < array.length; j++) {
$('<li class="rightpanel" οnclick="btnOK(this,3,' + array[j].id + ')" value="' + array[j].id + '" οnmοuseοut="mouseOut(this)">' + array[j].name + '</li>').appendTo(rightDiv);
}
}
}
//增加选择样式
function mouseOut(obj) {
}
function btnOK(obj, level, value) {
switch (level) {
case 1: $(".leftpanel").removeClass("Selected"); spitShow(value); break;
case 2: $(".centerpanel").removeClass("Selected"); break;
case 3: $(".rightpanel").removeClass("Selected"); break;
default: alert("OK"); break
}
$(obj).addClass("Selected");
//删除ID
$("li").removeAttr("id");
$(obj).attr("id","chooseTarget");
$("#selectType").attr("value", value);
var typeNameHtml = $("#typeFullName");
if (typeNameHtml.length>0) {
var typeName = $(".Selected");
if (typeName.length>0) {
var fullName = "";
for (var i = 0; i < typeName.length; i++) {
if (i != typeName.length - 1) {
fullName += typeName[i].innerHTML + '/';
}
else {
fullName += typeName[i].innerHTML;
}
}
$("#typeFullName").attr("value", fullName);
}
}
}