easyui datagrid 表格数据加载方式

最新推荐文章于 2023-05-18 09:05:18 发布

小马哥的天涯

最新推荐文章于 2023-05-18 09:05:18 发布

阅读量1.4k

点赞数

分类专栏： easyui框架文章标签： easyui datagrid

本文链接：https://blog.csdn.net/weixin_41296616/article/details/80115974

版权

easyui框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>easyui</title>

<script src="es/jquery.min.js"></script>
<script src="es/jquery.easyui.min.js"></script>
<script src="es/plugins/jquery.datagrid.js"></script>
<script src="es/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="es/themes/default/easyui.css"/>
<link rel="stylesheet" href="es/themes/icon.css"/>
</head>
<body>
<table id="mytb" style="width:200px;height:300px">

</table>
<script type="text/javascript">
$('#mytb').datagrid({
title: '学校', //表格名称
iconCls: 'icon-edit', //图标
width:480, //表格宽度
height:'auto', //表格高度，可指定高度，可自动
border:true, //表格是否显示边框
// url:'/api/GetInvestList', //获取表格数据时请求的地址异步动态获取数据
columns:[[
{field:'id',title:'编号',width:100,hidden:false},
{field:'name',title:'姓名',width:100},
{field:'age',title:'年龄',width:100},
{field:'school',title:'学校',width:100}
]],

pagination:true,//如果表格需要支持分页，必须设置该选项为true
pageSize:5, //表格中每页显示的行数
pageList:[5,10,15],
rownumbers:true, //是否显示行号
nowrap: false,
striped: true, //奇偶行是否使用不同的颜色
method:'get', //表格数据获取方式,请求地址是上面定义的url
sortName: 'ID', //按照ID列的值排序
sortOrder: 'desc', //使用倒序排序
idField: 'id',
loadMsg:'数据正在努力加载，请稍后...', //加载数据时显示提示信息
frozenColumns: [[ //固定在表格左侧的栏
{field: 'ck', checkbox: true},
]],
toolbar: [{
text: '添加',
iconCls: 'icon-add',
handler: function() {
getSelectIds('mytb','没有选择');
}
}, '-', {
text: '删除',
iconCls: 'icon-cut',
handler: function() {
getSelectIds('mytb','没有选择');
}
}, '-', {
text: '修改',
iconCls: 'icon-save',
handler: function() {
getSelectIds('mytb','没有选择');
}
}],

});

//固定数据加载模式
var obj = {"total":2,"rows":[{id:"1",name:"一",age:"25",school:"合肥一中"},{id:"2",name:"二",age:"55",school:"合肥六中"}]};
$('#mytb').datagrid('loadData',obj)
</script>
</body>

</html>

数据模式必须是 json对象如果是json字符串转换成对象即可

小马哥的天涯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
easyui datagrid 表格数据加载方式

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;easyui&lt;/title&gt; &lt;!--导入相关插件--&gt; &lt;script src="es/jquery.min
复制链接

扫一扫

专栏目录