用户管理的设计_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框架Ajax常用选项
Jul 08 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery实现简单弹幕制作
Dec 10 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
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
DOM 高级编程
2015/05/06 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
python 文件与目录操作
2008/12/24 Python
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
跟老齐学Python之编写类之三子类
2014/10/11 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
python实现井字棋游戏
2020/03/30 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
打印机墨盒:123Inkjets
2017/02/16 全球购物
科研课题实施方案
2014/03/18 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
高三英语复习计划
2015/01/19 职场文书
法制教育主题班会
2015/08/13 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
MySQL注入基础练习
2021/05/30 MySQL