低版本的easyui 的grid = $("#datagrid").treegrid 如何实现多层级的树形 上移、下移
时间: 2024-03-05 12:50:52 浏览: 56
低版本的 EasyUI 的 TreeGrid 组件可能没有提供 `swap` 方法来实现树形上移、下移的功能。但是,您可以通过编写自定义的方法来实现这个功能。以下是一个简单的实现思路:
1. 获取当前选中的节点以及其父节点和兄弟节点。
2. 判断当前节点是否可以上移或下移,如果不能,则返回错误提示。
3. 根据上移或下移的方向,更新当前节点和目标节点的位置信息。
4. 更新节点在数据源中的位置信息,并重新加载数据。
以下是一个简单的代码实现,仅供参考:
```javascript
// 上移节点
function moveUp() {
var selectedNode = $('#datagrid').treegrid('getSelected'); // 获取当前选中节点
if (selectedNode) {
var index = $('#datagrid').treegrid('getRowIndex', selectedNode); // 获取当前节点在兄弟节点中的索引
var siblings = $('#datagrid').treegrid('getParent', selectedNode).children; // 获取当前节点的兄弟节点
if (index > 0) { // 如果当前节点不是第一个节点,则可以进行上移操作
var prev = siblings[index - 1]; // 获取当前节点的前一个节点
// 更新当前节点和前一个节点的位置信息
selectedNode._parentId = prev._parentId;
selectedNode.sort = prev.sort;
prev._parentId = selectedNode.parentId;
prev.sort = index;
// 更新数据源中的位置信息,并重新加载数据
updateNode(selectedNode);
updateNode(prev);
$('#datagrid').treegrid('reload');
} else { // 如果当前节点是第一个节点,则不能进行上移操作
alert('不能再上移了!');
}
} else { // 如果没有选中节点,则提示错误
alert('请选中一个节点再进行操作!');
}
}
// 下移节点
function moveDown() {
var selectedNode = $('#datagrid').treegrid('getSelected'); // 获取当前选中节点
if (selectedNode) {
var index = $('#datagrid').treegrid('getRowIndex', selectedNode); // 获取当前节点在兄弟节点中的索引
var siblings = $('#datagrid').treegrid('getParent', selectedNode).children; // 获取当前节点的兄弟节点
if (index < siblings.length - 1) { // 如果当前节点不是最后一个节点,则可以进行下移操作
var next = siblings[index + 1]; // 获取当前节点的后一个节点
// 更新当前节点和后一个节点的位置信息
selectedNode._parentId = next._parentId;
selectedNode.sort = next.sort;
next._parentId = selectedNode.parentId;
next.sort = index;
// 更新数据源中的位置信息,并重新加载数据
updateNode(selectedNode);
updateNode(next);
$('#datagrid').treegrid('reload');
} else { // 如果当前节点是最后一个节点,则不能进行下移操作
alert('不能再下移了!');
}
} else { // 如果没有选中节点,则提示错误
alert('请选中一个节点再进行操作!');
}
}
// 更新节点在数据源中的位置信息
function updateNode(node) {
$.ajax({
url: 'update_node.php',
type: 'POST',
data: {id: node.id, parentId: node._parentId, sort: node.sort},
success: function(data) {
console.log('更新成功');
},
error: function() {
alert('更新失败');
}
});
}
```
以上代码仅供参考,具体实现方式可能会依据您的具体情况而有所不同。如果您有任何问题或需要更具体的帮助,请提供更多的上下文信息和代码片段。
阅读全文