用戶管理的設計_jquery的ajax實現(xiàn)二級聯(lián)動效果
頁面效果

實現(xiàn)步驟
1.引入struts整合json的插件包
2.頁面使用jquery的ajax調用二級聯(lián)動的js
//ajax的二級聯(lián)動,使用選擇的所屬單位,查詢該所屬單位下對應的單位名稱列表
function findJctUnit(o){
//貨物所屬單位的文本內容
var jct = $(o).find("option:selected").text();
$.post("elecUserAction_findJctUnit.do",{"jctID":jct},function(data,textStatus){
//先刪除單位名稱的下拉菜單,但是請選擇要留下
$("#jctUnitID option").remove();
if(data!=null && data.length>0){
for(var i=0;i<data.length;i++){
var ddlCode = data[i].ddlCode;
var ddlName = data[i].ddlName;
//添加到單位名稱的下拉菜單中
var $option = $("<option></option>");
$option.attr("value",ddlCode);
$option.text(ddlName);
$("#jctUnitID").append($option);
}
}
});
}
3.在Action類中定義findJctUnit()方法,這里要將返回的List集合放置到棧頂,struts2將其轉換成json數(shù)據(jù)
/**
* @Name: findJctUnit
* @Description: 使用jquery的ajax完成二級聯(lián)動,使用所屬單位,關聯(lián)單位名稱
* @Parameters: 無
* @Return: 使用struts2的json插件包
*/
public String findJctUnit(){
//1:獲取所屬單位下的數(shù)據(jù)項的值(從頁面提交的jctID值,不是數(shù)據(jù)字典中的ddlcode)
String jctID = elecUser.getJctID();
//2:使用該值作為數(shù)據(jù)類型,查詢對應數(shù)據(jù)字典的值,返回List<ElecSystemDDL>
List<ElecSystemDDL> list = elecSystemDDLService.findSystemDDLListByKeyword(jctID);
//3:將List<ElecSystemDDL>轉換成json的數(shù)組,將List集合放置到棧頂
ValueUtils.pushValueStack(list);
return "findJctUnit";
}
其中,findSystemDDLListByKeyword(jctID)是在數(shù)據(jù)字典service中實現(xiàn)的方法,主要根據(jù)數(shù)據(jù)類型名稱查詢數(shù)據(jù)字典,返回list集合對象
ValueUtils是一個工具類,pushValueStack方法將list壓入到struts2值棧的棧頂
public class ValueUtils {
public static void pushValueStack(Object object) {
ServletActionContext.getContext().getValueStack().push(object);
}
}
struts2的插件包會將壓入到struts2值棧的list集合中對象所有的屬性全部被json化
4.在struts.xml中定義
(1)修改 extends值
修改前
<!-- 系統(tǒng)管理 --> <package name="system" extends="struts-default" namespace="/system">
修改后
<!-- 系統(tǒng)管理 --> <package name="system" extends="json-default" namespace="/system">
(2)添加映射
<!-- 如果是List集合,轉換成json數(shù)組;如果是object對象,轉換成json對象 --> <result name="findJctUnit" type="json"></result>
完成上述步驟以后,即可實現(xiàn)選中所屬單位下拉框的值,在單位名稱下拉選項中有對應值。
在瀏覽器頁面查看json數(shù)據(jù)如下:

若想針對某個屬性被json化,此時可以修改struts.xml文件:
<!-- 如果是List集合,轉換成json數(shù)組;如果是object對象,轉換成json對象 -->
<result name="findJctUnit" type="json">
<param name="includeProperties">\[\d+\]\.ddlCode,\[\d+\]\.ddlName</param>
</result>
這里使用正則表達式攔截一個或多個ddlCode和ddlName,這樣json數(shù)據(jù)中就只含有ddlCode和ddlName了。
以上這篇用戶管理的設計_jquery的ajax實現(xiàn)二級聯(lián)動效果就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
jquery實現(xiàn)效果比較好的table選中行顏色
這篇文章主要介紹了jquery table選中行顏色實現(xiàn)代碼,需要的朋友可以參考下2014-03-03
jQuery調用AJAX時Get和post公用的亂碼解決方法實例說明
js調用AJAX時Get和post的亂碼解決辦法以前有寫過的但是使用js代碼比較繁瑣,下面與大家分享下使用jQuery該怎么解決,遇到類似情況的朋友可以參考下哈2013-06-06
jQuery Ajax自定義分頁組件(jquery.loehpagerv1.0)實例詳解
這篇文章主要介紹了jQuery Ajax自定義分頁組件(jquery.loehpagerv1.0)實例詳解,需要的朋友可以參考下2017-05-05
Easyui 關閉jquery-easui tab標簽頁前觸發(fā)事件的解決方法
這篇文章主要介紹了Easyui 關閉jquery-easui tab標簽頁前觸發(fā)事件 ,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
ASP.NET jQuery 實例14 在ASP.NET form中校驗時間范圍
這節(jié)主要講如何用jQuery校驗表單時間范圍,時間控件用到了jQuery-ui2012-02-02
jQuery+ajax讀取json數(shù)據(jù)并按照價格排序示例
這篇文章主要介紹了jQuery+ajax讀取json數(shù)據(jù)并按照價格排序,涉及jQuery基于ajax動態(tài)獲取json文件數(shù)據(jù)并進行數(shù)據(jù)遍歷與排序的相關操作技巧,需要的朋友可以參考下2018-03-03

