用户管理的设计_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实现的手风琴侧边菜单效果
Mar 29 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jquery实现轮播图特效
Apr 12 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
php csv操作类代码
2009/12/14 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
JavaScript判断浏览器及其版本信息
2017/01/20 Javascript
js实现拖拽功能
2017/03/01 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
django 解决manage.py migrate无效的问题
2018/05/27 Python
Python get获取页面cookie代码实例
2018/09/12 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
python实现猜单词游戏
2020/05/22 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
文艺晚会主持词
2014/03/24 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
共青团员自我评价范文
2014/09/14 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
人民币使用说明书
2019/04/17 职场文书