用户管理的设计_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插件之validation插件
Mar 29 jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery实现动态向上滚动
Dec 21 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文件缓存smarty模板应用实例分析
2016/02/26 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
JavaScript 学习笔记(四)
2009/12/31 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
Node.js实现文件上传
2016/07/05 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
以一段代码为实例快速入门Python2.7
2015/03/31 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
学习礼仪心得体会
2014/09/01 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
2014年团队工作总结
2014/11/24 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
房产证明范本
2015/06/19 职场文书
初中班干部工作总结
2015/08/10 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL