jqueryのajaxを使った二次連携効果の実装方法

この記事では主に、第 2 レベルのリンケージ効果を実現するためのユーザー管理 design_jquery の ajax について説明します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

ページの効果

実装手順

1. json

を統合するためのstrutsプラグインパッケージを導入します。2. ページは、第2レベルのリンケージjs

//ajax的二级联动，使用选择的所属单位，查询该所属单位下对应的单位名称列表
  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クラスのMethod内で、ここでは返されたListコレクションをスタックの先頭に置き、struts2がjsonデータに変換します

/** 
  * @Name: findJctUnit
  * @Description: 使用jquery的ajax完成二级联动，使用所属单位，关联单位名称
  * @Parameters: 无
  * @Return: 使用struts2的json插件包
  */
  public String findJctUnit(){
    //1：获取所属单位下的数据项的值(从页面提交的jctID值,不是数据字典中的ddlcode)
    String jctID = elecUser.getJctID();
    //2：使用该值作为数据类型，查询对应数据字典的值，返回List<ElecSystemDDL>
    List<ElecSystemDDL> list = elecSystemDDLService.findSystemDDLListByKeyword(jctID);
    //3：将List<ElecSystemDDL>转换成json的数组，将List集合放置到栈顶
    ValueUtils.pushValueStack(list);
    return "findJctUnit";
  }

このうち、findSystemDDLListByKeyword(jctID)は主にデータディクショナリサービスに実装されているメソッドです。データ型名に基づいてデータ ディクショナリを生成し、リスト コレクション オブジェクトを返します

ValueUtils はツール クラスです。pushValueStack メソッドはリストを struts2 値スタックの先頭にプッシュします

public class ValueUtils {

  public static void pushValueStack(Object object) {
    ServletActionContext.getContext().getValueStack().push(object);
  }
}

struts2 プラグイン パッケージは、すべてのstruts2の値のリストコレクション内のオブジェクトの属性をjson

にスタックします。 4. struts.xmlに

を定義します。 (1) extends値を変更します

変更前

<!-- 系统管理 -->
<package name="system" extends="struts-default" namespace="/system">

変更後

<!-- 系统管理 -->
  <package name="system" extends="json-default" namespace="/system">

(2) マッピングを追加します

<!-- 如果是List集合，转换成json数组；如果是object对象，转换成json对象 -->
<result name="findJctUnit" type="json"></result>

上記の手順を完了すると、所属するユニットを選択できます。ドロップダウン ボックスの値は、ユニット名のドロップダウン オプションにも対応する値があります。

次のようにブラウザ ページで json データを表示します:

特定の属性を json 化したい場合は、この時点で struts.xml ファイルを変更できます:

<!-- 如果是List集合，转换成json数组；如果是object对象，转换成json对象 -->
      <result name="findJctUnit" type="json">
        <param name="includeProperties">\[\d+\]\.ddlCode,\[\d+\]\.ddlName</param>
 </result>

ここでは、正規表現を使用してインターセプトします1 つ以上の ddlCode と ddlName。これにより、json データには ddlCode と ddlName のみが含まれます。

関連する推奨事項:

登録ページにjq二次連携を実装する

選択選択二次連携効果を実現する方法

二次連携メニューの使用方法の概要

以上がjqueryのajaxを使った二次連携効果の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。