jquery zTree插件 json 数据详解

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<!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">
<title>材料类别</title>
<link rel="stylesheet" href="../../Scripts/zTree_v3/css/demo.css" type="text/css">
<link rel="stylesheet" href="../../Scripts/zTree_v3/css/zTreeStyle/zTreeStyle.css"
type="text/css"> <script type="text/javascript" src="../../Scripts/zTree_v3/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="../../Scripts/zTree_v3/js/jquery.ztree.core-3.5.js"></script><script type="text/javascript">
var setting = {
data: {
simpleData: {
enable: true
}
}, callback: {
onClick: zTreeOnClick
}
}; function zTreeOnClick(event, treeId, treeNode) {
parent.frames["MatTypeMainFrame"].document.all["txtMatName"].value = treeNode.name;
};
var zNodes = [
{ name: '材料类别', open: true,
children: [
{ name: '主要材料',
children: [
{ name: '黑色金属',
children: [
{ name: '钢筋' },
{ name: '槽钢' },
{ name: '角钢' },
{ name: '工字钢' },
{ name: '钢板' },
{ name: '焊管' },
{ name: '方管' },
{ name: '扁钢' },
{ name: '扁铁' },
{ name: '镀锌管' },
{ name: 'H型钢' },
{ name: '方钢' },
{ name: '铁皮' },
{ name: '带钢' },
{ name: '其它' },
{ name: '合金板' }, ]
},
{ name: '有色金属',
children: [
{ name: '铜类材料' },
{ name: '铝制材料' },
{ name: '铅、锌、锡制材料' },
]
},
{ name: '地材',
children: [
{ name: '砖类' },
{ name: '砂类' },
{ name: '石子类' },
{ name: '白灰粉' },
{ name: '白灰膏' },
{ name: '瓦类' },
{ name: '其它' },
{ name: '土类' }, ]
},
{ name: '木竹矽酸盐制品',
children: [
{ name: '竹笆子' },
{ name: '跳板' },
{ name: '细木工板' },
{ name: '三合板' },
{ name: '竹竿' },
{ name: '商品混凝土' },
{ name: '水泥' },
{ name: '加气块' },
{ name: '白水泥' },
{ name: '苯板' },
{ name: '混凝土管' },
{ name: '排烟道' },
{ name: '挤塑板' },
{ name: '玻璃' },
{ name: '地砖、墙面砖类' },
{ name: '砂浆类' },
{ name: '其它' }, ]
},
{ name: '金属制品',
children: [{ name: '螺丝' },
{ name: '螺帽' },
{ name: '网类' },
{ name: '锁类' },
{ name: '山型卡及卡扣' },
{ name: '收口网' },
{ name: '钉类' },
{ name: '螺栓' },
{ name: '合页' },
{ name: '钢丝' },
{ name: '铁丝' },
{ name: '直螺纹套筒及套筒头子' },
{ name: '钢、铁丝绳类' },
{ name: '电焊条' },
{ name: '其他类' },
{ name: '彩钢板' },
{ name: '钢丝绳' },
{ name: '黑铁丝' },
]
},
{ name: '油漆化工及油料',
children: [
{ name: '油漆' },
{ name: '涂料' },
{ name: '稀释剂' },
{ name: '腻子' },
{ name: '涂料' },
{ name: '粉、水、脂、剂、膏、胶、液、油、气等化工制品' },
{ name: '乳胶漆' },
{ name: '其它' },
{ name: '铝合金面漆' },
{ name: '铝合金底漆' },
{ name: '铝合金稀料' }, { name: '塑化剂' }, ]
},
{ name: '水暖材料',
children: [
{ name: 'PVC排水管' },
{ name: 'PP-R给水管' },
{ name: 'PP-R给水管管件' },
{ name: 'PVC排水管管件' },
{ name: '存水弯' },
{ name: '弯头' },
{ name: '阀门' },
{ name: '消防器材' },
{ name: '卫生洁具及配件' },
{ name: '地漏' },
{ name: '其它材料' },
{ name: '水泵' },
{ name: '计量仪器' },
{ name: '其他' },
]
},
{ name: '电工器材',
children: [
{ name: '电线' },
{ name: '电缆' },
{ name: '电箱' },
{ name: '灯具及配件' },
{ name: '保险材料' },
{ name: '开关、插座及附属材料' },
{ name: '计量仪器' },
{ name: '管线设备及附属材料' },
{ name: '电缆连接件及附属材料' },
{ name: '变压器' },
{ name: '稳压器' },
{ name: '启动器' },
{ name: '瓷瓶' },
{ name: '托线盘' },
{ name: '镇流器' },
{ name: '线鼻子' },
{ name: 'PVC线管及管件' },
{ name: '线盒' },
{ name: '其它' },
{ name: '日用电器' },
{ name: '铜编织袋' }, ]
},
{ name: '其他材料',
children: [
{ name: '电池', children: [] },
{ name: '灌类', children: [] },
{ name: '刷子类', children: [] },
{ name: '笔、刀类', children: [] },
{ name: '纸、袋类', children: [] },
{ name: '桶类', children: [] },
{ name: '生活用品', children: [] },
{ name: '线、绳、布、带类', children: [] },
{ name: '管类', children: [] },
{ name: '柱卡及卡垫类', children: [] },
{ name: '杂品', children: [
{ name: '砼车空载费' },
{ name: '脚手架轮子' },
{ name: '叉车费' },
{ name: '维修费' },
{ name: '砼机开关' },
{ name: '打砼机开关' },
{ name: '打砼机扶手' },
{ name: '运费'}]
},
{ name: '胶带', children: [] },
{ name: '消声器', children: [] },
{ name: '连轴器', children: []}]}]
},
{ name: '周转材料',
children:
[
{ name: '钢管', children: [] },
{ name: '扣件', children: [] },
{ name: '顶托', children: [] },
{ name: '支托', children: [] },
{ name: '模板', children: [] },
{ name: '木方', children: [] },
{ name: '钢跳板', children: [] }, ]
},
{ name: '配件材料',
children: [
{ name: '机械配件',
children: [
{ name: '电机' },
{ name: '修理类配件' },
{ name: '轴承' },
{ name: '地泵管口' },
{ name: '地泵管口' },
{ name: '离合器' },
{ name: '整流模块' },
{ name: '尼龙件' },
{ name: '润滑脂泵' },
{ name: '丙轮' }
]
},
{ name: '门', children: [] },
{ name: '窗', children: [] },
{ name: '板', children: [] },
{ name: '烟道', children: [] },
{ name: '桩', children: [] },
{ name: '门窗玻璃总成', children: [] }, ]
},
{ name: '半成品材料',
children: [
{ name: '钢铁构件', children: [] },
{ name: '木制品', children: [] }
]
},
{ name: '低值易耗品',
children: [
{ name: '土木工具', children: [] },
{ name: '切削工具', children: [{ name: '磨光机' }, ] },
{ name: '起重运输工具', children: [] },
{ name: '电焊及其它工具', children: [] },
{ name: '劳保用品安全防护', children: [{ name: '劳保用品' }, { name: '安全网'}] }, ]
},
{ name: '塑化剂', children: [], isParent: true },
{ name: '金属制品', children: [], isParent: true }
]
}
]; $(document).ready(function() { $.fn.zTree.init($("#treeDemo"), setting, zNodes); });
</script></head>
<body>
<form id="form1" runat="server">
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree">
</ul>
</div>
</div>
</form>
</body>
</html>

静态数据直接生成jQuery+zTree

后台获取json字符串数据

<%@ WebHandler Language="C#" Class="GetMatrailsTypeTree" %>using System;
using System.Web;public class GetMatrailsTypeTree : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
System.Text.StringBuilder str = new System.Text.StringBuilder();
str.Append("[");//如果不成功的话去掉这个拼接字符串
str.Append("{ name: '材料类别', open: true,");
str.Append(" children: [");
str.Append(" {");
str.Append(" name: '主要材料',");
str.Append(" children: [");
str.Append(" {");
str.Append(" name: '黑色金属',");
str.Append(" children: [");
str.Append(" { name: '钢筋' },");
str.Append(" { name: '槽钢' },");
str.Append(" { name: '角钢' },");
str.Append(" { name: '工字钢' },");
str.Append(" { name: '钢板' },");
str.Append(" { name: '焊管' },");
str.Append(" { name: '方管' },");
str.Append(" { name: '扁钢' },");
str.Append("{ name: '扁铁' },");
str.Append(" { name: '镀锌管' },");
str.Append(" { name: 'H型钢' },");
str.Append(" { name: '方钢' },");
str.Append(" { name: '铁皮' },");
str.Append(" { name: '带钢' },");
str.Append(" { name: '其它' },");
str.Append("{ name: '合金板' }, ]");
str.Append(" },");
str.Append(" {");
str.Append(" name: '有色金属',");
str.Append(" children: [");
str.Append(" { name: '铜类材料' },");
str.Append(" { name: '铝制材料' },");
str.Append(" { name: '铅、锌、锡制材料' },");
str.Append(" ]");
str.Append(" },");
str.Append(" {");
str.Append(" name: '地材',");
str.Append(" children: [");
str.Append(" { name: '砖类' },");
str.Append(" { name: '砂类' },");
str.Append(" { name: '石子类' },");
str.Append(" { name: '白灰粉' },");
str.Append(" { name: '白灰膏' },");
str.Append(" { name: '瓦类' },");
str.Append(" { name: '其它' },");
str.Append(" { name: '土类' }, ]");
str.Append("},");
str.Append(" {");
str.Append(" name: '木竹矽酸盐制品',");
str.Append(" children: [");
str.Append(" { name: '竹笆子' },");
str.Append(" { name: '跳板' },");
str.Append(" { name: '细木工板' },");
str.Append("{ name: '三合板' },");
str.Append(" { name: '竹竿' },");
str.Append(" { name: '商品混凝土' },");
str.Append(" { name: '水泥' },");
str.Append(" { name: '加气块' },");
str.Append(" { name: '白水泥' },");
str.Append(" { name: '苯板' },");
str.Append(" { name: '混凝土管' },");
str.Append(" { name: '排烟道' },");
str.Append(" { name: '挤塑板' },");
str.Append(" { name: '玻璃' },");
str.Append(" { name: '地砖、墙面砖类' },");
str.Append(" { name: '砂浆类' },");
str.Append(" { name: '其它' }, ]");
str.Append(" },");
str.Append("{");
str.Append(" name: '金属制品',");
str.Append(" children: [{ name: '螺丝' },");
str.Append(" { name: '螺帽' },");
str.Append(" { name: '网类' },");
str.Append(" { name: '锁类' },");
str.Append("{ name: '山型卡及卡扣' },");
str.Append(" { name: '收口网' },");
str.Append(" { name: '钉类' },");
str.Append(" { name: '螺栓' },");
str.Append(" { name: '合页' },");
str.Append("{ name: '钢丝' },");
str.Append(" { name: '铁丝' },");
str.Append(" { name: '直螺纹套筒及套筒头子' },");
str.Append(" { name: '钢、铁丝绳类' },");
str.Append(" { name: '电焊条' },");
str.Append(" { name: '其他类' },");
str.Append("{ name: '彩钢板' },");
str.Append("{ name: '钢丝绳' },");
str.Append(" { name: '黑铁丝' },");
str.Append(" ]");
str.Append(" },");
str.Append(" {");
str.Append(" name: '油漆化工及油料',");
str.Append(" children: [");
str.Append(" { name: '油漆' },");
str.Append(" { name: '涂料' },");
str.Append(" { name: '稀释剂' },");
str.Append("{ name: '腻子' },");
str.Append("{ name: '涂料' },");
str.Append(" { name: '粉、水、脂、剂、膏、胶、液、油、气等化工制品' },");
str.Append(" { name: '乳胶漆' },");
str.Append(" { name: '其它' },");
str.Append(" { name: '铝合金面漆' },");
str.Append(" { name: '铝合金底漆' },");
str.Append(" { name: '铝合金稀料' }, { name: '塑化剂' }, ]");
str.Append(" },");
str.Append(" {");
str.Append(" name: '水暖材料',");
str.Append(" children: [");
str.Append(" { name: 'PVC排水管' },");
str.Append("{ name: 'PP-R给水管' },");
str.Append(" { name: 'PP-R给水管管件' },");
str.Append(" { name: 'PVC排水管管件' },");
str.Append(" { name: '存水弯' },");
str.Append(" { name: '弯头' },");
str.Append(" { name: '阀门' },");
str.Append(" { name: '消防器材' },");
str.Append(" { name: '卫生洁具及配件' },");
str.Append(" { name: '地漏' },");
str.Append(" { name: '其它材料' },");
str.Append(" { name: '水泵' },");
str.Append(" { name: '计量仪器' },");
str.Append(" { name: '其他' },");
str.Append(" ]");
str.Append(" },");
str.Append(" {");
str.Append(" name: '电工器材',");
str.Append(" children: [");
str.Append(" { name: '电线' },");
str.Append(" { name: '电缆' },");
str.Append(" { name: '电箱' },");
str.Append(" { name: '灯具及配件' },");
str.Append(" { name: '保险材料' },");
str.Append(" { name: '开关、插座及附属材料' },");
str.Append(" { name: '计量仪器' },");
str.Append(" { name: '管线设备及附属材料' },");
str.Append(" { name: '电缆连接件及附属材料' },");
str.Append("{ name: '变压器' },");
str.Append(" { name: '稳压器' },");
str.Append("{ name: '启动器' },");
str.Append(" { name: '瓷瓶' },");
str.Append(" { name: '托线盘' },");
str.Append(" { name: '镇流器' },");
str.Append(" { name: '线鼻子' },");
str.Append("{ name: 'PVC线管及管件' },");
str.Append(" { name: '线盒' },");
str.Append(" { name: '其它' },");
str.Append(" { name: '日用电器' },");
str.Append("{ name: '铜编织袋' }, ]");
str.Append(" },");
str.Append(" {");
str.Append(" name: '其他材料',");
str.Append(" children: [");
str.Append(" { name: '电池', children: [] },");
str.Append(" { name: '灌类', children: [] },");
str.Append(" { name: '刷子类', children: [] },");
str.Append(" { name: '笔、刀类', children: [] },");
str.Append(" { name: '纸、袋类', children: [] },");
str.Append(" { name: '桶类', children: [] },");
str.Append(" { name: '生活用品', children: [] },");
str.Append(" { name: '线、绳、布、带类', children: [] },");
str.Append(" { name: '管类', children: [] },");
str.Append(" { name: '柱卡及卡垫类', children: [] },");
str.Append(" {");
str.Append(" name: '杂品', children: [");
str.Append(" { name: '砼车空载费' },");
str.Append(" { name: '脚手架轮子' },");
str.Append(" { name: '叉车费' },");
str.Append(" { name: '维修费' },");
str.Append(" { name: '砼机开关' },");
str.Append(" { name: '打砼机开关' },");
str.Append(" { name: '打砼机扶手' },");
str.Append(" { name: '运费' }]");
str.Append(" },");
str.Append(" { name: '胶带', children: [] },");
str.Append(" { name: '消声器', children: [] },");
str.Append(" { name: '连轴器', children: [] }]");
str.Append(" }]");
str.Append(" },");
str.Append(" {");
str.Append(" name: '周转材料',");
str.Append(" children:");
str.Append(" [");
str.Append(" { name: '钢管', children: [] },");
str.Append(" { name: '扣件', children: [] },");
str.Append("{ name: '顶托', children: [] },");
str.Append(" { name: '支托', children: [] },");
str.Append(" { name: '模板', children: [] },");
str.Append(" { name: '木方', children: [] },");
str.Append(" { name: '钢跳板', children: [] }, ]");
str.Append(" },");
str.Append(" {");
str.Append(" name: '配件材料',");
str.Append(" children: [");
str.Append(" {");
str.Append(" name: '机械配件',");
str.Append(" children: [");
str.Append(" { name: '电机' },");
str.Append("{ name: '修理类配件' },");
str.Append(" { name: '轴承' },");
str.Append("{ name: '地泵管口' },");
str.Append("{ name: '地泵管口' },");
str.Append(" { name: '离合器' },");
str.Append(" { name: '整流模块' },");
str.Append(" { name: '尼龙件' },");
str.Append(" { name: '润滑脂泵' },");
str.Append(" { name: '丙轮' }");
str.Append(" ]");
str.Append(" },");
str.Append(" { name: '门', children: [] },");
str.Append(" { name: '窗', children: [] },");
str.Append(" { name: '板', children: [] },");
str.Append(" { name: '烟道', children: [] },");
str.Append(" { name: '桩', children: [] },");
str.Append(" { name: '门窗玻璃总成', children: [] }, ]");
str.Append(" },");
str.Append(" {");
str.Append(" name: '半成品材料',");
str.Append(" children: [");
str.Append("{ name: '钢铁构件', children: [] },");
str.Append(" { name: '木制品', children: [] }");
str.Append(" ]");
str.Append(" },");
str.Append(" {");
str.Append(" name: '低值易耗品',");
str.Append(" children: [");
str.Append(" { name: '土木工具', children: [] },");
str.Append(" { name: '切削工具', children: [{ name: '磨光机' }, ] },");
str.Append(" { name: '起重运输工具', children: [] },");
str.Append("{ name: '电焊及其它工具', children: [] },");
str.Append("{ name: '劳保用品安全防护', children: [{ name: '劳保用品' }, { name: '安全网' }] }, ]");
str.Append(" },");
str.Append(" { name: '塑化剂', children: [], isParent: true },");
str.Append(" { name: '金属制品', children: [], isParent: true }");
str.Append(" ]");
str.Append(" }");
str.Append("]");//如果测试不通过的话把这个拼接的去掉
context.Response.Write(str.ToString());
} public bool IsReusable
{
get
{
return false;
}
}}