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. Bayeux

    Bayeux是一种用来在客户端和服务器端传输低延迟的异步消息(主要通过http)的一种协议.它定义的消息通过命名通道进行路由并且能够进行交互传 送:server -> client, clien ...

  2. when does the View.ondraw method get called

    a View's onDraw() is called when: The view is initially drawn Whenever invalidate() is called on the ...

  3. UVA11149 矩阵快速幂

    首先我们来想一下计算A+A^2+A^3...+A^k. 如果A=2,k=6.那你怎么算 2+22+23+24+25+26 = ?= (2+22+23)*(1+23) 如果A=2,k=7.那你怎么算 2 ...

  4. 关于我和Github不得不说的一些小事

    你好,我叫黄雅婷,学号是1413042031,网络工程142班.因为小时候家里有很多课外书,有关神话和科学方面的杂志和书籍等,所以从小就喜欢看书,现在比较不挑,什么书都喜欢看,就是给我本字典,我也能看 ...

  5. 自从学了SQL编程，哪里不会点哪里！！！

    在学习SQL编程前,先给大家分享几个段子吧,咱先乐呵乐呵! <桃花庵--程序员版> 写字楼里写字间,写字间中程序员:程序人员写程序,又将程序换酒钱: 酒醒只在屏前坐,酒醉还来屏下眠:酒醉酒 ...

  6. List<T>转换为DataTable

    List<info> infos = Dal.GetInfos(); DataTable dt = new DataTable(); dt.Columns.Add("cName& ...

  7. Maven构建web项目在Eclipse中部署的几种方法

    目录: 方法一:运用Maven的plugin:jetty来部署web 方法二:运用Eclipse 的Jetty插件直接部署 方法三:运用Run on Server(tomcat)部署 [方法一].运用 ...

  8. hdu 5206 Four Inages Strategy

    题目大意: 判断空间上4个点是否形成一个正方形 分析: 标称思想 : 在p2,p3,p4中枚举两个点作为p1的邻点,不妨设为pi,pj,然后判断p1pi与p1pj是否相等.互相垂直,然后由向量法,最后 ...

  9. 纯JavaScrip图表插件——Highcharts

    简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.目前H ...

  10. sencha 环境配置

    sencha generate app MyApp MyApp 首先需要注意的是安装 sencha 并执行相关命令. 搞了老半天才知道 想要创建空项目首先 必须的在sdk 目录下才可以.好像据说第二次 ...