總的來說這個應用比較多,我在這里用joomla來作為一個框架使用,不使用這個也是可以的,你可以自己照著例子做,園子里講的聯動非常多,不多多數是.net,語言雖然相通,但是對從沒有接觸過.net還是不易理解,這里就用php+jquery(ajax)來實現這一功能,并且同時解決ajax到底如何在joomla中使用.ajax在joomla中通過json數據交換的例子好像沒有,我這是第一個也許是最后一個,下面就開始來講講實現過程吧.
要想使用json,我們必須讓他返回值是json格式才可以,但是默認的模版都是會帶有head標記內容的,從國外看到一種方法,也就解決了我一直不知道joomla如何使用json數據.進入templates/system文件夾下面,建立一個json.php的文件,這個就是后面用到的ajax返回數據,處理方法就寫到這個里,我這里通過單元-分類實現二級聯動效果,那么這里的數據處理就是根據單元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函數就是轉換函數,urldecode防止中文亂碼的.最后輸出了json數據,這樣輸出的數據是沒有head標記的,他的地址就是index.php?tmpl=json這個以后ajax要用到,tmpl就是輸出組件模版的一個參數,如果它的值等于了component,就會只顯示組件內容,等價于index2.php.我前面講過這個小技巧了.
接下來我們建立一個測試組件,就叫做com_test,里面不需要過多文件,這里僅僅測試,所以有控制器和視圖即可,組件的寫法不講了,不會的看看代碼吧,我專門說說jquery ajax操作聯動菜單的代碼如下,在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聯動菜單演示:
<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的數據,在這里傳遞過去了我們選擇的值,就是change事件,把返回的分類數據我們添加到第二個select控件上邊,這樣就實現了聯動菜單的效果.其實joomla自帶有聯動效果,不過我沒有看懂,代碼挺多的,我想我這里還是比較簡單的,其他地方非joomla也可以用,你可以用數組去替代數據庫查出的值,不過一般都是寫在數據庫里面,我這里沒有使用$,而是用jQuery代替了,還有我也沒有用
代碼如下:
jQuery.noConflict();
這一句是解決多個js庫沖突的,所以我使用了一個joomla插件,屏蔽所有導入的jquery,用插件的jquery代替,這樣就不會出現多次引用jquery庫,$是mootools默認的替代方法,所以joomla中都是用jQuery來寫jquery代碼的.有的人喜歡給這個賦值一個臨時變量比如j,但是我發現如果有人寫另一個組件的時候又再次賦值,就出現錯誤,所以還是同意比較好,這樣不會出現js代碼沖突,一旦出現沖突,查找是比較困難的.
聯動菜單大概就是這樣的,當然實現方法千千萬,這里講的是jquery來實現,還是比較方便簡單的,最后提供讀者一個雙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位置哦,認真讀了我想應該明白也可以成功實現.貌似這是一種比較好的joomla中實現ajax方式
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
