使用EasyUI的DataGrid组件结合json实现简单的数据分页显示

最新推荐文章于 2024-04-12 06:42:26 发布
最新推荐文章于 2024-04-12 06:42:26 发布
阅读量2.5k 收藏
点赞数 2
分类专栏： Json EasyUI 文章标签： EasyUI Json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33857502/article/details/80539617
版权

这是六一之前做的一个小案例，因为时间忙，补更上！

还是看看我们项目的框架：


步骤一：我们事先准备了json数据，在herodata2.json中，vs工具中，不能直接创建json格式的文件，我们可以先建一个xml文件，在把它的后缀名更改为.json。

{
"total": 20,
  "rows": [
    {
      "heroNum": "hero001",
      "heroName": "Uzi",
      "addTime": "2010-10-1",
      "Place": "ADC",
      "heroCount": "1010550"
    },
    {
      "heroNum": "hero002",
      "heroName": "Ming",
      "addTime": "2017-12-21",
      "Place": "Support",
      "heroCount": "48872"
    },
    {
      "heroNum": "hero003",
      "heroName": "Mlxg",
      "addTime": "2017-2-1",
      "Place": "Jungle",
      "heroCount": "54883"
    },
    {
      "heroNum": "hero004",
      "heroName": "XiaoHu",
      "addTime": "2016-2-12",
      "Place": "Mid",
      "heroCount": "87874"
    },
    {
      "heroNum": "hero005",
      "heroName": "Karsa",
      "addTime": "2017-1-1",
      "Place": "Jungle",
      "heroCount": "52548"
    },
    {
      "heroNum": "hero006",
      "heroName": "ZiTai",
      "addTime": "2016-10-21",
      "Place": "Top",
      "heroCount": "61558"
    },
    {
      "heroNum": "hero007",
      "heroName": "ClearLove7",
      "addTime": "2018-1-1",
      "Place": "Jungle",
      "heroCount": "78848"
    },
    {
      "heroNum": "hero008",
      "heroName": "Faker",
      "addTime": "2014-1-1",
      "Place": "Mid",
      "heroCount": "914488"
    },
    {
      "heroNum": "hero009",
      "heroName": "LubenWei",
      "addTime": "2018-1-1",
      "Place": "Mid",
      "heroCount": "95154"
    },
    {
      "heroNum": "hero010",
      "heroName": "Weisheng",
      "addTime": "2018-1-1",
      "Place": "Mid",
      "heroCount": "115480"
    },

    {
      "heroNum": "hero011",
      "heroName": "Uzi",
      "addTime": "2010-10-1",
      "Place": "ADC",
      "heroCount": "1010550"
    },
    {
      "heroNum": "hero012",
      "heroName": "Ming",
      "addTime": "2017-12-21",
      "Place": "Support",
      "heroCount": "48872"
    },
    {
      "heroNum": "hero013",
      "heroName": "Mlxg",
      "addTime": "2017-2-1",
      "Place": "Jungle",
      "heroCount": "54883"
    },
    {
      "heroNum": "hero014",
      "heroName": "XiaoHu",
      "addTime": "2016-2-12",
      "Place": "Mid",
      "heroCount": "87874"
    },
    {
      "heroNum": "hero015",
      "heroName": "Karsa",
      "addTime": "2017-1-1",
      "Place": "Jungle",
      "heroCount": "52548"
    },
    {
      "heroNum": "hero016",
      "heroName": "ZiTai",
      "addTime": "2016-10-21",
      "Place": "Top",
      "heroCount": "61558"
    },
    {
      "heroNum": "hero017",
      "heroName": "ClearLove7",
      "addTime": "2018-1-1",
      "Place": "Jungle",
      "heroCount": "78848"
    },
    {
      "heroNum": "hero018",
      "heroName": "Faker",
      "addTime": "2014-1-1",
      "Place": "Mid",
      "heroCount": "914488"
    },
    {
      "heroNum": "hero019",
      "heroName": "LubenWei",
      "addTime": "2018-1-1",
      "Place": "Mid",
      "heroCount": "95154"
    },
    {
      "heroNum": "hero020",
      "heroName": "Weisheng",
      "addTime": "2018-1-1",
      "Place": "Mid",
      "heroCount": "115480"
    }
  ]
}

为保证json文件格式是正确的，可以用jsonview小工具检查。

步骤二：添加html,用于easyui数据的显示，下面的代码可能过于长，有一定基础的看起来应该不怎么吃力，有注释。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="EasyUI/themes/black/easyui.css" rel="stylesheet" />
    <link href="EasyUI/themes/icon.css" rel="stylesheet" />
    <script src="EasyUI/jquery.min.js"></script>
    <script src="EasyUI/jquery.easyui.min.js"></script>
    <script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>
    <script>
        $(function () {
            $("#dg").datagrid({
                fit: true,//自动填充
                striped: true,//斑马线
                rownumbers: true,//行编号
                fitColumns: true,//自动填充列
                method: 'get',//若不设置，会出现405错误
                url: 'herodata2.json',//远程加载数据
                pagination: true,//显示分页栏
                //pageNumber: 1,//初始的页码是1
                pageSize: 10,
                pageList: [5, 10, 20],               
                idField: "heroNum",
                singleSelect: true,//不可多选，若做多选功能，需注释
                toolbar: [
                    {
                        iconCls: 'icon-edit',
                        text: '修改信息',
                        handler: function () {
                            //getSelected获取选中的单个对象，如果选择多个，默认是最前面那个
                            var item = $("#dg").datagrid("getSelected");
                            console.log("item:", item);
                            $("#heroNum").val(item.heroNum);
                            //console.log("heroNum", $("#heroNum").val(item.heroNum))
                            $("#heroName").val(item.heroName);
                            var d = item.addTime;
                            $('#addTime').datebox("setValue", d);
                            $("#Place").val(item.Place);
                            $("#heroCount").val(item.heroCount);

                            $("#heroEdit").dialog({
                                title: '修改信息',
                                collapsible: true,
                                width: 300,
                                height: 250,
                                modal: true,
                                buttons: [
                                    {
                                        iconCls: 'icon-ok',
                                        text: '确定',
                                        handler: function () {
                                            $("#heroEdit").dialog('close');                                           
                                            //数据更新功能待完善。。。
                                            ajaxfrmCheck();//ajax提交数据
                                            $.messager.alert("提示", "修改成功！");
                                           
                                        }
                                    },
                                    {
                                        iconCls: 'icon-cancel',
                                        text: '取消',
                                        handler: function () {
                                            $("#heroEdit").dialog('close');
                                        }
                                    }
                                ]
                            });
                        }
                    }
                ],
                columns: [[
                    { title: '基础操作', colspan: 2 },
                    { title: '基础信息', colspan: 2 },
                    { title: '扩展信息', colspan: 2 }
                ], [
                    { field: 'ck', checkbox: true, width: 80 },
                    { field: 'heroNum', align: 'center', title: '编号', rowspan: 2, width: 80 },
                    { field: 'heroName', align: 'center', title: '选手名称', rowspan: 2, width: 80 },
                    { field: 'addTime', align: 'center', title: '出道时间', rowspan: 2, width: 80 },
                    { field: 'Place', align: 'center', title: '所在位置', rowspan: 2, width: 80 },
                    {
                        field: 'heroCount', align: 'center', title: '粉丝数', rowspan: 2, width: 80
                        , sortable: true
                        , formatter: function (value, row, idx)//格式化显示数据
                        {
                            return value + "人";
                        }
                        , styler: function (value, row, idx)//格式化显示样式
                        {
                            if (value > 60000) {
                                return 'color:red';
                            }
                            else {
                                return 'color:wihte';
                            }
                        }
                    }

                ]]
            });
            //修改日期默认显示格式
            /*$.fn.datebox.defaults.formatter = function (date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                alert(y);
                return m + '/' + d + '/' + y;
            }*/
        });
        /*function DateTimeFormatter(value) {
            if (value == undefined) {
                return "";
            }
            var dateValue = new Date(value);
            console.info(dateValue);
            if (dateValue.getFullYear() < 1900) {
                return "";
            }
            return dateValue.format("yyyy-MM-dd hh:mm:ss");
        }*/
        //ajax检查数据
        function ajaxfrmCheck() {
            $("#frm").form("submit", {
                url: "herodata2.json",
                onSubmit: function () {                    
                    var heroNum = $("#heroNum").val();
                    var heroName = $("#heroName").val();                  
                    var addTime = $("#addTime").datebox('getValue')
                    //console.log('addTime:',addTime);                           
                    var Place = $("#Place").val();
                    var heroCount = $("#heroCount").val();
                    console.info(heroNum, heroName, addTime, Place, heroCount)

                    if (heroName == "" || heroName == "" || Place == "" || heroCount == "") {
                        $.messager.alert("提示", "请输入信息！")
                        return false;//阻止表单提交
                    }
                },
                success: function (data) {
                    //数据更新功能待完善。。。
                    var jsonData = $.parseJSON(data);
                    console.info(jsonData);
                    //$.messager.alert("消息", jsonData);
                    updatedata();
                }
            })
        };

        //更新指定行
        function updatedata() {
            //获取行号
            var row = $("#dg").datagrid('getRowIndex');
            console.log("*************************************");
            console.log("row为：", row);
            console.log("*************************************");
            var opt = $("#dg").datagrid("getRowIndex", row) + 1;
            console.log("行号为：", opt)
            $('#dg').datagrid('updateRow', {
               
                //formatter: function () {
                //    
                    
                //},
                //获取选中的行号
                index: 2,
                //更新指定列
                row: {
                    //name: '新名称',
                    //note: '新消息'
                },
            });


        };
    </script>
</head>
<body>
    <table id="dg"></table>
    <div id="heroEdit">

        <!--编号：<span id="heroNum"></span><br />
        选手名称：<span id="heroName"></span><br />
        出道时间：<span id="addTime"></span><br />
        所在位置：<span id="Place"></span><br />
        粉丝数：<span id="heroCount"></span>-->
        <form id="frm">
            <table width="100%" style="margin:0 auto;text-align:center">
                <tr>
                    <td>编号：</td>
                    <td><input type="text" id="heroNum" name="heroNum" /></td>
                </tr>
                <tr>
                    <td>选手名称：</td>
                    <td><input type="text" id="heroName" name="heroName" /></td>
                </tr>
                <tr>
                    <td>出道时间：</td>
                    <td>
                        <!--<input type="date" id="addTime" name="addTime" />-->
                        <input type="text"  id="addTime" class="easyui-datebox"/>
                    </td>
                </tr>
                <tr>
                    <td>所在位置：</td>
                    <td><input type="text" id="Place" name="Place" /></td>
                </tr>
                <tr>
                    <td>粉丝数：</td>
                    <td><input type="number" id="heroCount" name="heroCount" /></td>
                </tr>
              
            </table>
        </form>
    </div>
</body>
</html>

此处的更新数据功能是个假的，但是也能选中某行数据，对它进行编辑。还是非常不错的。

看看最后的效果：


满天心
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
实现json的分页功能
fxc6666的博客
10-28 2248
// json分页 function pagination(page,number,Json_data){//获取分页数据 page为页number为要获取的数量 Json_data为数据总数 let counts=Json_data.length//获取数据总数 let start=(page-1)*number//获取开始值 let end=(page)*number//获取结束值、 let data=[] if(start>counts){//如果开始值大于总值就会返回空数组 retur
使用EasyUI完成datagrid数据分页
gods_boy的博客
05-11 2万+
      当数据库中的数据量过多时一般都会进行分页操作，下面为大家提供一种EasyUI自带分页的操作，非常简便实用，喜欢EasyUI可以参考一下，希望可以给你带来帮助！    实用EasyUI首先要引用文件，这里不再进行叙述，为了让大家能够明白，现在从数据库一步步讲起。   数据库中的表为Goods表 go create table Goods ( Id int  primary key ...
easyui datagrid sort 表头 排序
frt007的专栏
08-21 2539
easyui datagrid sort 表头 排序 转自：http://blog.csdn.net/changjiadashaoye/article/details/41849497       datagrid的点击列表头刷新，分为两种，一种是页面刷新，不涉及后台服务器数据，不会从新查询数据库，只会刷新当前页数据； 一种是服务器级刷新，会重新加载全部数据。 如果不需要自定义排序
easyui datagrid json分页实例
u010591939的专栏
03-18 2783
原文章地址1   原文章地址2 参考这两篇文章实现了自己的分页 jsp页面     $(function(jsonArray) {         $('#TestDatagrid').datagrid({             title : 'datagrid实例',             iconCls : 'icon-ok',             wid
EasyUI Datagrid 分页的情况下实现点击表头的小三角图标对数据库中所有数据重新排序...
weixin_30359021的博客
08-23 231
说明一下： 当点击 datagrid 表头某一列的小三角图标时，easyui 本身是有排序的，但是在当我们对 datagrid 进行了分页的情况下，点击排序只是对当前页的数据进行排序，而需求需要我对数据库里面的所有数据进行排序，这样的话只能从后台先排好序再返回了。 看了一下文档，发现点击小三角图标时会触发 onSortColumn 事件，于是我们只要在触发这个事件的时候重新向后台请求一遍...
jquery easy ui datagrid 纯后台分页实现
金石软件
10-09 1万+
jquery easyui的datagrid可以容易实现分页，但大多数是实现前台javascirpt分页,如果数据库数据特别大，一次查询的数据交给前台分页，浏览器多半死机。所以需要在后台查询指定的页的数据，送到前台datagrid中，性能才好。 查询指定页的SQL语句并不难，关键问题是：    （1）在SQL中查询了一页的数据，比如10条，在datagrid中只会显示总记录数10条，共
使用easyUI datagrid分页
qq_29094997的博客
12-29 619
使用easyUI datagrid分页 我用了比较简单的sturts2和mybatis结合的小测试demo实现的。 一、使用easyUI datagrid分页注意事项及原理： 1.EasyUI的DataGrid要求返回的JSON数据集是这样的形式： 【“total”:总记录数量, "rows":数据记录数组】 {"total":14,"rows":[{"deptNo":20,"empNa
SSh结合Easyui实现Datagrid的分页显示
09-02
本文将详细讲解如何使用SSh框架与Easyui的Datagrid组件实现分页显示的功能。Easyui是一个轻量级的JavaScript库，提供了丰富的UI组件，包括Datagrid，用于展示表格数据并支持分页、排序等操作。 1. **准备工作**： ...
EasyUi datagrid 实现表格分页
12-12
1.首先引入 easyui的 css 和 js 文件 2.前台 需要写的js 代码如下: //源数据 function Async(action,args,callback){  $.ajax({ 　url: action ,  type:”POST”,  dataType:”json”,  timeout: 10000,  data...
easyui datagrid 分页查询样例
08-24
在本项目中，"easyui datagrid 分页查询样例"是利用EasyUI Datagrid与后端SpringMVC框架集成，实现数据的后台分页查询功能。下面将详细阐述这一知识点。 首先，EasyUI Datagrid的核心在于其强大的数据绑定能力，它...
MySql + JDBC +EasyUI DataGrid实现数据表格的展示和分页
07-22
DataGrid是EasyUI的核心组件之一，它可以显示大量数据并支持分页。通过配置DataGrid的属性，可以设置列宽、排序、过滤等功能。在后端，我们需要提供一个RESTful API，返回JSON格式的数据，这些数据将被DataGrid解析...
EasyUI的DataGrid绑定Json数据源
li123128的博客
01-06 1101
EasyUI给表格绑定数据是最常用的方法，小编分享一下总结出来的两种绑定表格方法，知识在于积累。 第一种：数据存放在数据集中，每一行对应多个值，利用循环把数据绑定到表格 前台代码： [html] view plain copy                 rownumbers:true,                   singleSelect:true,        
EasyUI-DataGrid LoadData加载本地Jsion，并实现分页
梦の源地
06-28 4740
Loaddata加载本地数据的时候，easyui-datagrid默认的分页不能用，只能手写了。记录下，以后复用
easyui系列-datagrid加载多层嵌套JSON
yuxiaoc的博客
06-02 420
easyui 和jsp虽说是老技术，最近学校期末考核项目，正好用上，记录一下。 后端返回一个嵌套json给表格 {"rows":[ {"id":2,"sno":"55","name":"声","password":"233", "clazz":{"id":1,"name":"计算机182","dept":"信工","stu_id":2}, "stuInfo":{"id":2,"age":"11","sex":"男","address":"广东茂名","phone":"67","dormitory
Jquery easyUI datagrid加载复杂JSON数据方法
zxygww的专栏
06-10 3106
1、JSON数据为： {   "rows": [     {       "itemNo": "1",       "itemName": "12",       "spec": "",       "pattern": "",       "itemCategory": {         "id": "A01",         "name": "中药"       },
easyui datagrid json 格式
baidu_16597357的专栏
08-14 839
{                                                          "total":239,                                                          "rows":[                                                         
easyui加载datagrid和treegrid的几种json数据格式
热门推荐
Linda的前端开发路
07-19 2万+
一、easyui加载datagrid的json数据格式       （1）基础的数据格式             {"total":28,"rows":[ {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"E
easyUI之datagrid（数据表格）使用(1)
最新发布
2401_84094620的博客
04-12 965
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处获取。18)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）[外链图片转存中…(img-7nZtWDA9-1712875301419)][外链图片转存中…(img-l7BYbage-1712875301419)]
easyui datagrid前端分页如何实现
05-30
EasyUI Datagrid前端分页可以通过以下步骤实现： 1. 设置分页相关参数 在Datagrid的初始化代码中，设置以下分页相关参数： ``` pagination: true, // 启用分页 pageSize: 10, // 每页显示的记录数 pageList: [10,...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

满天心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值