easyui列表移除选中数据
时间: 2024-12-31 08:03:44 浏览: 6
在使用EasyUI的列表组件时,有时需要移除选中的数据。以下是实现这一功能的步骤和方法:
1. **获取选中行**:首先需要获取用户选中的行数据。EasyUI提供了`getSelected`方法来获取单选行的数据,或者`getSelections`方法来获取多选行的数据。
2. **移除数据**:使用`remove`方法将选中的数据从列表中移除。
以下是一个具体的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI 列表移除选中数据</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="tt" class="easyui-datagrid" title="示例数据" style="width:400px;height:250px"
url="data.json"
singleSelect="false"
pagination="true">
<thead>
<tr>
<th field="name" width="100">姓名</th>
<th field="age" width="100">年龄</th>
<th field="address" width="200">地址</th>
</tr>
</thead>
</table>
<button onclick="removeSelected()">移除选中数据</button>
<script type="text/javascript">
function removeSelected(){
var row = $('#tt').datagrid('getSelected');
if (row){
$.messager.confirm('确认','确定要移除该行数据吗?',function(r){
if (r){
var index = $('#tt').datagrid('getRowIndex', row);
$('#tt').datagrid('deleteRow', index);
}
});
}
}
</script>
</body>
</html>
```
在这个示例中,当用户点击“移除选中数据”按钮时,会调用`removeSelected`函数。该函数首先获取选中的行数据,然后弹出一个确认对话框,确认后使用`deleteRow`方法将选中的行数据从列表中移除。
阅读全文