easyui datagrid怎么从域对象取出数据然后渲染上easyui datagrid,给我具体的代码
时间: 2024-02-23 13:02:18 浏览: 102
好的,以下是一个示例代码,假设你有一个名为"users"的域对象,其中包含了用户的姓名、性别和年龄信息:
HTML代码:
```
<table id="datagrid"></table>
```
JavaScript代码:
```
<script>
$(function(){
// 定义datagrid
$('#datagrid').datagrid({
columns:[[
{field:'name',title:'姓名',width:100},
{field:'gender',title:'性别',width:100},
{field:'age',title:'年龄',width:100}
]]
});
// 从域对象取出数据
var users = ${users}; // 这里假设你已经将域对象传递到了前端页面中
// 渲染datagrid
$('#datagrid').datagrid('loadData', users);
});
</script>
```
在上面的代码中,我们首先定义了一个空的datagrid,然后从域对象中取出数据,最后使用`loadData`方法将数据渲染到datagrid中。需要注意的是,这里使用了JSP的EL表达式`${users}`来获取域对象中的数据,如果你使用的是其他的后端框架或技术,可能需要使用不同的方式来获取数据。
相关问题
easyui datagrid 上下移动数据排序
您可以使用easyui datagrid的`onDrop`事件来实现上下移动数据排序。
首先,您需要在datagrid的初始化中设置`dragSelection`属性为`false`,以禁用默认的拖动选择行为。
然后,您需要监听`onDrop`事件,并通过`getRowIndex`方法获取拖动行和目标行的索引,然后使用`updateRow`方法交换两行的数据。
以下是示例代码:
```javascript
$('#datagrid').datagrid({
dragSelection: false,
onDrop: function (targetRow, sourceRow, point) {
var targetIndex = $('#datagrid').datagrid('getRowIndex', targetRow);
var sourceIndex = $('#datagrid').datagrid('getRowIndex', sourceRow);
// Swap data between source and target rows
var targetData = $('#datagrid').datagrid('getData').rows[targetIndex];
var sourceData = $('#datagrid').datagrid('getData').rows[sourceIndex];
$('#datagrid').datagrid('updateRow', { index: targetIndex, row: sourceData });
$('#datagrid').datagrid('updateRow', { index: sourceIndex, row: targetData });
}
});
```
当用户拖动行并在目标行上释放时,此代码将交换两行的数据并重新渲染datagrid。
easyui datagrid 显示html标签,easyui-datagrid行数据field原样输出html标签
如果想要在 easyui-datagrid 中显示 HTML 标签,需要在列定义中使用 formatter 函数来转换数据。下面是一个例子:
```javascript
$('#datagrid').datagrid({
columns: [[
{field: 'name', title: '姓名'},
{field: 'description', title: '描述', formatter: function(value){
return '<div>' + value + '</div>';
}}
]],
data: [{
name: '张三',
description: '<b>这是粗体</b>,<i>这是斜体</i>'
}]
});
```
在上面的例子中,我们在 `description` 列中使用了 formatter 函数,它会将数据用 `<div>` 标签包裹起来。这样,在 easyui-datagrid 中就可以显示 HTML 标签了。
阅读全文