项目中使用了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');
}
}
分享到:
相关推荐
在实际应用中,动态加载数据是DataGrid的一个重要特性,允许用户在需要时加载更多的数据,提高网页性能并优化用户体验。 动态加载数据通常指的是懒加载(Lazy Loading)机制,即只在用户滚动到数据视图的底部或者...
### 解决EasyUI dataGrid列较多时无数据显示不全的问题 在使用EasyUI框架进行前端开发的过程中,可能会遇到dataGrid组件在数据为空时列显示不完整的问题。这不仅影响用户体验,也降低了系统的可用性。本文将详细...
可以在DataGrid中为每行添加一个复选框,用户勾选后可以通过一个“删除”按钮将选中的数据从数据集中移除。 ##### 3. 修改数据 对于编辑功能,可以通过双击DataGrid的某一行或某一单元格来激活编辑模式。此时,用户...
根据提供的标题、描述、标签及部分内容,我们可以了解到这篇文章主要讲述的是如何实现在鼠标移动到 DataGrid 的某一行时,显示出该行的详细信息。DataGrid 是一种常用的 Web 控件,用于展示表格形式的数据。下面我们...
Datagrid 提供了选中行的处理,可以通过 `getSelections` 获取选中的行,然后发送请求删除: ```javascript $('#delBtn').click(function(){ var selectedRows = $('#datagrid').datagrid('getSelections'); if ...
在.NET框架中,`DataGrid`控件是一个用于展示数据表格的强大工具,它允许用户以交互方式查看和编辑数据。在某些应用场景下,我们可能需要在`DataGrid`的每一行添加复选框,以便用户可以多选操作,如全选和取消全选...
### RichFaces中的DataGrid显示数据 #### 一、RichFaces简介 RichFaces是一个基于JavaServer Faces(JSF)的开源框架,它提供了丰富的组件库来增强Web应用的用户体验。通过结合Ajax技术,RichFaces能够创建出更加...
在Windows Presentation Foundation (WPF) 中,`DataGrid` 是一个强大的控件,用于展示和编辑数据集。这个控件提供了灵活的布局选项,可以显示表格形式的数据,并且支持多种操作,如排序、分页、筛选和编辑。下面将...
$.extend($.fn.datagrid.defaults.editors, { checkbox: { // 自定义编辑器名称 init: function(container, options) { var input = $('<input type="checkbox" class="datagrid-editable-input">').appendTo...
VB 使用DataGrid显示书名数据表,这个例子相当简单,主要是学习在VB编程中如何使用DataGrid数据网格控件,将数据库内容读取出来,然后绑定到DataGrid表格中显示: Adodc1.ConnectionString = "Provider=SQLOLEDB.1...
$.extend($.fn.datagrid.methods, { editCell: function(jq, param) { return jq.each(function() { var opts = $(this).datagrid('options'); var fields = $(this).datagrid('getColumnFields', true).concat...
7. **数据提交格式**:通常,你需要定义一个JSON格式的API来接收和处理这些编辑操作,如上文的`onEndEdit`中的`$.post`调用所示。 以上就是实现EasyUI DataGrid动态编辑的主要步骤和关键技术点。理解并熟练运用这些...
例如,使用jQuery的`$.ajax`或`$.getJSON`方法获取数据,然后使用JavaScript解析数据并手动填充datagrid。 4. Web服务/REST API:现代Web应用常使用Web服务或RESTful API作为数据源。datagrid会发送HTTP请求获取...
DataGrid可以自动生成列来匹配数据源的属性,但也可以手动定义列类型和样式。例如,定义一个TextColumn: ```xml <DataGrid.Columns> </DataGrid.Columns> ``` ### 5. 编辑与验证 DataGrid支持单元格和行级别的...
在WPF(Windows Presentation Foundation)应用开发中,DataGrid控件是用于显示和操作表格数据的强大工具。在处理复杂的数据关系时,如主从数据(父子数据)的关系,DataGrid可以提供灵活的显示方式,使得用户能清晰...
" class="easyui-datagrid" data-options=" iconCls: 'icon-edit', singleSelect: true"> 标题1 ,options:{precision:3, min:1,digits:true,max:99999999}}">标题2 ,options:{precision:2, min:0.01,max...
一旦调用了DataBind()方法,DataGrid中的所有绑定数据的控件将显示DataSource中的数据,其余非绑定控件将恢复到设计时的状态。 ##### 2. DataSource 属性 DataSource是DataGrid绑定数据的源头,通常为`DataSet`、`...
在Windows Presentation Foundation (WPF) 中,`DataGrid` 是一个强大的控件,常用于显示和编辑表格数据。当你需要创建一个可以根据数据源自动调整列数的界面时,动态列`DataGrid`就显得尤为实用。这个场景下,我们...
在.NET框架中,`DataGrid`控件是一个用于显示数据集或数据源的表格视图。这个实例将探讨如何利用C#编程语言和XPS(XML Paper Specification)格式来实现`DataGrid`数据的打印功能。XPS是一种开放标准,用于定义电子...
在Windows Presentation Foundation (WPF) 中,`DataGrid` 是一个强大的控件,常用于显示和编辑表格数据。本主题将深入探讨如何实现`DataGrid`的分页功能,这在处理大量数据时非常关键,因为它能提高应用程序的性能...