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数据绑定的更多相关文章

  1. 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% ...

  2. jQuery EasyUI DataGrid Checkbox 数据设定与取值

    纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...

  3. jquery easyui datagrid使用参考

    jquery easyui datagrid使用参考   创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上 ...

  4. Jquery easyui datagrid 导出Excel

    From:http://www.cnblogs.com/weiqt/articles/4022399.html datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <sc ...

  5. jquery easyui datagrid 获取Checked选择行(勾选行)数据

    原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...

  6. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  7. jquery easyui datagrid 加每页合计和总合计

    jquery easyui datagrid 加每页合计和总合计 一:效果图 二:代码实现 这个只有从后台来处理 后台根据rows 和page两个参数返回的datatable 命名为dt 然后根据dt ...

  8. jQuery EasyUI datagrid列名包含特殊字符会导致表格错位

    首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试,太老的版本不想去折腾了. 洒家在写前端的SQL执行工具时,表格用了 jQuery EasyUI datagrid,因为 ...

  9. jquery easyui datagrid 无滚动条，datagrid 没垂直滚动条

    jquery easyui datagrid 无滚动条,datagrid 没垂直滚动条 ============================== 蕃薯耀 2018年2月6日 http://www. ...

随机推荐

  1. iOS 版本号Version和Build的区别

    一个version,一个build,都是设置版本的地方,有什么区别呢? 在ios中(Android等工程中也一样),有两种version,一种是 CFBundleVersion ("Bund ...

  2. CAD系统变量（参数）大全

    所谓系统变量就是一些参数,这些参数有些是可以在“选项”或其他对话框中进行设置的,有些这必须通过在命令行输入变量名进行设置,当然对于高手来说,还可以通过二次开发程序来进行控制. CAD有很多的变量,例如 ...

  3. javascript笔记4-函数表达式

    一般形式的创建函数,在执行代码之前会先读取函数声明,所以可以把函数声明写在函数调用的下面: sayHi(); function sayHi(){ alert("Hi!"); } 使 ...

  4. iOS之《 Human Interface Guidelines：from Concept to Product 》<界面设计指南 二>：从概念到产品的实现

    开发之前需要想到的: 1.列出所有用户可能喜欢的功能. 例子:食谱 (1)创建一个总的食谱菜单 (2)食谱的获取方法  (3)比较价格 (4)当地的食材店 (5)食谱每道菜的注释 (6)能够获取和使用 ...

  5. Python 练习册--生成唯一激活码(邀请码)

    题目是这样子的: 做为 Apple Store App 独立开发者,你要搞限时促销,为你的应用生成激活码(或者优惠券),使用 Python 如何生成 200 个激活码(或者优惠券)? 分析 其实要生成 ...

  6. swift SDWebImage使用

    Web image(网络图像) 该库提供了一个支持来自Web的远程图像的UIImageView类别它提供了: 添加网络图像和缓存管理到Cocoa Touch framework的UIImageView ...

  7. select2美化下拉单

    http://www.51xuediannao.com/js/jquery/select2.html http://www.51xuediannao.com/demo.php

  8. 利用WPF绘图

    C#入门经典 25章的一个例子,利用WPF绘图. XAML: <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/p ...

  9. iOS教程

    iOS绘图教程: http://www.cocoachina.com/industry/20140115/7703.html iOS基础教程:--包含脚本 swift http://bbs.zxope ...

  10. could not write file C:\DOCUME~1\ADMIN

    今天碰到一个错误,android模拟器无法启动,错误提示如下: NAND: could not write file C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\\Andro ...