`
tracy婷婷
  • 浏览: 24266 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论

JQuery根据json数据选中多选框

阅读更多

 

<dl class="nowrap">
		<dt>输出仓库:</dt>
		<dd><div id="ufrom_ids" val="${from_ids}"></div></dd>
</dl>
<dl class="nowrap">
		<dt>输入仓库:</dt>
		<dd><div id="uto_ids" val="${to_ids}" ></div></dd>
</dl>

 

 ufrom_ids和 uto_ids 获得数据格式是字符串,eg:string  ufrom_ids=“3,4,35”;

 

页面请求在Java后台获取所有的数据  var iaxleft= intArray[n].replace( /^\s+|\s+$/g, "" );处理空格和特殊字符

 

 

<script language="JavaScript">
<!--
$(document).ready(function() {
	$.getJSON("deliver/getWarehouses.do", function(data){
			var html = '';
			var htmlto='';
			var from_ids = $("#ufrom_ids").attr('val');
			var to_ids = $("#uto_ids").attr('val');

			var intArray = new Array();
			intArray=from_ids.split(',');
			
			var tointArray = new Array();
			tointArray=to_ids.split(',');
				
		$.each(data, function(i,item){
			
			html += '<label><input type="checkbox" name="from_ids"  value="' + item.value+'"' ;

			for(var n=0;n<intArray.length;n++){
			
				var  iaxleft= intArray[n].replace( /^\s+|\s+$/g, "" );
				var  iaxright= item.value.replace( /^\s+|\s+$/g, "" );
				if(iaxleft==iaxright)
					html += ' checked';
			}
			html +='>' +item.text + '</label>';
			
			htmlto += '<label><input type="checkbox" name="to_ids"  value="' + item.value+'"' ;
			
			for(var ton=0;ton<tointArray.length;ton++){
			
				var  toiaxleft= tointArray[ton].replace( /^\s+|\s+$/g, "" );
				var  toiaxright= item.value.replace( /^\s+|\s+$/g, "" );
				if(toiaxleft==toiaxright)
					htmlto += ' checked';
			}
			htmlto +='>' +item.text + '</label>';	
		});
		
		$("#ufrom_ids").append(html);
		$("#uto_ids").append(htmlto);
	});
});
//-->
</script>

 

 

后台请求路径

 

<action name="getWarehouses" class="mgmt.deliver.WarehouseEditAction"  method="getWarehouses">
			<param name="opType">JSON</param>
			<result type="plainText"/>
		</action>

 

 

action内容 WarehouseEditAction.java

 

public String getWarehouses() {
		BeanFactory.getService(Const.SERVICE_MGMT_DELIVER_WAREHOUSE_EDIT, this.vo);
//Const.SERVICE_MGMT_DELIVER_WAREHOUSE_EDIT service的路径 sql语句获取所有的仓库信息
		Gson gson = new Gson();
		String json = gson.toJson(this.vo.getGetWarehouse());
		this.printJson(json);
		return null;
	}

 

 

 

 

分享到:
评论

相关推荐

    jQuery+Ajax打开弹出分页层并保存多选框选中数据

    5. **服务器端处理**:在后端(如PHP、Node.js等),接收到Ajax请求后,解析传来的多选框数据,执行相应的保存操作,如写入数据库。 6. **反馈结果**:服务器处理完成后,返回一个响应,告知前端操作是否成功。在...

    jquery下拉多选复选框插件

    本主题涉及的是一个基于jQuery的下拉多选复选框插件,该插件能够提供用户友好的界面,方便用户在下拉菜单中进行多选操作,尤其适用于后台数据管理或前端交互场景。下面将详细介绍这个插件及其相关的知识点。 1. **...

    jquery实现带复选框的gridview

    本示例"jquery实现带复选框的gridview"提供了一个完整的项目文件,允许开发者自定义数据源,以实现一个简单易用的复选框Gridview功能。这个功能对于那些需要用户批量选择或操作数据的Web应用来说非常实用,比如在...

    jquery下拉多选框demo.rar

    本示例“jquery下拉多选框demo”是基于jQuery实现的一个功能,旨在帮助开发者创建交互式的下拉多选框。这个压缩包包含了一切所需资源,包括JavaScript文件和CSS样式表,使得开发者能够快速地按照示例进行操作。 ...

    扩展了一棵jquery的树插件SimpleTree(jquery.simple.tree.js),支持json数据,checkbox树,以及异步加载,

    总结来说,`jQuery SimpleTree`是一个强大而灵活的树形插件,通过JSON数据支持、复选框功能和异步加载,为开发者提供了构建复杂树形结构的强大工具。配合源码学习和示例参考,你可以轻松地将其应用于各种Web开发场景...

    BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)

    4. 定义`stateFormatter`函数,根据数据状态设置复选框的选中状态。 5. 提供模拟或实际的后台数据,其中包含复选框状态信息。 以上所述的方法可以帮助你实现根据数据库状态控制Bootstrap Table中复选框默认选中的...

    隐藏layui数据表格表头的checkbox复选框

    ### 隐藏LayUI数据表格表头的Checkbox复选框方法详解 #### 背景介绍 在前端开发过程中,经常会使用到LayUI框架搭建网页应用,尤其是在设计复杂的数据展示界面时,LayUI提供了强大的数据表格功能。然而,在某些场景...

    基于easyui 1.4.5的单选和多选框组件

    本文将深入探讨基于jQuery EasyUI 1.4.5的单选框和多选框组件的使用方法、功能特性以及如何结合实际项目进行应用。 一、jQuery EasyUI 1.4.5简介 EasyUI是一套基于jQuery的UI框架,它包含了多个可复用的UI组件,如...

    jQuery+AJAX+JSON

    - `:checked`:匹配所有被选中的元素(如复选框、单选按钮)。 - `:selected`:匹配所有被选中的 option 元素。 #### 四、jQuery 与 AJAX 结合使用 **4.1 AJAX 的概念** AJAX(Asynchronous JavaScript and XML...

    基于jquery制作的添加购物车复选框类似淘宝的购物车.zip

    【标题】"基于jQuery制作的添加购物车复选框类似淘宝的购物车"是一个前端开发项目,它展示了如何使用jQuery库来实现一个功能类似于淘宝购物车的复选框交互效果。在网页应用中,购物车功能是核心部分之一,允许用户...

    jQuery搜索框过滤效果

    // 更多数据... ]; ``` 我们可以遍历数据,将与搜索词匹配的项添加到`search-results`列表中: ```javascript $('#search-input').on('keyup', function() { var searchTerm = $(this).val().toLowerCase(); ...

    jQuery实现的多选框多级联动插件

    jQuery 实现的多选框联动插件 代码如下: // 使用:$(_event_src_).autoSelect(_reload_, reload_url); // 前台用get方法传输&lt;select&gt;标签的属性”name”和选中的属性”value” // 后台用json格式传输数据 // ...

    tableRow 表格与复选框配合jquery插件.zip

    综上所述,“tableRow 表格与复选框配合jquery插件.zip”提供的解决方案涉及到了前端开发中的多个核心概念,包括jQuery库的使用、表格和复选框的交互设计、事件处理、DOM操作、数据管理和用户体验优化等。...

    js翻页复选框状态保存

    3. **使用服务器端存储**:如果需要在多个会话间共享复选框的状态,可以考虑将状态保存在服务器端,每次页面加载时从服务器获取这些状态信息。 #### 具体实现步骤 1. **添加存储逻辑**:在每个复选框的状态发生...

    带复选框三级树形菜单.rar

    本项目名为"带复选框三级树形菜单",是基于jQuery实现的一个简单但功能齐全的三级树形菜单,特别适合用于系统的下拉菜单功能。 首先,我们来理解树形菜单的概念。树形菜单是一种数据结构的可视化表示,它模仿了...

    jQuery-searchableSelect带搜索功能的下拉选

    jQuery-searchableSelect插件正是为了解决这个问题,它提供了强大的可搜索的下拉选择框,增强了用户体验,同时也简化了开发者的工作。 一、jQuery-searchableSelect 插件简介 jQuery-searchableSelect是基于jQuery...

    ajax动态加载无限级树的复选框

    同时,根据数据设置复选框的状态。 - 实现点击事件监听,当用户点击节点或复选框时,更新对应的复选框状态,并触发Ajax请求更新服务器上的数据。 2. **Ajax请求**: - 使用`$.ajax`或`$.getJSON`方法发送异步请求...

    jQuery三态树

    1. **初始化树结构**:通过遍历Json数据,构建HTML结构,每个节点通常是一个`&lt;li&gt;`元素,其中包含一个可点击的`&lt;span&gt;`元素表示节点文本,一个复选框(`&lt;input type="checkbox"&gt;`)表示选中状态。 2. **事件绑定**...

    下拉复选框

    总结来说,下拉复选框的实现结合了Java的后端数据处理和jQuery的前端交互增强。这种组件的开发需要对Web开发的全栈理解,包括服务器端逻辑、HTTP通信、客户端渲染和用户体验设计。通过自定义插件,开发者可以根据...

    jQuery扩展方法实现Form表单与Json互相转换的实例代码

    本文的核心内容是介绍如何通过jQuery扩展方法实现Form表单与JSON格式数据之间的相互转换。在Web开发中,这种转换技术常常用于前后端数据交互,尤其是在处理表单提交和动态数据更新的场景。通过扩展jQuery的$.fn...

Global site tag (gtag.js) - Google Analytics