用户管理的设计_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 EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 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开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
python中threading超线程用法实例分析
2015/05/16 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
护士自我鉴定
2013/10/23 职场文书
优秀教师演讲稿
2014/05/06 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
2014年财政工作总结
2014/12/10 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python