總的來說這個應用比較多,我在這里用joomla來作為一個框架使用,不使用這個也是可以的,你可以自己照著例子做,園子里講的聯(lián)動非常多,不多多數(shù)是.net,語言雖然相通,但是對從沒有接觸過.net還是不易理解,這里就用php+jquery(ajax)來實現(xiàn)這一功能,并且同時解決ajax到底如何在joomla中使用.ajax在joomla中通過json數(shù)據(jù)交換的例子好像沒有,我這是第一個也許是最后一個,下面就開始來講講實現(xiàn)過程吧.

要想使用json,我們必須讓他返回值是json格式才可以,但是默認的模版都是會帶有head標記內容的,從國外看到一種方法,也就解決了我一直不知道joomla如何使用json數(shù)據(jù).進入templates/system文件夾下面,建立一個json.php的文件,這個就是后面用到的ajax返回數(shù)據(jù),處理方法就寫到這個里,我這里通過單元-分類實現(xiàn)二級聯(lián)動效果,那么這里的數(shù)據(jù)處理就是根據(jù)單元ajax GET傳過來值去查找分類,代碼如下,json.php文件代碼:

代碼如下:

<?php defined('_JEXEC') or die('Restricted access');

$db = JFactory::getDBO();

$id = (int)$_GET['select1'];

if(isset($id)){

$query1 = "SELECT id,title FROM #__categories where section=".$id;

$db->setQuery($query1);

$rss = $db->LoadObjectList();

$arr = array();

foreach($rss as $key=>$value){

$arr[] = $value;

}

$json = urldecode(json_encode($arr));

echo $json;

}

上邊代碼就是查詢出來id和title,然后轉換成json格式,這里json_encode函數(shù)就是轉換函數(shù),urldecode防止中文亂碼的.最后輸出了json數(shù)據(jù),這樣輸出的數(shù)據(jù)是沒有head標記的,他的地址就是index.php?tmpl=json這個以后ajax要用到,tmpl就是輸出組件模版的一個參數(shù),如果它的值等于了component,就會只顯示組件內容,等價于index2.php.我前面講過這個小技巧了.

接下來我們建立一個測試組件,就叫做com_test,里面不需要過多文件,這里僅僅測試,所以有控制器和視圖即可,組件的寫法不講了,不會的看看代碼吧,我專門說說jquery ajax操作聯(lián)動菜單的代碼如下,在test view里面,

代碼如下:

<?php defined('_JEXEC') or die('Restricted access');

$db = JFactory::getDBO();

$query = "SELECT id,title FROM #__sections";

$db->setQuery($query);

$rs = $db->LoadObjectList();

?>

ajax聯(lián)動菜單演示:

<script language="javascript">

function getSelect(){

jQuery.getJSON("index.php?tmpl=json",{'select1':jQuery("#select1").val()},function(json){

var select2 = jQuery("#select2");

jQuery("option",select2).remove();

jQuery.each(json,function(index,array){

var option = "<option value='"+array['id']+"'>"+array['title']+"</option>";

select2.append(option);

});

});

}

jQuery(function(){

getSelect();

jQuery("#select1").change(function(){

getSelect();

});

});

</script>

<select name='select1' id='select1'>

<option value='-1'>=請選擇=</option>

<?php foreach($rs as $rs1){?>

<option value='<?php echo $rs1->id;?>'><?php echo $rs1->title;?></option>

<?php }?>

</select>

<select id="select2" name="select2">

</select>

上邊讀取出來所有的單元,把他顯示到第一個select上邊,然后通過getJSON去獲取json的數(shù)據(jù),在這里傳遞過去了我們選擇的值,就是change事件,把返回的分類數(shù)據(jù)我們添加到第二個select控件上邊,這樣就實現(xiàn)了聯(lián)動菜單的效果.其實joomla自帶有聯(lián)動效果,不過我沒有看懂,代碼挺多的,我想我這里還是比較簡單的,其他地方非joomla也可以用,你可以用數(shù)組去替代數(shù)據(jù)庫查出的值,不過一般都是寫在數(shù)據(jù)庫里面,我這里沒有使用$,而是用jQuery代替了,還有我也沒有用

代碼如下:

jQuery.noConflict();

這一句是解決多個js庫沖突的,所以我使用了一個joomla插件,屏蔽所有導入的jquery,用插件的jquery代替,這樣就不會出現(xiàn)多次引用jquery庫,$是mootools默認的替代方法,所以joomla中都是用jQuery來寫jquery代碼的.有的人喜歡給這個賦值一個臨時變量比如j,但是我發(fā)現(xiàn)如果有人寫另一個組件的時候又再次賦值,就出現(xiàn)錯誤,所以還是同意比較好,這樣不會出現(xiàn)js代碼沖突,一旦出現(xiàn)沖突,查找是比較困難的.

　聯(lián)動菜單大概就是這樣的,當然實現(xiàn)方法千千萬,這里講的是jquery來實現(xiàn),還是比較方便簡單的,最后提供讀者一個雙select控件操作代碼.代碼來自他人,不過挺實用的,你會用得著.

代碼如下:

<script>

jQuery(function(){

jQuery('#addto').click(function(){

var options = jQuery('#select1 option:selected');//獲取當前選中的項

var remove = options.remove();//刪除下拉列表中選中的項

remove.appendTo('#select2');//追加給對方

});

jQuery('#remove').click(function(){

var removeOptions = jQuery('#select2 option:selected');

removeOptions.appendTo('#select1');//刪除和追加可以用appendTo()直接完成

});

jQuery('#addAll').click(function(){

var addOptions = jQuery('#select1 option');

addOptions.appendTo('#select2');

});

jQuery('#removeAll').click(function(){

var removeAllOptions = jQuery('#select2 option');

removeAllOptions.appendTo('#select1');

});

//雙擊事件

jQuery('#select1').dblclick(function(){

//var jQueryoptions = jQuery('#select1 option:selected');

var jQueryoptions = jQuery('option:selected', this);//注意此處“option”與“:”之間的空格，有空格是不可以的

jQueryoptions.appendTo('#select2');

});

jQuery('#select2').dblclick(function(){

jQuery('#select2 option:selected').appendTo('#select1');

});

});

</script>

<select multiple="multiple" id="select1" style="width: 100px; height: 100px;">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

</select>

<button type="button" id="addto">添加</button>

<button type="button" id="remove">移除</button>

<button type="button" id="addAll">全部添加</button>

<button type="button" id="removeAll">全部移除</button>

<select multiple="multiple" id="select2" name="fids" style="width: 100px; height: 100px;">

</select>

同樣是jquery操作.記得加載jquery庫哦,我是1.72版測試通過的!最后附圖兩張,無圖無真相:

Yoby 老習慣,附上com_test的代碼包,僅供參考!注意代碼包里面json.php位置哦,認真讀了我想應該明白也可以成功實現(xiàn).貌似這是一種比較好的joomla中實現(xiàn)ajax方式

更多信息請查看IT技術專欄