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. ...
随机推荐
- php大力力 [013节]mySQL数据库乱码问题我还没解决
<?php echo"测试<br>"; $sql_connection = mysql_connect("localhost","e ...
- Linux命令(2)-rm删除文件
版本:centos7 Linux中使用rm(remove)命令将文件从磁盘上永久删除.使用-r参数可以删除目录及目录下的子目录.对于连接文件只是断开了连接,源文件保持不变.用户删除一个文件时需要对该文 ...
- 【JOJO】真男人-坚不可摧
DIO,你输给我的原因只有一个! 那就是,你惹怒了我! http://www.bilibili.com/video/av461689/
- 8、网页制作Dreamweaver（jQuery基础:安装、语法）
在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...
- NSNumber 、 NSValue 、 日期处理 、 集合类 、 NSArray(一)
1 基本数据类型的封装 1.1 问题 我们所学的所有基本数据类型,如int.float.double.char等,都不是对象,不能向它们发送消息.然而,在Foundation中的许多类,如NSArra ...
- oracle注意事项
企业管理器system登陆时必须使用normal模式
- CentOS安装时小坑记录
在安装CentOS的时候,由于第一次安装小白,将VM虚拟机的内存设置为512M,导致进行安装的时候无法进入正常的画面安装模式,只能使用简版安装界面,可能对于很多小白不是很熟悉,特此记录,安装CentO ...
- 【题解】【数组】【Prefix Sums】【Codility】Passing Cars
A non-empty zero-indexed array A consisting of N integers is given. The consecutive elements of arra ...
- Highcharts ajax获取json对象动态生成报表生成 .
http://blog.csdn.net/wsk7860/article/details/8751061 最近做个项目,项目经理想做一个统计报表,在网上查看些资料就选用Highchars 这里和大家分 ...
- Map/Reduce的类体系架构
Map/Reduce的类体系架构 Map/Reduce案例解析: 先以简单的WordCount例程, 来讲解如何去描述Map/Reduce任务. public static void main(Str ...