ztree实现ajax调用商品分类信息树状显示
1.在也页面中引入ztree.js
<!--引入ztree插件--> <script src="<?php echo get_url('js/jquery.ztree3.js');?>" type="text/javascript"></script> <link href="<?php echo get_theme_url ( 'css/ztree/zTreeStyle/zTreeStyle.css' ) ?>" rel="stylesheet" type="text/css" />
2.在页面中显示位置
<ul id="treeDemo" class="ztree"></ul>
3.后台数据准备:将分类信息按照指定格式传递给前台
function ztree(array & $request, array & $response, array & $app){ //$str = "["; $cats = new Category(); $trs = $cats->get_trs(); foreach($trs as $index => $value){ $tr[$index]["id"] = $value["cat_id"]; $tr[$index]["pId"] = $value["last_pid"]; $tr[$index]["name"] = $value["cat_name"]; } //开始的时候尝试直接生成的数据 // foreach($trs as $index => $value){ // $str .= "{ id:". $value['cat_id']. ", pId:" . $value['last_pid'] . ", name:\"" . $value['cat_name'] . "\"},"; // } // $str = $str . "]"; print json_encode($tr); exit; }
前台开始获取的数据样式:object{798:{id:798,pId:0,name:"衬衫"},799:{} ...}
4.JS转换成需要的数据样式,用$.each遍历出需要的数据,组成str的JSON字符串,然后用eval转换成JSON对象。最后通过$.fn.zTree.init($("#treeDemo"), setting,oStr);执行生成树状结构
参数设置参照ztree.js API:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script> var setting = { data: { simpleData: { enable: true } }, callback: { beforeClick: beforeClick, onClick: onClick } }; function beforeClick(treeId, treeNode, clickFlag) { alert('要点了啊'); return (treeNode.click != false); } function onClick(event, treeId, treeNode, clickFlag) { alert('已经点了'); } //可以执行通过的方法 $(document).ready(function() { var str = "["; $.ajax({ async : false, cache:false, type: 'POST', dataType : "json", url: "/?app_act=product/ztree&app_page=null",//请求的action路径 error: function () {//请求失败处理函数 alert('请求失败'); }, success:function(data){ //请求成功后处理函数。 //console.log(data);//此处的data是JSON对象 $.each(data,function(i,item){ str = str + "{ id:"+item.id+", pId:"+item.pId+ ", name:\"" +item.name+ "\"},"; }); str=str.substring(0,str.length-1); str = str + "]";//此时str是JSON字符串 //console.log(str); oStr = eval("("+str+")");//这货到底是做神马用的啊? 把JSON字符串转换成JSON对象 //console.log(oStr); } }); $.fn.zTree.init($("#treeDemo"), setting,oStr); }); </script>
checkbox,randio等进一步加入,学习ing!
posted on 2012-08-09 11:37 color_story 阅读(1977) 评论(0) 编辑 收藏 举报