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. FR #2题解

    A. 考虑把(u,v)的询问离线挂在u上,然后dfs,每次从fath[x]到[x]相当于x子树dis区间加1,x子树以外区间-1,然后维护区间和区间平方和等. 常数略大. #include<io ...

  2. div+css文字垂直居中 解决左侧头像右侧姓名，姓名多换行后相对于头像仍居中显示

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  3. 【LEETCODE OJ】Clone Graph

    Problem link: http://oj.leetcode.com/problems/clone-graph/ This problem is very similar to "Cop ...

  4. swift系统学习控件篇:UIProgressView+NSTimer+UIstepper+UIAlertController

    工作之余,学习下swift大法.把自己的学习过程分享一下.当中的布局很乱,就表在意这些细节了.直接上代码: UIProgressView+NSTimer+UIstepper UIStepper UIP ...

  5. 20145210 《Java程序设计》第08周学习总结

    第十四章 NIO与NIO2 14.1 认识NIO •NIO概述 •NIO使用频道来衔接数据结点 •在处理数据时,NIO可以让你设定缓冲区容量 •Channel架构与操作 •isOpen():确认Cha ...

  6. Java 集合深入理解（9）：Queue 队列

    点击查看 Java 集合框架深入理解 系列, - ( ゜- ゜)つロ 乾杯~ 今天心情不太好,来学一下 List 吧! 什么是队列 队列是数据结构中比较重要的一种类型,它支持 FIFO,尾部添加.头部 ...

  7. Unity3D ShaderLab 模拟纹理运动

    Unity3D ShaderLab 模拟纹理运动 这一篇,我们要说到着色器上的uv贴图的滚动效果,这样的场景可以用在河流,瀑布,熔岩等效果.算是创建纹理动画的基础技术之一. 所以 准备一个新的着色器文 ...

  8. [转载]Magento 店铺多语言设置

    本文以扩展中文包为例: 首先进入自己 Magento 后台 系统 -> 管理商店(System -> Manage Stores) 单击 “创建店铺视图”(Create Store Vie ...

  9. 第一个demo

    1.首先这是最初的概念模型. 2.最后设计成这样. 3.运行

  10. Hierarchical Token Bucket

    例子一: # tc qdisc add dev eth0 root handle 1: htb default 30 # tc class add dev eth0 parent 1: classid ...