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. ...
随机推荐
- 检测INT3 软断点
“INT3”断点指令的机器码是 “0xcch” 检测思路,取函数地址,判断第一个字节是不是 “CCh” BYTE bFirst = ; ProcAddres = GetProcAddress(Load ...
- Java容器类接口的选择
我们知道Java容器类实际提供了四类接口:Map,List,Set和Queue,如下图所示,每种接口都有不止一个版本的实现,如果在实际编写程序时需要使用某种接口时该如何选择. 从Oracle的Java ...
- Android || IOS录制mp3语音文件方法
Android Android Supported Media Formats : http://developer.android.com/guide/appendix/media-formats. ...
- Redis - 密码配置和主从复制
使用config set命令修改requirepass参数配置Redis密码config set requirepass password 也可以通过配置文件修改密码,重启后生效. 克隆虚拟机,分别运 ...
- Brute-force Algorithm_矩阵快速幂&&欧拉公式*****
Problem Description Professor Brute is not good at algorithm design. Once he was asked to solve a pa ...
- 11g_job执行带参数的procedure
现有一个参数为date类型的存储: create or replace procedure t_pro(t_var in date) as begin dbms_output.put_line(T ...
- 在magneto系统中输出tier price的最小值
2012年6月16日星期六 Asia/Shanghai上午11时39分22秒 有的时候,我们想输出产品的tier price 的最小值!如图: 下面是解决的办法: 1. 在catalog/produc ...
- 转：DateTime的灵活运用
//2008年4月24日 System.DateTime.Now.ToString("D"); //2008-4-24 System.DateTime.Now.ToString(& ...
- ZSDR017-客户订货价格和库存
*----------------------------------------------------------------------*ZSDR017-客户订货价格和库存*---------- ...
- codevs 2216 线段树 两种更新方式的冲突
题目描述 Description “神州“载人飞船的发射成功让小可可非常激动,他立志长大后要成为一名宇航员假期一始,他就报名参加了“小小宇航员夏令营”,在这里小可可不仅学到了丰富的宇航知识,还参与解决 ...