datagrid 能编辑,能拖动排序
时间: 2023-07-20 13:16:00 浏览: 133
如果您需要在DataGrid中既能编辑数据,又能通过拖动来进行排序,可以使用EasyUI提供的`datagrid-sort`和`datagrid-rowediting`扩展插件来实现。
首先,您需要在页面中引入这两个插件:
```html
<!-- 引入datagrid-sort和datagrid-rowediting的JS文件 -->
<script type="text/javascript" src="jquery.datagrid.sort.js"></script>
<script type="text/javascript" src="jquery.datagrid.rowediting.js"></script>
```
然后,在DataGrid的初始化代码中,添加`sort`和`rowediting`属性,并对应配置:
```javascript
$('#datagridId').datagrid({
url: 'data.json',
columns: [...],
sort: {
field: 'sortField', // 排序字段
order: 'asc' // 排序顺序
},
rownumbers: true, // 显示行号
rowediting: {
clicksToEdit: 1, // 单击一次即可编辑
saveOnBlur: true // 失去焦点时自动保存
}
});
```
其中,`sort`属性用于配置排序相关的参数,`rowediting`属性用于配置行编辑相关的参数。需要注意的是,在使用`rowediting`插件时,需要将`clicksToEdit`属性设置为1,表示单击一次即可编辑;将`saveOnBlur`属性设置为`true`,表示失去焦点时自动保存。
最后,您还需要在DataGrid的HTML代码中,为DataGrid添加`datagrid-sortable`和`datagrid-row-editing`样式类:
```html
<table id="datagridId" class="easyui-datagrid" style="width: 100%; height: 100%;"
data-options="...">
<thead>
<tr>
<th data-options="field:'field1',sortable:true">Field1</th>
<th data-options="field:'field2',sortable:true">Field2</th>
...
</tr>
</thead>
<tbody class="datagrid-sortable datagrid-row-editing"></tbody>
</table>
```
这样,您就可以通过拖动行来排序,同时又能编辑数据了。需要注意的是,在使用`rowediting`插件时,如果您的DataGrid中有复选框或单选框列,需要将其设置为不可编辑,否则可能会出现异常。
阅读全文