（五）EasyUI使用——datagrid数据表格

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。具体功能参考API,这里介绍几种创建数据表格的方法

1. 将HTML代码渲染为datagrid样式

<h3>方式一：将静态的HTML代码渲染为datagrid样式</h3><table class="easyui-datagrid"><thead><tr><th data-options="field:'id'">编号</th><th data-options="field:'name'">姓名</th><th data-options="field:'age'">年龄</th></tr></thead><tbody><tr><td>001</td><td>张三</td><td>20</td></tr><tr><td>002</td><td>李四</td><td>30</td></tr></tbody></table>

2. 发送ajax请求获取json数据

<h3>方式二：发送ajax请求获取json数据</h3><table class="easyui-datagrid" data-options="url:'/bos/json/data.json'"><thead><tr><th data-options="field:'id'">编号</th><th data-options="field:'name'">姓名</th><th data-options="field:'age'">年龄</th></tr></thead></table>

data.json

[ {"id":"001","name":"李大","age":"13912345678","haspda":"1","deltag":"0","standard":"10-20公斤","station":"杭州分部"},{"id":"002","name":"李二","age":"13912345678","haspda":"1","deltag":"0","standard":"10-20公斤","station":"杭州分部"}
]

3. 使用插件提供的API动态创建datagrid

<h3>方式三：通过js代码动态创建datagrid</h3><table id="grid"></table><script type="text/javascript">$(function(){$("#grid").datagrid({columns:[[{field:'id',title:'编号',checkbox:true},//添加复选框{field:'name',title:'姓名'},{field:'age',title:'年龄'}]],url:'/bos/json/data.json',toolbar:[{text:'添加',iconCls:'icon-add'},{text:'删除',iconCls:'icon-remove',handler:function(){//获得选中的行var rows = $("#grid").datagrid("getSelections");for(var i=0;i<rows.length;i++){var id = rows[i].id;alert(id);  //这里只是显示选中的行}}},{text:'修改',iconCls:'icon-edit'}],singleSelect:true,  //单选pagination:true,//分页条
                pageList:[3,5,7] //每页可以显示3行，5行，7行});});</script>

要求服务端返回的json数据满足：

三种方法效果如下：

转载于:https://www.cnblogs.com/zjfjava/p/7030400.html

（五）EasyUI使用——datagrid数据表格相关推荐

Easyui之Datagrid(数据表格)
Datagrid 前言 1.概念 2.常见使用案例 3.datagrid属性 4.datagrid事件 5.datagrid方法 6.案例演示 7.为什么使用datagrid 总结前言今天为大家分 ...
DataGrid( 数据表格) 组件[5]
本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination ...
datagrid数据表格当数据为0的时候页面不显示数据
如下图: datagrid数据表格当数据为0的时候页面不显示数据,为空的表格数据全是0,但是页面无法显示传递的json数据也是没问题的: 所以实在想不通,为什么easyUI datagrid 不显示 ...
.easyui（DataGrid数据查询）
1.DataGrid 1.1 DataGrid基本属性 1.1.1 基本属性 url : '', // 初始化请求路径 fitcolumns : false, ...
jQuery EasyUI API 中文文档 - DataGrid 数据表格
扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagin ...
jquery easyui DataGrid 数据表格属性
扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagin ...
JQuery Easy Ui dataGrid 数据表格 --转
转至: http://www.cnblogs.com/cnjava/archive/2013/01/21/2869876.html#events 数据表格 - DataGrid 内容概况使用方法 ...
datagrid数据表格使用方法
将静态HTML渲染为datagrid样式: <table class="easyui-datagrid&q ...
EasyUi之动态数据表格的实现
文章目录前言使用步骤 1.理解对应数据格式 2.使用控件代码实现 1.思路 2.后台数据格式的转变 3.控件函数配置 4.具体实现 5.代码优化实现效果前言首先我们学习一款框架的方法应该是 ...

（五）EasyUI使用——datagrid数据表格

1. 将HTML代码渲染为datagrid样式

2. 发送ajax请求获取json数据

3. 使用插件提供的API动态创建datagrid

（五）EasyUI使用——datagrid数据表格相关推荐

最新文章

热门文章