项目中使用了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'); } }