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. ...
随机推荐
- 详解模块定义(.def)文件
一个完整的Windows应用程序(C++程序)通常由五种类型的文件组成:源程序文件,头文件,资源描述文件,项目文件,模块定义文件.本文主要讲解模块定义文件. 模块定义 (.def)文件为链接器提供有关 ...
- Bochs使用说明
简介 关于Bochs的介绍:http://en.wikipedia.org/wiki/Bochs Bochs的官网:http://bochs.sourceforge.net/ 这里记录如何在Windo ...
- office2010安装Microsoft Office Document Imaging (MODI) 图解
office2010安装Microsoft Office Document Imaging (MODI) 图解 Microsoft Office 2010 中删除了 Microsoft Off ...
- Response响应请求操作
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Te ...
- D - 排列
#include<cstdio> #include<algorithm> #include<string.h> using namespace std; #defi ...
- MySQL单表多字段模糊查询解决方法
例如现有table表,其中有title,tag,description三个字段,分别记录一条资料的标题,标签和介绍.然后根据用户输入的查询请求,将输入的字串通过空格分割为多个关键字,再在这三个字段中查 ...
- 在虚拟上安装kali
1.创建新的虚拟机 2.选择典型 下一步 3.选安装程序光盘映像文件:写入自己.iso的位置 4.linux--Ubuntu 5.给虚拟机名称 虚拟机在你电脑的位置 6.最大自盘自己定义 7.选自定义 ...
- C# 接受邮件 两种方式
有些累了,不想写太多,直接把代码贴上 EWS 源码 POP协议 源码 PS:如果我们发现引入的一个dll,能够添加引用,但是一编译又找不到,那么很有可能是.net framework 版本不同. 不如 ...
- [转载] codeblocks快捷键
==日常编辑== • 按住Ctrl滚滚轮,代码的字体会随你心意变大变小. • 在编辑区按住右键可拖动代码,省去拉(尤其是横向)滚动条之麻烦:相关设置:Mouse Drag Scrolling. • C ...
- 转载:LBP代码详细注释
%LBP returns the local binary pattern image or LBP histogram of an image.% J = LBP(I,R,N,MAPPING,MOD ...