jQuery easyui datagrid数据绑定
1.绑定json数据
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<link href="Css/easyui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
var json={"total":28,"rows":[
{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]};
$('#tbl').datagrid({
title: '测试DataGrid',
width: 700,
height: 'auto',
fitColumns: true,
columns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:120},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:250},
{field:'status',title:'Status',width:60,align:'center'}
]]
}).datagrid("loadData",json);
});
</script>
</head>
<body>
<table id="tbl">
</table>
</body>
</html>
浏览器显示结果：
2.查询后台数据，然后绑定
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<link href="Css/easyui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var userUrl = "http://127.0.0.1:9998/getUser";
function initUser() {
$('#dri_grid').datagrid({
border: false,
fit: true,
singleSelect: true,
method: 'get',
pagination: true,
striped: true,
pageSize: 20,
onBeforeLoad: function() {
},
columns: [
[{
field: 'id',
title: ' 编号',
width: '8%',
align: 'center'
}, {
field: 'lasttimeonline',
title: ' 最后登录时间',
width: '14%',
align: 'center'
}
]
],
onLoadSuccess: function(data) {
}
});
}
$(function () {
initUser();
$('#dri_grid').datagrid('load', userUrl);
});
</script>
</head>
<body>
<table id="dri_grid"></table>
</body>
</html>
浏览器显示结果：
jQuery easyui datagrid数据绑定的更多相关文章
- jQuery EasyUI datagrid实现本地分页的方法
http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
- jquery easyui datagrid使用参考
jquery easyui datagrid使用参考 创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...
- Jquery easyui datagrid 导出Excel
From:http://www.cnblogs.com/weiqt/articles/4022399.html datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <sc ...
- jquery easyui datagrid 获取Checked选择行(勾选行)数据
原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...
- 扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
- jquery easyui datagrid 加每页合计和总合计
jquery easyui datagrid 加每页合计和总合计 一:效果图 二:代码实现 这个只有从后台来处理 后台根据rows 和page两个参数返回的datatable 命名为dt 然后根据dt ...
- jQuery EasyUI datagrid列名包含特殊字符会导致表格错位
首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试,太老的版本不想去折腾了. 洒家在写前端的SQL执行工具时,表格用了 jQuery EasyUI datagrid,因为 ...
- jquery easyui datagrid 无滚动条，datagrid 没垂直滚动条
jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条 ============================== 蕃薯耀 2018年2月6日 http://www. ...
随机推荐
- matlab 解方程组
1.解方程 最近有多人问如何用matlab解方程组的问题,其实在matlab中解方程组还是很方便的,例如,对于代数方程组Ax=b(A为系数矩阵,非奇异)的求解,MATLAB中有两种方法:(1)x=in ...
- paramiko堡垒机、线程及锁
1.使用paramiko实现ssh连接和scp拷贝 开发堡垒机之前,先来学习Python的paramiko模块,该模块机遇SSH用于连接远程服务器并执行相关操作 1.1 SSHClient 用于连接远 ...
- 怎么在官网下载jstl【配图详解】
JSTL(JSP Standard Tag Library,JSP标准标签库)是一个非常优秀的开源JSP标签库,如果要在系统使用JSTL标签,则必须将jstl.jar和 standard.jar文件放 ...
- BZOJ 2054 疯狂的馒头
并查集把染过色的并在一起.倒着染色. #include<iostream> #include<cstdio> #include<cstring> #include& ...
- 修改主机名Ubuntu
主机名存放在/etc/hostname 修改保存即可
- AmazeUI布局
AmazeUI使用了12列的响应式网络系统.使用时需在外围容器上添加.am-g class,在列上添加.am-u-[sm|md|lg]-[1-12] class,然后根据不同的屏幕需求设置不同的宽度. ...
- 解决div里插入img下边缝隙问题
<html> <head> <title> new document </title> <meta name="author ...
- Magento的价格去掉小数点
Magento的默认情况,价格后面是有小数点的,我们来看下如何正确的来去掉小数点. 1.复制如下路径的文件 app/code/core/Mage/Directory/Model/Currency.ph ...
- 通知(Notification) 、 应用间通信（一）
1 使用通知中心发送消息 1.1 问题 当一个对象需要向多个接受者发送消息的,或者不用知道消息的接收者是谁,就可以使用IOS提供的NSNotificationCenter通知中心,本案例使NSNoti ...
- Nginx工作原理和优化
转自:http://blog.csdn.net/hguisu/article/details/8930668 Nginx由内核和模块组成,其中,内核的设计非常微小和简洁,完成的工作也非常简单,仅仅通过 ...