`
janedoneway
  • 浏览: 581987 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Datagrid 显示数据是最新的,但$('#datagrid').datagrid('getSelections')取得的选中数据不是最新的

 
阅读更多

项目中使用了easyui的datagrid和dialog,dialog中包括了一个datagrid.

<div id="dlg-role-edit" href="" class="easyui-dialog" modal="true" 
        style="width:500px;height:300px;padding:15px 10px" closed="true" 
       buttons="#dlg-buttons-user_roles">
	<input type="hidden" id="currentSelectUserId" name="currentSelectUserId" />
         
        <table id="dg-user-roles"></table>
</div>
<div id="dlg-buttons-user_roles">
	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUserRoles()">Save</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg-role-edit').dialog('close')">Cancel</a>
</div>

 页面点击编辑按钮时,弹出这个dialog,并刷新datagrid "dg-user-roles'中的数据,点击dialog的save按钮时,保存数据。javascript 代码如下:

          function editRole() {
	    	var row = $('#dg').datagrid('getSelected');
			if (row){
				document.getElementById("currentSelectUserId").value= row.userId;
				//alert(document.getElementById("currentSelectUserId").value);
				
				$('#dlg-role-edit').dialog('open')
				$('#dlg-role-edit').dialog('setTitle','Edit user\'s roles');
				
				$('#dg-user-roles').datagrid({
		    		title:'Current user:' +row.userName,
				    iconCls:'',
				    url:'${ctx}/accountmanagement/user/listUserRoles.html?userId='+row.userId,
				    idField:'roleId',
				    height:200,
				    pagination:false,
				    fitColumns:true,
				    columns:[[
				        {field:'checked',checkbox:true},
				        {field:'roleName',title:'Role Name',width:200},
				        {field:'roleDesc',title:'Role Description',width:200}
				    ]], 
				    onLoadSuccess:function() {
				    	var rows = $('#dg-user-roles').datagrid('getRows')
						var rowcount = rows.length;
						for(var i=0; i<rowcount; i++){
							alert(rows[i].roleId);
							if(rows[i].checked) {
								$('#dg-user-roles').datagrid('selectRow',i);	
							} else {
								$('#dg-user-roles').datagrid('unselectRow',i);	
							}
						}
				    }
		    	});
			} else {
				$.messager.alert('',"Please select one user to edit roles.");
			}
	    }
	    
	    function saveUserRoles() {
	    	var currentSelectUserId = document.getElementById("currentSelectUserId").value;
	    	var selectedRows = $('#dg-user-roles').datagrid('getSelections');
	    	alert(currentSelectUserId);
	    	alert(selectedRows);
	    	alert(selectedRows.length);
	    	var rowcount = selectedRows.length;
	    	var var_roleIds = "";
	    	if(rowcount == 0) {
	    		$.messager.alert('',"Please at least select a role for user.");
	    	} else {
	    		for(var i=0; i<rowcount; i++){
	    			var_roleIds +=","+selectedRows[i].roleId;
	    		}
	    		if(var_roleIds != "" && var_roleIds.length != 0) {
	    			var_roleIds = var_roleIds.substr(1);
	    		}
	    		alert("var_roleIds: " + var_roleIds);
	    		$.post('${ctx}/accountmanagement/user/userEditRoles.html',{userId:currentSelectUserId,roleIds:var_roleIds},function(result){
					if (result.success){
						$.messager.alert('',result.msg);
						$('#dlg-role-edit').dialog('close', 'forceClose');
					} else {
						$.messager.alert('',result.msg);
					}
				},'json');
	    	}
	    }

 使用上面的代码在再次打开dialog时显示的是新数据,但是通过$('#dg-user-roles').datagrid('getSelections')得到的却是上次点开时选中的的旧数据。为解决这个问题,将上面的js代码改为下面,重点是先取消所有选中,然后重新加载

var is_dg_user_roles_init = false;
	    function editRole() {
	    	var row = $('#dg').datagrid('getSelected');
			if (row){
				document.getElementById("currentSelectUserId").value= row.userId;
				//alert(document.getElementById("currentSelectUserId").value);
				
				
				$('#dlg-role-edit').dialog('open')
				$('#dlg-role-edit').dialog('setTitle','Edit user\'s roles');
				
				
				if(!is_dg_user_roles_init) {
					alert("firsttime");
					$('#dg-user-roles').datagrid({
			    		title:'Current user:' +row.userName,
					    iconCls:'',
					    url:'${ctx}/accountmanagement/user/listUserRoles.html?userId='+row.userId,
					    idField:'roleId',
					    height:200,
					    pagination:false,
					    fitColumns:true,
					    columns:[[
					        {field:'checked',checkbox:true},
					        {field:'roleName',title:'Role Name',width:200},
					        {field:'roleDesc',title:'Role Description',width:200}
					    ]], 
					    onLoadSuccess:function() {
					    	var rows = $('#dg-user-roles').datagrid('getRows')
							var rowcount = rows.length;
							for(var i=0; i<rowcount; i++){
								alert(rows[i].roleId);
								if(rows[i].checked) {
									$('#dg-user-roles').datagrid('selectRow',i);	
								} else {
									$('#dg-user-roles').datagrid('unselectRow',i);	
								}
							}
					    }
			    	});
			    	is_dg_user_roles_init = true;
				} else {
					alert("not firsttime");
                                        $('#dg-user-roles').datagrid('clearSelections');
                                        $('#dg-user-roles').datagrid('options').url = '${ctx}/accountmanagement/user/listUserRoles.html?userId='+row.userId;
					$('#dg-user-roles').datagrid('reload');
				}
				
			} else {
				$.messager.alert('',"Please select one user to edit roles.");
			}
	    }
	    
	    function saveUserRoles() {
	    	var currentSelectUserId = document.getElementById("currentSelectUserId").value;
	    	var selectedRows = $('#dg-user-roles').datagrid('getSelections');
	    	alert(currentSelectUserId);
	    	alert(selectedRows);
	    	alert(selectedRows.length);
	    	var rowcount = selectedRows.length;
	    	var var_roleIds = "";
	    	if(rowcount == 0) {
	    		$.messager.alert('',"Please at least select a role for user.");
	    	} else {
	    		for(var i=0; i<rowcount; i++){
	    			var_roleIds +=","+selectedRows[i].roleId;
	    		}
	    		if(var_roleIds != "" && var_roleIds.length != 0) {
	    			var_roleIds = var_roleIds.substr(1);
	    		}
	    		alert("var_roleIds: " + var_roleIds);
	    		$.post('${ctx}/accountmanagement/user/userEditRoles.html',{userId:currentSelectUserId,roleIds:var_roleIds},function(result){
					if (result.success){
						$.messager.alert('',result.msg);
						$('#dlg-role-edit').dialog('close', 'forceClose');
					} else {
						$.messager.alert('',result.msg);
					}
				},'json');
	    	}
	    }
分享到:
评论

相关推荐

    JS EasyUI DataGrid动态加载数据

    在实际应用中,动态加载数据是DataGrid的一个重要特性,允许用户在需要时加载更多的数据,提高网页性能并优化用户体验。 动态加载数据通常指的是懒加载(Lazy Loading)机制,即只在用户滚动到数据视图的底部或者...

    解决EasyUIdataGrid列比较多,无数据,列展现不全

    ### 解决EasyUI dataGrid列较多时无数据显示不全的问题 在使用EasyUI框架进行前端开发的过程中,可能会遇到dataGrid组件在数据为空时列显示不完整的问题。这不仅影响用户体验,也降低了系统的可用性。本文将详细...

    C#WPF之DataGrid用法

    可以在DataGrid中为每行添加一个复选框,用户勾选后可以通过一个“删除”按钮将选中的数据从数据集中移除。 ##### 3. 修改数据 对于编辑功能,可以通过双击DataGrid的某一行或某一单元格来激活编辑模式。此时,用户...

    鼠标移动DataGrid显示详细信息

    根据提供的标题、描述、标签及部分内容,我们可以了解到这篇文章主要讲述的是如何实现在鼠标移动到 DataGrid 的某一行时,显示出该行的详细信息。DataGrid 是一种常用的 Web 控件,用于展示表格形式的数据。下面我们...

    jquery easyui datagrid demo 详解

    Datagrid 提供了选中行的处理,可以通过 `getSelections` 获取选中的行,然后发送请求删除: ```javascript $('#delBtn').click(function(){ var selectedRows = $('#datagrid').datagrid('getSelections'); if ...

    在DataGrid中进行复选框的操作(全选和取消)

    在.NET框架中,`DataGrid`控件是一个用于展示数据表格的强大工具,它允许用户以交互方式查看和编辑数据。在某些应用场景下,我们可能需要在`DataGrid`的每一行添加复选框,以便用户可以多选操作,如全选和取消全选...

    richfaces中的datagrid显示数据

    ### RichFaces中的DataGrid显示数据 #### 一、RichFaces简介 RichFaces是一个基于JavaServer Faces(JSF)的开源框架,它提供了丰富的组件库来增强Web应用的用户体验。通过结合Ajax技术,RichFaces能够创建出更加...

    WPF之DataGrid使用示例

    在Windows Presentation Foundation (WPF) 中,`DataGrid` 是一个强大的控件,用于展示和编辑数据集。这个控件提供了灵活的布局选项,可以显示表格形式的数据,并且支持多种操作,如排序、分页、筛选和编辑。下面将...

    Easyui-datagrid编辑模式详解

    $.extend($.fn.datagrid.defaults.editors, { checkbox: { // 自定义编辑器名称 init: function(container, options) { var input = $('&lt;input type="checkbox" class="datagrid-editable-input"&gt;').appendTo...

    VB 使用DataGrid显示书名数据表.rar

    VB 使用DataGrid显示书名数据表,这个例子相当简单,主要是学习在VB编程中如何使用DataGrid数据网格控件,将数据库内容读取出来,然后绑定到DataGrid表格中显示:  Adodc1.ConnectionString = "Provider=SQLOLEDB.1...

    easyui datagrid实现实现上下左右和回车切换单元格

    $.extend($.fn.datagrid.methods, { editCell: function(jq, param) { return jq.each(function() { var opts = $(this).datagrid('options'); var fields = $(this).datagrid('getColumnFields', true).concat...

    easyui DataGrid动态编辑

    7. **数据提交格式**:通常,你需要定义一个JSON格式的API来接收和处理这些编辑操作,如上文的`onEndEdit`中的`$.post`调用所示。 以上就是实现EasyUI DataGrid动态编辑的主要步骤和关键技术点。理解并熟练运用这些...

    datagrid 接收数据常用方法

    例如,使用jQuery的`$.ajax`或`$.getJSON`方法获取数据,然后使用JavaScript解析数据并手动填充datagrid。 4. Web服务/REST API:现代Web应用常使用Web服务或RESTful API作为数据源。datagrid会发送HTTP请求获取...

    WPFDataGrid

    DataGrid可以自动生成列来匹配数据源的属性,但也可以手动定义列类型和样式。例如,定义一个TextColumn: ```xml &lt;DataGrid.Columns&gt; &lt;/DataGrid.Columns&gt; ``` ### 5. 编辑与验证 DataGrid支持单元格和行级别的...

    jquery easyui 行编辑

    " class="easyui-datagrid" data-options=" iconCls: 'icon-edit', singleSelect: true"&gt; 标题1 ,options:{precision:3, min:1,digits:true,max:99999999}}"&gt;标题2 ,options:{precision:2, min:0.01,max...

    DATAGRID使用指導.doc

    一旦调用了DataBind()方法,DataGrid中的所有绑定数据的控件将显示DataSource中的数据,其余非绑定控件将恢复到设计时的状态。 ##### 2. DataSource 属性 DataSource是DataGrid绑定数据的源头,通常为`DataSet`、`...

    wpf动态列datagrid

    在Windows Presentation Foundation (WPF) 中,`DataGrid` 是一个强大的控件,常用于显示和编辑表格数据。当你需要创建一个可以根据数据源自动调整列数的界面时,动态列`DataGrid`就显得尤为实用。这个场景下,我们...

    打印DataGrid数据实例

    在.NET框架中,`DataGrid`控件是一个用于显示数据集或数据源的表格视图。这个实例将探讨如何利用C#编程语言和XPS(XML Paper Specification)格式来实现`DataGrid`数据的打印功能。XPS是一种开放标准,用于定义电子...

    WPF DataGrid分页

    在Windows Presentation Foundation (WPF) 中,`DataGrid` 是一个强大的控件,常用于显示和编辑表格数据。本主题将深入探讨如何实现`DataGrid`的分页功能,这在处理大量数据时非常关键,因为它能提高应用程序的性能...

    easyui datagrid 数据导出到Excel

    在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...

Global site tag (gtag.js) - Google Analytics