|
 |
| |
Function อะไรที่สามารถ Generate Tree Model ได้บ้างครับ |
| |
 |
|
|
 |
 |
|
keyword jquery tree
http://jquery.bassistance.de/treeview/demo/
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
หรือในไทยครีเอทคนละแบบกัน https://www.thaicreate.com/php/forum/037828.html
ที่เหลือขึ้นอยู่กะการประยุกต์ใช้งาน สำหรับที่ผมใช้จะเป็นตัวบน โดย ใช้ jquery ส่งค่ากลับมาเป็น json
ตัวอย่างดูแค่หลักการเอานะ ก็อปคงไม่ได้หรอก ตัวอย่างนี้ใช้ adodb class + oop class จัดการ app ในการติดต่อ db ซึ่งไม่ขอพูดถึงให้ดูแค่หลักการการนำไปใช้ก็พอ เพราะผมไม่มี โค๊ดแบบปกติที่ไม่ใช่ oop เลยเขียนคอมเม้นแทนบางส่วนให้แล้ว ต้องขออภัย 
source.php
<?
//table product_cat --> product_cat_id, cat_parent_id,category_level, product_cat_name_en,product_cat_name_th
//ไม่ต้องสนใจส่วนนี้ ให้คุณ คอนติดต่อ db ตามรูปแบบของคุณ
define("security",true);
require('../../web.config.php');
require(WEB_ROOT.'/smarty/libs/Smarty.class.php');
require(WEB_ROOT.'/classes/class.easy-control.php');
$app = new Website;
$app->openConnect();
$lang=($_REQUEST["l"]!="")?$_REQUEST["l"]:"en";
function print_array($data){
echo '<pre>';
print_r($data);
echo '</pre>';
}
//เริ่มส่วนนี้ซึ่งคล้ายใน demo ตามลิงค์
$cat_id = $_REQUEST['root'];
$func = $_REQUEST['func']; //ประยุกต์เพิ่มเติมส่งชื่อฟังก์ js เข้ามาไว้ส่งกลับไปเป็น json เพื่อใช้ตอนแสดงผลลิสทรีวิวให้คลิกที่ลิสนั้นแล้วไปทำงานที่ฟังก์ชั่น js ที่เราส่งเข้ามา
//ลำดับชั้นสุงสุด ( cat_parent_id =0)
if ($cat_id == "source"){
//ให้ดึงหมวดหมู่หลักทั้งหมด
$app->sql = "SELECT product_cat_id, product_cat_name_".$lang." FROM product_category WHERE cat_parent_id=0 ORDER BY product_cat_name_".$lang." ASC";
$sql1=$app->sql;
$res =$app->executeData();
$rows = $res->GetRows();
//วนลูปเอาไอดีหมวดหมู่หลัก ไปหาหมวดหมู่ย่อย
foreach($rows as $key=>$row){
$app->sql = "SELECT COUNT(product_cat_id) AS childnum FROM product_category WHERE cat_parent_id=".$row['product_cat_id'];
$res = $app->executeData();
//หมวดหมู่หลักนี้มีหมวดหมู่ย่อย
if($res->fields['childnum']>0){
$ret[] = array(
'id'=>$row['product_cat_id'],
'text'=>$row["product_cat_name_".$lang],
"expanded"=>false,
'hasChildren'=>true,
'func'=>$func,
'total'=>$res->fields['childnum'],
'sql1'=>$sql1,
'sql'=>$app->sql
);
}else{
//หมวดหมู่หลักนี้ไม่มีหมวดหมู่ย่อย
$ret[] = array(
'id'=>$row['product_cat_id'],
'text'=>$row["product_cat_name_".$lang],
"expanded"=>false,
'func'=>$func,
'total'=>$res->fields['childnum'],
'sql1'=>$sql1,
'sql'=>$app->sql
);
}
}
echo json_encode($ret);
//ลำดับชั้นรอง ( cat_parent_id =cat_id )
}else{
sleep(1);
//ให้ดึงหมวดหมู่หลักทั้งหมด // $query=mysql_query($sql)
$app->sql = "SELECT product_cat_id, product_cat_name_".$lang." FROM product_category WHERE cat_parent_id=".$cat_id." ORDER BY product_cat_name_".$lang." ASC";
$sql1=$app->sql ;
$res = $app->executeData();
$rows = $res->GetRows();
//วนลูปเอาไอดีหมวดหมู่หลัก ไปหาหมวดหมู่ย่อย // while($row=mysql_fetch_array($query)){}
foreach($rows as $key=>$row){
$app->sql = "SELECT COUNT(product_cat_id) AS childnum FROM product_category WHERE cat_parent_id=".$row['product_cat_id'];
$res = $app->executeData();
//หมวดหมู่หลักนี้มีหมวดหมู่ย่อย
if($res->fields['childnum']>0){
$ret[] = array(
'id'=>$row['product_cat_id'],
'text'=>$row["product_cat_name_".$lang],
"expanded"=>false,
'hasChildren'=>true,
'func'=>$func,
'total'=>$res->fields['childnum'],
'sql1'=>$sql1,
'sql'=>$app->sql
);
}else{
//หมวดหมู่หลักนี้ไม่มีหมวดหมู่ย่อย
$ret[] = array(
'id'=>$row['product_cat_id'],
'text'=>$row["product_cat_name_".$lang],
"expanded"=>false,
'func'=>$func,
'total'=>$res->fields['childnum'],
'sql1'=>$sql1,
'sql'=>$app->sql
);
}
}
echo json_encode($ret);
} ?>
<?
die;
/*
if ($_REQUEST['root'] == "source"):
?>
[
{
"text": "1. Pre Lunch (120 min)",
"expanded": true,
"classes": "important",
"children":
[
{
"text": "1.1 The State of the Powerdome (30 min)"
},
{
"text": "1.2 The Future of jQuery (30 min)"
},
{
"text": "1.2 jQuery UI - A step to richnessy (60 min)"
}
]
},
{
"text": "2. Lunch (60 min)"
},
{
"text": "3. After Lunch (120+ min)",
"children":
[
{
"text": "3.1 jQuery Calendar Success Story (20 min)"
},
{
"text": "3.2 jQuery and Ruby Web Frameworks (20 min)"
},
{
"text": "3.3 Hey, I Can Do That! (20 min)"
},
{
"text": "3.4 Taconite and Form (20 min)"
},
{
"text": "3.5 Server-side JavaScript with jQuery and AOLserver (20 min)"
},
{
"text": "3.6 The Onion: How to add features without adding features (20 min)",
"id": "36",
"hasChildren": true
},
{
"text": "3.7 Visualizations with JavaScript and Canvas (20 min)"
},
{
"text": "3.8 ActiveDOM (20 min)"
},
{
"text": "3.8 Growing jQuery (20 min)"
}
]
}
]
<?php else: ?>
[
{
"text": "1. Review of existing structures",
"expanded": true,
"children":
[
{
"text": "1.1 jQuery core"
},
{
"text": "1.2 metaplugins"
}
]
},
{
"text": "2. Wrapper plugins"
},
{
"text": "3. Summary"
},
{
"text": "4. Questions and answers"
}
]
<?php endif; */?>
test.html
//อ้างอิงพาร์ท js เอาเอง
<html><head>
<link rel="stylesheet" type="text/css" href="{$theme}/js/treeview/jquery.treeview.css" />
<script language="javascript" type="text/javascript" src="{$theme}/js/jquery-1.4.3.min.js"></script>
<script language="javascript" type="text/javascript" src="{$theme}/js/treeview/jquery.cookie.js"></script>
<script language="javascript" type="text/javascript" src="{$theme}/js/treeview/jquery.treeview.js"></script>
<script language="javascript" type="text/javascript" src="{$theme}/js/treeview/jquery.treeview.async.js"></script>
<script language="javascript">
function initTrees(objId,fncName,url) {
//alert("fnc: "+fncName);
//fncName = 'test';
$(objId).treeview({
unique: true,
animated: 'fast',
url: url+fncName
});
}
$(document).ready(function(){
initTrees("#tree_menu","onClickBranch","modules/product/tree-menu.php?l="+lang+"&func=");
});
function onClickBranch(obj, id){
listProduct(id,1);
}
</script>
</head>
<body>
<div id="tree_menu"></div>
</body>
</html>
/// หมายเหตุไฟล์ jquery.treeview.async.js ผมได้ปรับแต่งเพิ่มเติมเพื่อให้มันสามารถส่งชื่อฟังชั่น js , ส่งค่าการ debug sql , การนำจำนวนลำดับชั้นย่อย กลับมาเพิ่มจาก ของเดิมซึ่งไม่มี หรือจะไม่แก้ไขก็สามารถใช้ไฟล์ต้นฉบับอันเดิมก็ได้
jquery.treeview.async.js ที่ผมแก้ไข
/*
* Async Treeview 0.1 - Lazy-loading extension for Treeview
*
* http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
*
* Copyright (c) 2007 Jörn Zaefferer
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Revision: $Id$
*
*/
;(function($) {
function load(settings, root, child, container) {
function createNode(parent) {
if(typeof this.id != 'undefined'){
if (this.hasChildren) {
var current = $("<li/>").attr("id", this.id).html("<span onclick=\""+this.func+"(this, "+this.id+")\">" + this.text + " ("+this.total+")</span>").addClass("folder").appendTo(parent);
}else{
var current = $("<li/>").attr("id", this.id).html("<span onclick=\""+this.func+"(this, "+this.id+")\">" + this.text + "</span>").addClass("file").appendTo(parent);
current.hoverClass();
}
}else{
var current = $("<li/>").html("<span>" + this.text + "</span>").appendTo(parent);
}
if (this.classes) {
current.children("span").addClass(this.classes);
}
if (this.expanded) {
current.addClass("open");
}
if (this.hasChildren || this.children && this.children.length) {
var branch = $("<ul/>").appendTo(current);
if (this.hasChildren) {
current.addClass("hasChildren");
createNode.call({
classes: "placeholder",
text: " ",
children:[]
}, branch);
}
if (this.children && this.children.length) {
$.each(this.children, createNode, [branch])
}
}
}
$.ajax($.extend(true, {
url: settings.url,
dataType: "json",
data: {
root: root
},
success: function(response) {
child.empty();
$.each(response, createNode, [child]);
$(container).treeview({add: child});
}
}, settings.ajax));
/*
$.getJSON(settings.url, {root: root}, function(response) {
function createNode(parent) {
var current = $("<li/>").attr("id", this.id || "").html("<span>" + this.text + "</span>").appendTo(parent);
if (this.classes) {
current.children("span").addClass(this.classes);
}
if (this.expanded) {
current.addClass("open");
}
if (this.hasChildren || this.children && this.children.length) {
var branch = $("<ul/>").appendTo(current);
if (this.hasChildren) {
current.addClass("hasChildren");
createNode.call({
classes: "placeholder",
text: " ",
children:[]
}, branch);
}
if (this.children && this.children.length) {
$.each(this.children, createNode, [branch])
}
}
}
child.empty();
$.each(response, createNode, [child]);
$(container).treeview({add: child});
});
*/
}
var proxied = $.fn.treeview;
$.fn.treeview = function(settings) {
if (!settings.url) {
return proxied.apply(this, arguments);
}
var container = this;
if (!container.children().size())
load(settings, "source", this, container);
var userToggle = settings.toggle;
return proxied.call(this, $.extend({}, settings, {
collapsed: true,
toggle: function() {
var $this = $(this);
if ($this.hasClass("hasChildren")) {
var childList = $this.removeClass("hasChildren").find("ul");
load(settings, this.id, childList, container);
}
if (userToggle) {
userToggle.apply(this, arguments);
}
}
}));
};
})(jQuery);
ลองประยุกต์เอาเองนะ
|
 |
 |
 |
 |
| Date :
2012-01-20 03:03:21 |
By :
chineji |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
| |
|
 Load balance : Server 03
|
