jQuery easyui datagrid数据绑定

最新推荐文章于 2022-11-25 13:25:25 发布
最新推荐文章于 2022-11-25 13:25:25 发布
阅读量156 收藏
点赞数
文章标签： javascript json ViewUI

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: '&#12288;编号',
                        width: '8%',
                        align: 'center'
                    }, {
                        field: 'lasttimeonline',
                        title: '&#12288;最后登录时间',
                        width: '14%',
                        align: 'center'
                    }
                    ]
                ],
                onLoadSuccess: function(data) {
                }
            });
        }
        $(function () {
            initUser();
            $('#dri_grid').datagrid('load', userUrl);
        });
    </script>
</head>
<body>
    <table id="dri_grid"></table>
</body>
</html>

浏览器显示结果：

 

weixin_34342207
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
10-21
主要介绍了jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
ASP.NET MVC 3程序(一): 如何绑定JQuery插件JQgrid
Arwind的专栏
09-21 3876
今天试用了一些JQuery的插件JQgrid，此插件能非常快捷的帮助我们建立一个CRUD功能的表单，并且具有分页，排序等一些基本功能，非常好用。 这里是JQgrid的下载地址： http://www.trirand.com/blog/ Demo示例： http://www.trirand.com/blog/jqgrid/jqgrid.html 下面看下实施步骤： 首先下载好JQgrid
EasyUI使用DataGrid实现动态列数据绑定
忧郁的蛋的专栏
11-25 1233
EasyUI DataGrid动态列数据绑定实现方式并不是很发杂，请求到远程数据后,通过其中一条列表数据获取到列字段，然后在通过datagrid对数据进行绑定，上代码。后台返回的数据对象是按datagrid要求的格式数据返回的。
jquery-easyui：datagrid数据动态绑定方法【easyui】
产业傻根儿
09-12 629
注意：当前版本jquery-easyui-1.8.6 （1）第1步：重新获得最新数据（js函数中） $('#dg').datagrid({ url:"/project0001/searchKey?searchKeyValue="+searchKeyValue}) （2）第2步：重新载入数据到datagrid（js函数中） $("#dg").datagrid('reload'); （3）第3步：html页面调用 <a href="#" class="ea...
easy ui datagrid 数据绑定
03-24 265
1.前台页面 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&...
jQuery easyUI datagrid绑定数据库
u014671607的博客
04-04 1532
在这里给出简单的数据绑定代码，在前端页面的代码编写中，其实要注意的地方不是很多，利用jQuery easyUI 提供的API 就可以写出来了，主要是后台应用程序的写法，数据的绑定都是可以在这里完成的，所以对于处理一般应用程序的时候我是这样考虑的： 1、创建一个相关的.ashx文件是必须的， 2、成功连接数据库，获取数据里的数据表的内容（注意，这里要获得数据库的相应的表dataT
jQuery Easyui datagrid/treegrid 清空数据
10-21
主要介绍了jQuery Easyui datagrid/treegrid 清空数据的相关资料
jquery easyui datagrid实现增加，修改，删除方法总结
10-22
主要介绍了jquery easyui datagrid实现增加，修改，删除方法,结合实例形式分析了jquery easyui datagrid结合asp.net实现数据的增删改等操作的步骤与相关技巧,需要的朋友可以参考下
jQuery EasyUI datagrid实现本地分页的方法
10-24
主要介绍了jQuery EasyUI datagrid实现本地分页的方法,以实例形式较为详细的分析了本地分页的原理与相关的实现技巧,需要的朋友可以参考下
Jquery EasyUI Datagrid右键菜单实现方法
12-29
最近在学Jquery EasyUI，现在来说一说EasyUI的DataGrid，一般当我们在实现前端界面的时候，经常在DataGrid的上面或者后面加一些按钮，方便用户进行一些添加，删除，编辑等功能 用户在每次使用的时候，都需要去先...
Jquery easyui从零单排之datagrid数据绑定
yangmingxing980的专栏
12-08 4640
自己写的前端，感觉太丑了，所以在网上找到了jquery easyui，样式也蛮漂亮的，闲暇之余就开始慢慢学习。 官网（jquery easyui官网）上也是大致描述了一些东西，但是绝对不够全面，网上其他文章也很多，但是本人理解能力有限，学得甚是吃力，再加上平时空余时间不多，速度更是龟速。 今天刚好有点时间，可以把前几天学习的东西拿来写一写，也随便加深一下记忆。 前几天主要是学习datagri
easyui-datagrid的绑定
英雄主义
03-19 535
html: <div class="easyui-panel" id="id_dd_cancle_authorization_index_BankCardDiv" style="height: 200px; width: 100%;" data-options="region:'center',border:false,title:'银行卡信息',iconCls:'icon-man'"> <table id="id_dd_cancle_authorization
EasyUI的DataGrid绑定Json数据源
PRIMEFJT的博客
01-12 6065
EasyUI给表格绑定数据是最常用的方法，小编分享一下总结出来的两种绑定表格方法，知识在于积累。 第一种：数据存放在数据集中，每一行对应多个值，利用循环把数据绑定到表格 前台代码： [html] view plain copy span style="font-size:18px;">table id="dg" class="easy
EasyUI之datagrid展示数据列表
张翠山的博客
05-04 4万+
写在最前： 如果你用惯了Web Mvc框架的视图跳转方式来开发后台系统，第一次接触到EasyUI的时候，往往会有一个大大的疑问，这EasyUI是如何做跳转的啊？增删改查都不知道如何下手了！但是当你知道有RestFul编程的时候。你会恍然大悟：我靠，RestFul+EasyUI简直就是绝配呀！博主就是如此：在写完一个增删改查之后，才发现EasyUI越学越有意思，页面都是靠局部刷新来动态展示数据，这...
二 TreeGrid的绑定
彭青青的博客
06-03 720
TreeGrid的绑定 (1)看一下效果截图： （图 1） 实现界面的代码： <table id="w清单明细" title="清单明细"class="easyui-treegrid" style="width:1300px;height:200px" data-options=" iconCls: 'icon-ok', rownumbers: true,//显示行
Easyui datagrid加载本地Json数据
热门推荐
03-09 4万+
var jsonstr = '{"total":1,"rows":[{"id":"M000005","name":"检测设备","sortid":3,"valid":"1","handler":"系统管理员"}]}'; var data = $.parseJSON(jsonstr);  $('#goods_Type_Grid').datagrid('loadData', data); //将
JQuery EasyUI DataGrid 、tree查询
最新发布
06-07
您好，有关于JQuery EasyUI DataGrid和tree的查询，可以使用它们提供的API进行查询操作。对于DataGrid，可以使用datagrid的load方法加载数据，同时传入查询条件参数，例如： ```javascript $('#datagrid').datagrid...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值