<!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>
<!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 } }; //获取当前选中的节点的值传给iframe中的textbox function zTreeOnClick(event, treeId, treeNode) { parent.frames["MatTypeMainFrame"].document.all["txtMatName"].value = treeNode.name; }; $(document).ready(function() { $.ajax({ type: "post", contentType: "application/json", url: 'GetMatrailsTypeTree.ashx', dataType: "json", error: function() {//请求失败处理函数 alert('请求失败'); }, success: function(data) { var zNodes = eval("(" + data + ")"); //强调一下，这里的eval中的括号必须要加，后台获取到的json数据是字符串，而不是数据对象，但是上面的静态数据就是数据对象，这就是这两个的区别，这个后台获取的json数据一定要转化一下才能识别出来 $.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>
<%@ 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; } } }
在这里跟大家分享一下自己的心得，因为为了搞这个jquery zTree,各种方法都试了，像什么$.parseJSON(),但是总是在jquery.ztree.core-3.5.js文件中的
getNodeCacheId: function(tId) {
return tId.substring(tId.lastIndexOf("_")+1);
},
提示
zTree 无法获取属性“lastIndexOF”的值，
最后经过一番努力查证，各种调试，找到了解决方法，就是前台和后台json数据还是有差别的，大家可以参考一下：http://www.ztree.me/v3/faq.php#_204
希望此博客对大家有用，关注一下我的微博@战族狼魂