$("#datagrid").treegrid 树形自动编号
时间: 2023-07-19 14:23:51 浏览: 125
您可以使用TreeGrid的`onLoadSuccess`事件,结合jQuery的`each()`方法,手动给每个节点添加自增的编号。具体实现可以参考下面的代码:
```javascript
$('#datagrid').treegrid({
onLoadSuccess: function(row, data) {
var index = 1;
$(this).treegrid('getPanel').find('.tree-node').each(function() {
$(this).find('.tree-title').prepend(index + '. ');
index++;
});
}
});
```
在这段代码中,我们在`onLoadSuccess`事件中遍历每个节点,并将自增的编号添加到节点的标题前面。其中,`index`变量用来保存当前的自增编号。注意,这里使用了`.tree-node`类来选择每个节点,使用`.tree-title`类来选择每个节点的标题。
相关问题
easyui 的grid = $("#datagrid").treegrid 如何实现多层级的树形 上移、下移
EasyUI 的 `treegrid` 组件是基于 `datagrid` 组件扩展而来的,因此可以在 `treegrid` 上使用 `datagrid` 的相关方法和事件。对于多层级的树形结构,可以通过递归遍历所有节点来实现上移、下移操作。
具体实现如下:
1. 获取当前选中的节点:
```javascript
var selectedNode = $('#datagrid').treegrid('getSelected');
```
2. 获取当前节点的父节点:
```javascript
var parentNode = $('#datagrid').treegrid('getParent', selectedNode.id);
```
3. 获取当前节点的所有兄弟节点:
```javascript
var siblings = $('#datagrid').treegrid('getChildren', parentNode ? parentNode.id : null);
```
4. 获取当前节点在兄弟节点中的位置:
```javascript
var index = siblings.indexOf(selectedNode);
```
5. 上移操作:
```javascript
if (index > 0) {
// 交换当前节点和前一个节点的位置
var prev = siblings[index - 1];
$('#datagrid').treegrid('swap', {
id: selectedNode.id,
parent: parentNode ? parentNode.id : null
}, {
id: prev.id,
parent: parentNode ? parentNode.id : null
});
}
```
6. 下移操作:
```javascript
if (index < siblings.length - 1) {
// 交换当前节点和后一个节点的位置
var next = siblings[index + 1];
$('#datagrid').treegrid('swap', {
id: selectedNode.id,
parent: parentNode ? parentNode.id : null
}, {
id: next.id,
parent: parentNode ? parentNode.id : null
});
}
```
需要注意的是,上移、下移操作可能会涉及到节点的父子关系,因此需要考虑好具体的操作逻辑,避免出现逻辑错误。
低版本的easyui 的grid = $("#datagrid").treegrid 如何实现多层级的树形 上移、下移
低版本的 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('更新失败');
}
});
}
```
以上代码仅供参考,具体实现方式可能会依据您的具体情况而有所不同。如果您有任何问题或需要更具体的帮助,请提供更多的上下文信息和代码片段。
阅读全文