easyui datagrid加载数据的三种方式

1、加载本地数据

var obj = {"total":2,"rows":[{id:"1",name:"一"},{id:"2",name:"二"}]};
$('#dg').datagrid('loadData',obj);

注意：这里的数据必须是json对象，要是json字符串，必须先转换成json对象才能作为datagrid的数据源。否则会出现异常：Cannot read property ‘length’ of undefined。

var str = '{"total":2,"rows":[{id:"1",name:"一"},{id:"2",name:"二"}]}';
var data = $.parseJSON(str);
$('#dg').datagrid('loadData', data);

2、加载url方式获取的数据

$('#dg').datagrid({   url:'datagrid_data2.json'
});

3、Html中直接写入

<table id='grid' class='easyui-datagrid' style='width:1100px;height:500px' title='用户列表' iconCls='icon-table'  rownumbers='true' fitColumns='true' singleSelect='true' toolbar='#toolbar' >  <thead>  <tr>  <th field='file_name' width='50' align='center'>文件名称</th>  <th field='file_txt' width='70'align='center'>文件内容</th>   <th field='file_path' width='70' align='center'>存储位置</th> </tr>  </thead>  <tbody><tr><td>EST-1</td><td>FI-SW-01</td><td>Large</td></tr><tr><td>EST-10</td><td>K9-DL-01</td><td>Spotted Adult Female</td></tr></tbody></table>

来自网上资料

自己实际测试的结果：

<body>
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'north'" style="width: 100%;height: 10%">
</div>
<div data-options="region:'center',title:'测试数据记录列表'"><table id="datagrid"  class="easyui-datagrid" style="width: 100%; height: 100%"url="/select"toolbar="#dgtoolbar"pagination="true"pageSize="10"pageList="[25,15,10]"rownumbers="false"fitColumns="true"singleSelect="true"loadMsg="正在查询..."><thead><tr><th field="cb" checkbox="true" align="center"></th><th data-options="field:'id',align:'center'" width="5%">编号</th><th data-options="field:'user',align:'center'" width="25%">测试人员</th><th data-options="field:'path',align:'center'" width="45%">文件路径</th><th data-options="field:'time',align:'center'" width="25%">测试时间</th></tr></thead></table></div>
</div><!--<script type="text/javascript">--><!--$(document).ready(--><!--$.post("/select",--><!--function(data){--><!--console.log(data);--><!--$("#datagrid").datagrid('loadData', data);--><!--}--><!--)--><!--);-->
<!--</script>-->
</body>

后端：

@RequestMapping(value="/select")public Map getdata(){Map resultMap=new HashMap();List<TMemory>list=meoryService.getData();resultMap.put("total",list.size()+1);resultMap.put("rows",list);return resultMap;}

实现的效果：

实现效果比较ok！

easyui datagrid加载数据的三种方式相关推荐

ajax加载vue数据,详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
整理文档,搜刮出一个使用vue.js结合jquery ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 demo {{message }} 测试jqu ...
Echarts加载地图的三种方式
参考地址:http://www.echartsjs.com/option.html#geo.map ECharts 中提供了两种格式的地图数据,一种是可以直接 script 标签引入的 js 文件,引 ...
SharePoint 实现ajax异步加载数据的几种方式
初到公司,由原想的asp.net开发转向了SharePoint(简称SP)开发,个人感觉与之前差别不大,今天用sp实现异步加载数据的时候遇到点问题,之前在asp.net下一步都是用 jquery.aj ...
ssm预先加载数据的四种方式
在web项目中,首页的很多内容都需要从数据库中来获取,但是默认初始加载页面并不会加载出来数据库中的数据,这时,我们需要对数据进行 "预加载" 一设置初始页面ResultMappi ...
JavaScript判断图片是否加载完成的三种方式
一.load事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML> <html> <head> ...
Extjs formpanel加载数据的两种方式
1.formpanel数据源和grid相同,使用Form.getForm().loadRecord(row);则数据便可自动加载在formpanel中对应的控件. 2.formpanel数据源是单独的 ...
Dialog加载页面动画（Loding.....加载等待）三种方式
方式一:帧动画切换效果(几张图片切换) 1.drawable 下创建资源(多张图片~根据自己需要) <?xml version="1.0" encoding="ut ...
ios网络学习------4 UIWebView的加载本地数据的三种方式
ios网络学习------4 UIWebView的加载本地数据的三种方式分类: IOS2014-06-27 12:56 959人阅读评论(0) 收藏举报 UIWebView是IOS内置的浏览器, ...
异步加载js的三种方法
js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...

easyui datagrid加载数据的三种方式

easyui datagrid加载数据的三种方式相关推荐

最新文章

热门文章