樹狀列表
阿新 • • 發佈:2018-02-05
png ren bsp 冒泡 ner 一次 window json格式 字符串
alvintree文件
css樣式
@charset "utf-8"; .alvintree_item{ height:30px;font-size:14px; font-family:微軟雅黑; text-align:left; vertical-align:middle; line-height:30px; padding:0px 5px; background-image:url(../img/close.png); background-size:20px 20px; background-repeat:no-repeat; background-position:top 5px left 5px;} .alvintree_item_nr{ margin-left:25px;} .alvintree_item_nr:hover{ cursor:pointer} .alvintree_item_open{ background-image:url(../img/open.png)} .alvintree_item span:hover{ color:red !important; cursor:pointer} .alvintree_item:hover{ cursor:pointer}
alvintree. js文件
/* *造樹狀列表對象的方法 *@param config 傳入的配置參數 */ var AlvinTree = function(config){ var data = config.data; var container = config.container; var ishidden = config.ishidden; var urlopen = "../alvintree/img/open.png";//用的時候註意修改路徑 var urlclose = "../alvintree/img/close.png";//用的時候註意修改路徑 //顯示列表 var str = showitem(data,ishidden,0); $("#"+container).html(str); //為列表加點擊事件 $("#"+container+" .alvintree_item").click(function(){ //判斷該列表下有沒有子集 if($(this).next(".alvintree_item_wai").length){ //點擊顯示和收起 if($(this).next(".alvintree_item_wai").css("display")=="none"){ //打開 $(this).next(".alvintree_item_wai").css("display","block"); //變圖標 $(this).css("background-image","url("+urlopen+")"); }else{ //收起 $(this).next(".alvintree_item_wai").css("display","none"); //變圖標 $(this).css("background-image","url("+urlclose+")"); } }else{ //無子集 } }) //點擊選中的事件 $("#"+container+" .alvintree_item span").click(function(){ //取消其它選中 $("#"+container+" .alvintree_item span").attr("sel",0); $("#"+container+" .alvintree_item span").css("color","black"); //該項選中 $(this).attr("sel",1); $(this).css("color","red"); //阻止冒泡 return false; }) /* *獲取選中項值的方法 *@return 返回選中的值 */ this.getvalue = function getvalue(){ var v = ""; var item = $("#"+container+" .alvintree_item span"); for(var i=0; i<item.length;i++){ if(item.eq(i).attr("sel")=="1"){ v = item.eq(i).attr("tag"); } } return v; } } /* *加載數據的方法 *@param data 要顯示的數據是JSON格式 *@param indent 縮進的值,單位是像素 *@param ishidden 是否默認隱藏子列表 *return string 返回造好的HTML元素 */ function showitem(data,ishidden,indent){ //字符串 var str = ""; //判斷是否需要隱藏 if(indent>0 && ishidden){ str+="<div class=‘alvintree_item_wai‘ style=‘display:none‘>"; }else{ str+="<div class=‘alvintree_item_wai‘>"; } //遍歷數組 for(var k in data){ //加載當前數組中的數據 //判斷當前數組中是否有下一級數據,如果有則為加號,沒有為減號 if(data[k].item.length>0){ str+="<div style=‘margin-left:"+indent+"px‘ class=‘alvintree_item‘ ><span tag=‘"+data[k].tag+"‘ class=‘alvintree_item_nr‘>"+data[k].name+"</span></div>"; }else{ str+="<div style=‘margin-left:"+indent+"px‘ class=‘alvintree_item alvintree_item_open‘ ><span tag=‘"+data[k].tag+"‘ class=‘alvintree_item_nr‘>"+data[k].name+"</span></div>"; } //判斷當前數組中是否有下一級數據,如果有則加載 if(data[k].item.length>0){ str += showitem(data[k].item,ishidden,indent+30); } } str += "</div>"; return str; } // ************************************************************************ /* *造樹多選狀列表對象的方法 *@param config 傳入的配置參數 */ var AlvinTrees = function(config){ var data = config.data; var container = config.container; var ishidden = config.ishidden; //顯示列表 var str = showitems(data,ishidden,0,0); $("#"+container).html(str); //為列表加點擊事件 $("#"+container+" .alvintree_item").click(function(){ //判斷該列表下有沒有子集 if($(this).next(".alvintree_item_wai").length){ //點擊顯示和收起 if($(this).next(".alvintree_item_wai").css("display")=="none"){ //打開 $(this).next(".alvintree_item_wai").css("display","block"); //變圖標 $(this).css("background-image","url("+urlopen+")"); }else{ //收起 $(this).next(".alvintree_item_wai").css("display","none"); //變圖標 $(this).css("background-image","url("+urlclose+")"); } }else{ //無子集 } }) //點擊選中的事件 $("#"+container+" .alvintree_item label").click(function(evt){ //做全選 //取當前選中狀態 var zt = $(this).children("input").prop("checked"); //找下面的子集 $(this).parent(".alvintree_item").next(".alvintree_item_wai").find("input").prop("checked",zt); //阻止冒泡 stopEventBubble(evt); }) /* *獲取選中值的方法 *@param level代表取第幾級的選中值,0代表所有 1代表第一級 *return string 返回選中的值 */ this.getvalues = function getvalues(level){ if(level==0){ var alls = $("#"+container+" .alvintree_item"); var v = ""; for(var i=0;i<alls.length;i++){ if(alls.eq(i).children("label").children("input").prop("checked")){ v +=alls.eq(i).children("label").children("input").attr("tag")+","; } } v = v.substr(0,v.length-1); return v; }else{ var bs = level-1; var alls = $("#"+container+" .alvintree_item"+bs); var v = ""; for(var i=0;i<alls.length;i++){ if(alls.eq(i).children("label").children("input").prop("checked")){ v +=alls.eq(i).children("label").children("input").attr("tag")+","; } } v = v.substr(0,v.length-1); return v; } } /* *設置選中的方法 *@param data 要選中的主鍵值,數組 *@param isclear 是否選中前清除之前的選中狀態 bool true是 false否 *@param leval 代表想要讓第幾層的復選框選中,由於在數據庫裏面不同的表主鍵可能會重復,所以可使用第三個參數控制讓第幾層的選中,0代表所有 1代表第一次 2代表第二層。。。 */ this.selected = function selected(data,isclear,leval){ var alls = $("#"+container+" .alvintree_item"); if(isclear){ alls.children("label").children("input").prop("checked",false); } leval = leval || 0; if(leval==0){ for(var i=0;i<alls.length;i++){ var tag = alls.eq(i).children("label").children("input").attr("tag"); if(data.indexOf(tag)>=0){ alls.eq(i).children("label").children("input").prop("checked",true); } } }else{ var bs = leval-1; var alls = $("#"+container+" .alvintree_item"+bs); for(var i=0;i<alls.length;i++){ var tag = alls.eq(i).children("label").children("input").attr("tag"); if(data.indexOf(tag)>=0){ alls.eq(i).children("label").children("input").prop("checked",true); } } } } } /* *加載數據的方法 *@param data 要顯示的數據是JSON格式 *@param indent 縮進的值,單位是像素 *@param ishidden 是否默認隱藏子列表 *@param level 列表級別 *return string 返回造好的HTML元素 */ function showitems(data,ishidden,indent,level){ //字符串 var str = ""; //判斷是否需要隱藏 if(indent>0 && ishidden){ str+="<div class=‘alvintree_item_wai‘ style=‘display:none‘>"; }else{ str+="<div class=‘alvintree_item_wai‘>"; } //遍歷數組 for(var k in data){ //加載當前數組中的數據 //判斷當前數組中是否有下一級數據,如果有則為加號,沒有為減號 if(data[k].item.length>0){ str+="<div style=‘margin-left:"+indent+"px‘ class=‘alvintree_item alvintree_item"+level+"‘ ><label class=‘alvintree_item_nr‘><input type=‘checkbox‘ tag=‘"+data[k].tag+"‘ />"+data[k].name+"</label></div>"; }else{ str+="<div style=‘margin-left:"+indent+"px‘ class=‘alvintree_item alvintree_item"+level+" alvintree_item_open‘ ><label class=‘alvintree_item_nr‘><input tag=‘"+data[k].tag+"‘ type=‘checkbox‘ />"+data[k].name+"</label></div>"; } //判斷當前數組中是否有下一級數據,如果有則加載 if(data[k].item.length>0){ str += showitems(data[k].item,ishidden,indent+30,level+1); } } str += "</div>"; return str; } //阻止事件冒泡函數 function stopEventBubble(event) { var e=event || window.event; if (e && e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble=true; } }
主頁顯示樣式布局
插入css樣式和js文件
<script src="../alvintree/js/alvintree.js"></script> <script src="../alvintree/js/jquery-1.11.2.min.js"></script> <link href="../alvintree/css/alvintree.css" rel="stylesheet" type="text/css">
布局顯示
<body> <div id="alvintrees" style="width:300px;"></div> <input type="button" value="選取中" id="btn"/> </body> <script type="text/javascript"> var trees; $.ajax({ url:"chuli.php", dataType:"JSON", success: function(data){ trees = new AlvinTrees({ data:data,//需要顯示的數據 container:"alvintrees",//外層容器的ID ishidden:true//是否默認隱藏子集 }); } }); $("#btn").click(function(){ alert(trees.getvalues(2));//1為選中所有一級欄目,2為二級欄目以此類推 }) </script>
處理頁面
<?php require_once"../DBDA.class.php"; $db = new DBDA(); $sql = "select * from bumen"; $arr = $db->query($sql); $jsonarr = array(); foreach($arr as $v){ $sql = "select * from yh where bumen = ‘{$v[0]}‘"; $yharr = $db->query($sql); $yhjsonarr = array(); foreach($yharr as $vyh){ $xiaoyharr = array( "name"=>$vyh[1], "tag"=>$vyh[0], "item"=>array() ); $yhjsonarr[] = $xiaoyharr; } $xiaoarr = array( "name"=>$v[1], "tag"=>$v[0], "item"=>$yhjsonarr ); $jsonarr[] = $xiaoarr; } echo json_encode($jsonarr);
DBDA.class.php
<?php class DBDA{ public $host="localhost"; //服務器地址 public $uid="root"; //用戶名 public $pwd="123"; //密碼 public $dbname="crud"; //數據庫名稱 /* 執行一條SQL語句的方法 @param sql 要執行的SQL語句 @param type SQL語句的類型,0代表查詢 1代表增刪改 @return 如果是查詢語句返回二維數組,如果是增刪改返回true或false */ public function query($sql,$type=0){ $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname); $result = $db->query($sql); if($type){ return $result; }else{ return $result->fetch_all(); } } public function strquery($sql,$type=0){ $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname); $result = $db->query($sql); if($type){ return $result; }else{ $arr = $result->fetch_all(); $str = ""; foreach($arr as $v){ $str .= implode("^",$v)."|"; } $str = substr($str,0,strlen($str)-1); return $str; } } //返回json數據的方法 public function jsonquery($sql,$type=0){ $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname); $result = $db->query($sql); if($type){ return $result; }else{ $arr = $result->fetch_all(MYSQLI_ASSOC);//關聯數組 return json_encode($arr);//轉換json //json_decode()分解json } } }
樹狀列表