用户管理的设计_jquery的ajax实现二级联动效果


Posted in jQuery onJuly 13, 2017

页面效果

用户管理的设计_jquery的ajax实现二级联动效果

实现步骤

1.引入struts整合json的插件包

2.页面使用jquery的ajax调用二级联动的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类中定义findJctUnit()方法,这里要将返回的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)是在数据字典service中实现的方法,主要根据数据类型名称查询数据字典,返回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值

修改前

<!-- 系统管理 -->
<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数据如下:

用户管理的设计_jquery的ajax实现二级联动效果

若想针对某个属性被json化,此时可以修改struts.xml文件

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

这里使用正则表达式拦截一个或多个ddlCode和ddlName,这样json数据中就只含有ddlCode和ddlName了。

以上这篇用户管理的设计_jquery的ajax实现二级联动效果就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery.form.js的使用详解
Jun 14 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
JQuery EasyUI的一些常用组件
Jul 12 #jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 #jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 #jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 #jQuery
使用jQuery实现动态添加小广告
Jul 11 #jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 #jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 #jQuery
You might like
Syphon 秘笈
2021/03/03 冲泡冲煮
php 获取页面中指定内容的实现类
2014/01/23 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
jQuery的一些注意
2006/12/06 Javascript
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
利用JS实现数字增长
2016/07/28 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
Python中logging模块的用法实例
2014/09/29 Python
django中的setting最佳配置小结
2017/11/21 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
python 字典中取值的两种方法小结
2018/08/02 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
new修饰符是起什么作用
2015/06/28 面试题
感恩老师演讲稿400字
2014/08/28 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL
Nginx利用Logrotate实现日志分割
2022/05/20 Servers