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. （spring-第2回【IoC基础篇】）Spring的Schema，基于XML的配置

    要深入了解Spring机制,首先需要知道Spring是怎样在IoC容器中装配Bean的.而了解这一点的前提是,要搞清楚Spring基于Schema的Xml配置方案. 在深入了解之前,必须要先明白几个标 ...

  2. Native VS H5 VS React Native

    现在软件行业已经跨入大前端时代,所以势必学一点前端的知识.本来移动端开发都是使用各自平台的语言,如iOS端使用OC,swift:Android使用java,但是随着H5的出现,导致移动端Native出 ...

  3. “PEDIY CrackMe 2007” 下载地址

    工欲善其事,必先利其器.本专辑收集了看雪论坛『CrackMe & ReverseMe』版块2004年4月-2006年12月31期间所有的CrackMe和ReverseMe,共350余个. 下载 ...

  4. Unity3D 创建动态的立方体图系统

    Unity3D 创建动态的立方体图系统 这一篇主要是利用上一篇的Shader,通过脚本来完成一个动态的立方体图变化系统. 准备工作如下: 创建一个新的场景.一个球体.提供给场景一个平行光,准备2个立方 ...

  5. HDU 5047

    http://acm.hdu.edu.cn/showproblem.php?pid=5047 直到看到题解,我才知道这道题考的是什么 首先交点数是Σ(16*i),区域区分的公式是 边数+点数+1=分成 ...

  6. 第一个Sprint冲刺第一天

    讨论成员:邵家文.李新.朱浩龙.陈俊金 讨论内容:延续上学期四则运算app项目. 遇到的困难:1.上学期的代码需要找回来.2.开发所需要的技术还没有达到 开发需求 :第一个冲刺,加强四则运算app的功 ...

  7. why we need virtual key word

    http://stackoverflow.com/questions/2391679/why-do-we-need-virtual-methods-in-c 简言之,声明基类时,而实际指向派生类.如果 ...

  8. markdown to html

    /************************************************************************* * markdown to html * 说明: ...

  9. Azure 云助手正式发布

    Azure云服务在中国市场风生水起,越来越多的用户选择Azure作为平台将业务转向云端.随着移动互联网在中国的蓬勃发展,手机应用的体验深入人们的生活及工作.用户管控云服务也不应该只局限于电脑前,而是可 ...

  10. 二叉搜索树（Binary Search Tree）

    二叉搜索树(BST,Binary Search Tree),也称二叉排序树或二叉查找树. 二叉搜索树:一棵二叉树,可以为空:如果不为空,满足以下性质: 非空左子树的所有键值小于其根结点的键值: 非空右 ...