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