<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<title></title>
<style>
ul{ padding-left: 24px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="main"> </div>
<script type="text/javascript">
var SearchKeys = function () {
this.Name = "";
this.Datas = new Array();
this.Parse = function (json) {
this.Name = json.Name;
for (var i = 0; i < json.Datas.length; i++) {
this.Datas.push(json.Datas[i]);
}
this.IsRed = json.isRed;
};
//根据名称查找所在的索引
this.Find = function (key) {
for (var i = 0; i < this.Datas.length; i++) {
if (this.Datas[i].Key == key) {
return i;
}
}
return -1;
};
};
var SearchClass = function () {
this.List = new Array();
this.Parse = function (json) {
for (var i = 0; i < json.length; i++) {
var cls = new SearchKeys();
cls.Parse(json[i]);
this.List.push(cls);
}
};
//转换成为JSON
this.ToJson = function () {
var strTemplate = "[";
for (var i = 0; i < this.List.length; i++) {
strTemplate += i > 0 ? "," : "";
strTemplate += "{\"Name\":\"" + this.List[i].Name + "\",\"Datas\":[";
for (var j = 0; j < this.List[i].Datas.length; j++) {
strTemplate += j > 0 ? "," : "";
strTemplate += "{\"Key\":\"" + this.List[i].Datas[j].Key + "\",\"IsRed\":\"" + this.List[i].Datas[j].IsRed + "\"}";
}
strTemplate += "]}";
}
strTemplate += "]";
return strTemplate;
};
//根据名称查找所在的索引
this.Find = function (name) {
for (var i = 0; i < this.List.length; i++) {
if (this.List[i].Name == name) {
return i;
}
}
return -1;
};
//添加分类
this.Add = function (name) {
var index = this.Find(name);
if (index >= 0) return;
var k = new SearchKeys();
k.Name = name;
this.List.push(k);
};
//修改名称
this.Midify = function (oldname, newname) {
var index = this.Find(oldname);
if (index < 0) return;
this.List[index].Name = newname;
};
//删除分类
this.Delete = function (name) {
var index = this.Find(name);
if (index < 0) return;
this.List.splice(index, 1);
}
//在分类下添加子项
this.AddSub = function (name, key, isRed) {
var index = this.Find(name);
if (index < 0) return;
var subIndex = this.List[index].Find(key);
if (subIndex >= 0) {
this.List[index].Datas[subIndex].Key = key;
this.List[index].Datas[subIndex].IsRed = isRed;
} else {
this.List[index].Datas.push({ "Key": key, "IsRed": isRed });
}
};
//修改分类下的子项
this.ModifySub = function (name, oldkey, key, isRed) {
var index = this.Find(name);
if (index < 0) return;
var subIndex = this.List[index].Find(oldkey);
if (subIndex < 0) return;
this.List[index].Datas[subIndex].Key = key;
this.List[index].Datas[subIndex].IsRed = isRed;
};
//删除分类下的子项
this.DeleteSub = function (name, key) {
var index = this.Find(name);
if (index < 0) return;
var subIndex = this.List[index].Find(key);
if (subIndex < 0) return;
this.List[index].Datas.splice(subIndex, 1);
};
this.ToHtml = function () {
var strTemplate = "<ul>";
for (var i = 0; i < this.List.length; i++) {
strTemplate += "<li>" + this.List[i].Name;
strTemplate += "<ul>";
for (var j = 0; j < this.List[i].Datas.length; j++) {
strTemplate += "<li>" + this.List[i].Datas[j].Key + "," + this.List[i].Datas[j].IsRed + "</li>";
}
strTemplate += "</ul>";
strTemplate += "</li>";
}
strTemplate += "</ul>";
return strTemplate;
};
};
var k = [{ "Name": "手套", Datas: [{ "Key": "长手套", "IsRed": true }, { "Key": "短手套", "IsRed": true}] }, { "Name": "毛绒", Datas: [{ "Key": "小毛绒", "IsRed": false }, { "Key": "毛绒熊", "IsRed": true}]}];
var classList = new SearchClass();
classList.Parse(k);
//alert(classList.List.length);
function refresh() {
$("#main").html(classList.ToHtml());
}
function addClass(name) {
classList.Add(name);
refresh();
}
function modifyClass(name,newName) {
classList.Midify(name,newName);
refresh();
}
function deleteClass(name) {
classList.Delete(name);
refresh();
}
function addKey() {
classList.AddSub("手机", "老人机",true);
classList.AddSub("手机", "智能机", false);
refresh();
}
function modifyKey() {
classList.ModifySub("手机", "智能机", "安卓机", false);
refresh();
}
function deleteKey(name,key) {
classList.DeleteSub("手机", "老人机");
refresh();
}
function shoJson() {
$("#main").html(classList.ToJson());
}
</script>
<input type="button" value="输出JSON" onclick="shoJson()"/>
<input type="button" value="添加分类拖鞋" onclick="addClass('拖鞋')"/>
<input type="button" value="修改拖鞋为手机" onclick="modifyClass('拖鞋','手机')"/>
<input type="button" value="在手机下添加智能机、老人机" onclick="addKey()"/>
<input type="button" value="修改智能机为安卓机" onclick="modifyKey()"/>
<input type="button" value="删除老人机" onclick="deleteKey('手机','老人机')"/>
<input type="button" value="删除手机" onclick="deleteClass('手机')"/>
</form>
</body>
</html>