五、easyUI中的datagrid（数据表格）组件

最新推荐文章于 2024-03-27 21:18:26 发布
最新推荐文章于 2024-03-27 21:18:26 发布
阅读量4.9k 收藏 11
点赞数 2
分类专栏： easyUI快速入门 文章标签： easyui javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44230693/article/details/130739310
版权

1.datagrid（数据表格）组件的概述

datagrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。datagrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富，单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

2.datagrid（数据表格）组件的使用

使用JavaScript去创建datagrid组件，通过datagrid组件自带的url属性请求数据。通过url属性加载数据实际上是easyUI底层通过Ajax请求数据，然后显示在页面中，这个过程是在页面加载完成后执行的。新建一个05-datagrid.html页面。

通过url请求传给它的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datagrid</title>
    <!-- 引入easyUI的css文件和js库 -->
    <link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="dg"></table>

    <script type="text/javascript">
        $(function() {
            // 页面加载完成后，创建数据表格datagrid
            $('#dg').datagrid({
                //指定数据表格发送Ajax请求的地址
                url:'./data/datagrid_data1.json',
                //定义标题行所有的列，注意这是一个二维数组
                columns:[[
                    //像field、title等就是列属性
                    {field:'productid',title:'商品编号',width:100},
                    {field:'productname',title:'商品名称',width:100},
                    {field:'unitcost',title:'商品单价',width:100,align:'left'},
                    {field:'status',title:'商品状态',width:100,align:'right'},
                    {field:'attr1',title:'商品属性',width:100,align:'right'},
                ]]
            });
        });
    </script>
</body>
</html>

数据格式必须是一个JSON数组，示例如下：

[
  {
    "productid": "FI-SW-01",
    "productname": "Koi",
    "unitcost": "10.00",
    "status": "P",
    "listprice": "36.50",
    "attr1": "Large",
    "itemid": "EST-1"
  },
  {
    "productid": "K9-DL-01",
    "productname": "Dalmation",
    "unitcost": "12.00",
    "status": "P",
    "listprice": "18.50",
    "attr1": "Spotted Adult Female",
    "itemid": "EST-10"
  },
  {
    "productid": "RP-SN-01",
    "productname": "Rattlesnake",
    "unitcost": "12.00",
    "status": "P",
    "listprice": "38.50",
    "attr1": "Venomless",
    "itemid": "EST-11"
  },
  {
    "productid": "RP-SN-01",
    "productname": "Rattlesnake",
    "unitcost": "12.00",
    "status": "P",
    "listprice": "26.50",
    "attr1": "Rattleless",
    "itemid": "EST-12"
  },
  {
    "productid": "RP-LI-02",
    "productname": "Iguana",
    "unitcost": "12.00",
    "status": "P",
    "listprice": "35.50",
    "attr1": "Green Adult",
    "itemid": "EST-13"
  },
  {
    "productid": "FL-DSH-01",
    "productname": "Manx",
    "unitcost": "12.00",
    "status": "P",
    "listprice": "158.50",
    "attr1": "Tailless",
    "itemid": "EST-14"
  },
  {
    "productid": "FL-DSH-01",
    "productname": "Manx",
    "unitcost": "12.00",
    "status": "P",
    "listprice": "83.50",
    "attr1": "With tail",
    "itemid": "EST-15"
  },
  {
    "productid": "FL-DLH-02",
    "productname": "Persian",
    "unitcost": "12.00",
    "status": "P",
    "listprice": "23.50",
    "attr1": "Adult Female",
    "itemid": "EST-16"
  },
  {
    "productid": "FL-DLH-02",
    "productname": "Persian",
    "unitcost": "12.00",
    "status": "P",
    "listprice": "89.50",
    "attr1": "Adult Male",
    "itemid": "EST-17"
  },
  {
    "productid": "AV-CB-01",
    "productname": "Amazon Parrot",
    "unitcost": "92.00",
    "status": "P",
    "listprice": "63.50",
    "attr1": "Adult Male",
    "itemid": "EST-18"
  }
]

使用到了datagrid组件的两个属性，如下列表所示:

属性名属性值类型描述默认值
columnsarrayDataGrid列配置对象，详见列属性说明中更多的细节undefined
urlstring一个UR!从远程站点请求数据null

也用到了如下列表所示的三个列属性

属性名称属性值类型描述默认值
titlestring列标题文本undefined
fieldstring列字段名称。undefined
alignstring指明如何对齐列数据。可以使用的值有: eft,right，centerundefined

field属性后面跟的是通过Ajax请求响应回来的JSON数组中的每一个JSON对象中的属性名称，例如productid

在这里插入图片描述

运行的结果如下图所示：

在这里插入图片描述

数据表格要间隔变色显示，需要用到datagrid组件的striped属性

属性名属性值类型描述默认值
stripedboolean是否显示斑马线效果false

05-datagrid.html页面的内容就要修改成下面这个样子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datagrid</title>
    <!-- 引入easyUI的css文件和js库 -->
    <link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="dg"></table>

    <script type="text/javascript">
        $(function() {
            // 页面加载完成后，创建数据表格datagrid
            $('#dg').datagrid({
                // 指定数据表格发送Ajax请求的地址
                url:'./data/datagrid_data1.json',
                //定义标题行所有的列，注意这是一个二维数组
                columns:[[
                    // 像field、title等就是列属性
                    {field:'productid',title:'商品编号',width:100},
                    {field:'productname',title:'商品名称',width:100},
                    {field:'unitcost',title:'商品单价',width:100,align:'left'},
                    {field:'status',title:'商品状态',width:100,align:'right'},
                    {field:'attr1',title:'商品属性',width:100,align:'right'},
                ]],
                // 显示斑马线效果，即数据表格中一行显示白色，一行显示浅灰色
                striped:true
            });
        });
    </script>
</body>
</html>

运行的结果如下图所示：

在这里插入图片描述

datagrid组件提供了一个分页工具栏，想使用datagrid组件提供的分页工具栏，必须得在datagrid组件中添加pagination:true，即要用到datagrid组件的pagination属性

属性名属性值类型描述默认值
paginationboolean如果为true，则在DataGrid控件底部显示分页工具栏false
pagePositionstring定义分页工具栏的位置。可用的值有: top,bottom,both’(该属性自1.3版开始可用)bottom

使用datagrid组件提供的分页工具栏，05-datagrid.html页面的内容便要修改成下面这个样子了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datagrid</title>
    <!-- 引入easyUI的css文件和js库 -->
    <link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="dg"></table>

    <script type="text/javascript">
        $(function() {
            // 页面加载完成后，创建数据表格datagrid
            $('#dg').datagrid({
                // 指定数据表格发送Ajax请求的地址
                url:'./data/datagrid_data1.json',
                //定义标题行所有的列，注意这是一个二维数组
                columns:[[
                    // 像field、title等就是列属性
                    {field:'productid',title:'商品编号',width:100},
                    {field:'productname',title:'商品名称',width:100},
                    {field:'unitcost',title:'商品单价',width:100,align:'left'},
                    {field:'status',title:'商品状态',width:100,align:'right'},
                    {field:'attr1',title:'商品属性',width:100,align:'right'},
                ]],
                // 显示斑马线效果，即数据表格中一行显示白色，一行显示浅灰色
                striped:true,
                // 显示分页工具栏
                pagination:true,
                // 分页工具栏显示的位置，默认就是在datagrid控件底部显示分页工具栏
                pagePosition:"bottom"
            });
        });
    </script>
</body>
</html>

运行的结果如下图所示：

在这里插入图片描述


发现分页工具栏默认显示的是英文，但想显示中文，得引入locale目录下的easyui-lang-zh_CN.js文件，于是，05-datagrid.html页面的内容便要修改成下面这个样子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datagrid</title>
    <!-- 引入easyUI的css文件和js库 -->
    <link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="./js/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <table id="dg"></table>

    <script type="text/javascript">
        $(function() {
            // 页面加载完成后，创建数据表格datagrid
            $('#dg').datagrid({
                // 指定数据表格发送Ajax请求的地址
                url:'./data/datagrid_data1.json',
                //定义标题行所有的列，注意这是一个二维数组
                columns:[[
                    // 像field、title等就是列属性
                    {field:'productid',title:'商品编号',width:100},
                    {field:'productname',title:'商品名称',width:100},
                    {field:'unitcost',title:'商品单价',width:100,align:'left'},
                    {field:'status',title:'商品状态',width:100,align:'right'},
                    {field:'attr1',title:'商品属性',width:100,align:'right'},
                ]],
                // 显示斑马线效果，即数据表格中一行显示白色，一行显示浅灰色
                striped:true,
                // 显示分页工具栏
                pagination:true,
                // 分页工具栏显示的位置，默认就是在datagrid控件底部显示分页工具栏
                pagePosition:"bottom"
            });
        });
    </script>
</body>
</html>

运行的结果如下图所示：

在这里插入图片描述

其中，datagrid组件还有一个pageList属性，如下列表所示：

属性名属性值类型描述默认值
pageListarray在设置分页属性的时候 初始化页面大小选择列表[10,20,30.40,50]

在05-datagrid.html页面中应用了该属性，就如下面这样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datagrid</title>
    <!-- 引入easyUI的css文件和js库 -->
    <link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="./js/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <table id="dg"></table>

    <script type="text/javascript">
        $(function() {
            // 页面加载完成后，创建数据表格datagrid
            $('#dg').datagrid({
                // 指定数据表格发送Ajax请求的地址
                url:'./data/datagrid_data1.json',
                //定义标题行所有的列，注意这是一个二维数组
                columns:[[
                    // 像field、title等就是列属性
                    {field:'productid',title:'商品编号',width:100},
                    {field:'productname',title:'商品名称',width:100},
                    {field:'unitcost',title:'商品单价',width:100,align:'left'},
                    {field:'status',title:'商品状态',width:100,align:'right'},
                    {field:'attr1',title:'商品属性',width:100,align:'right'},
                ]],
                // 显示斑马线效果，即数据表格中一行显示白色，一行显示浅灰色
                striped:true,
                // 显示分页工具栏
                pagination:true,
                // 分页工具栏显示的位置，默认就是在datagrid控件底部显示分页工具栏
                pagePosition:"bottom",
                //下拉列表里面写什么（在分页显示时，可以选择每页显示的记录数）
                pageList:[3,5,10]
            });
        });
    </script>
</body>
</html>

运行的结果如下图所示：

在这里插入图片描述

一般来说，每一行记录最后面的那列都代表的是一组操作，例如修改或者删除，以方便对记录执行修改或者删除操作，就像下图所示的那样。

在这里插入图片描述

要想实现这样的效果，必须用到一个列属性，即formatter属性

在这里插入图片描述

如此一来，05-datagrid.html页面便要修改成下面这个样子了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datagrid</title>
    <!-- 引入easyUI的css文件和js库 -->
    <link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="./js/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <table id="dg"></table>

    <script type="text/javascript">
        $(function() {
            // 页面加载完成后，创建数据表格datagrid
            $('#dg').datagrid({
                // 指定数据表格发送Ajax请求的地址
                url:'./data/datagrid_data1.json',
                //定义标题行所有的列，注意这是一个二维数组
                columns:[[
                    // 像field、title等就是列属性
                    {field:'productid',title:'商品编号',width:100},
                    {field:'productname',title:'商品名称',width:100},
                    {field:'unitcost',title:'商品单价',width:100,align:'left'},
                    {field:'status',title:'商品状态',width:100,align:'right'},
                    {field:'attr1',title:'商品属性',width:100,align:'right'},
                    {field:'xxxx',title:'操作',width:100,align:'left', formatter:function(value,row,index) {
                            // row为行记录，index是每一行的行号从0开始
                            console.log(value, row, index);
                            return "<a href='#'>修改</a> | <a href='#'>删除</a>";
                        }
                    }
                ]],
                // 显示斑马线效果，即数据表格中一行显示白色，一行显示浅灰色
                striped:true,
                // 显示分页工具栏
                pagination:true,
                // 分页工具栏显示的位置，默认就是在datagrid控件底部显示分页工具栏
                pagePosition:"bottom",
                //下拉列表里面写什么（在分页显示时，可以选择每页显示的记录数）
                pageList:[3,5,10]
            });
        });
    </script>
</body>
</html>

输出结果如下所示：

在这里插入图片描述

前台向后台发送的请求是一个Ajax请求，这时并没有刷新页面，也就是说当前所在页面只需要通过在原来的基础上+1或者-1即可，总页数又可以通过计算得知。所以，具体的响应数据的格式应该像下面这样

{
  "total": 28,
  "rows": [{
    "productid": "FI-SW-01",
    "productname": "Koi",
    "unitcost": "10.00",
    "status": "P",
    "listprice": "36.50",
    "attr1": "Large",
    "itemid": "EST-1"
  },
    {
      "productid": "K9-DL-01",
      "productname": "Dalmation",
      "unitcost": "12.00",
      "status": "P",
      "listprice": "18.50",
      "attr1": "Spotted Adult Female",
      "itemid": "EST-10"
    },
    {
      "productid": "RP-SN-01",
      "productname": "Rattlesnake",
      "unitcost": "12.00",
      "status": "P",
      "listprice": "38.50",
      "attr1": "Venomless",
      "itemid": "EST-11"
    },
    {
      "productid": "RP-SN-01",
      "productname": "Rattlesnake",
      "unitcost": "12.00",
      "status": "P",
      "listprice": "26.50",
      "attr1": "Rattleless",
      "itemid": "EST-12"
    },
    {
      "productid": "RP-LI-02",
      "productname": "Iguana",
      "unitcost": "12.00",
      "status": "P",
      "listprice": "35.50",
      "attr1": "Green Adult",
      "itemid": "EST-13"
    },
    {
      "productid": "FL-DSH-01",
      "productname": "Manx",
      "unitcost": "12.00",
      "status": "P",
      "listprice": "158.50",
      "attr1": "Tailless",
      "itemid": "EST-14"
    },
    {
      "productid": "FL-DSH-01",
      "productname": "Manx",
      "unitcost": "12.00",
      "status": "P",
      "listprice": "83.50",
      "attr1": "With tail",
      "itemid": "EST-15"
    },
    {
      "productid": "FL-DLH-02",
      "productname": "Persian",
      "unitcost": "12.00",
      "status": "P",
      "listprice": "23.50",
      "attr1": "Adult Female",
      "itemid": "EST-16"
    },
    {
      "productid": "FL-DLH-02",
      "productname": "Persian",
      "unitcost": "12.00",
      "status": "P",
      "listprice": "89.50",
      "attr1": "Adult Male",
      "itemid": "EST-17"
    },
    {
      "productid": "AV-CB-01",
      "productname": "Amazon Parrot",
      "unitcost": "92.00",
      "status": "P",
      "listprice": "63.50",
      "attr1": "Adult Male",
      "itemid": "EST-18"
    }
  ]
}
怀梦
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EasyUI——DataGrid数据显示
weixin_65975275的博客
05-11 1839
DataGrid数据显示
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
09-01
下面小编就为大家带来一篇easyui datagrid 大数据加载效率慢,优化解决方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
easyui—DataGrid（数据表格）
qq_67785529的博客
05-07 4510
目录 一.DataGrid（数据表格） 一.DataGrid（数据表格） DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。 使用案例 1.从现有的表格元素创建DataGrid，在HTML中定义列、行和数据 <table class="easyui-datagrid"> <thead> <tr> .
easyUI之datagrid（数据表格）使用，大厂面经合集
最新发布
m0_60452070的博客
03-27 655
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】讲解视频，并且后续会持续更新**如果你觉得这些内容对你有帮助，可以添加V：vip1024c 备注前端获取（资料价值较高，非无偿）[外链图片转存中…(img-cXc5Ychs-1711545494996)]前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档。
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
10-22
jQuery EasyUI是一个旨在辅助HTML5打造更好的Web界面的框架,而其中的Datagrid组件也是非常强大,这里我们就来看一下jQuery EasyUI框架中的Datagrid数据表格组件结构详解
EasyUI框架02——datagrid
武汉小喽啰
02-02 803
datagrid是easyUI使用比较常用的一个组件，列表等基本功能的使用，可以参考easyUI的API。 1.Editor的用法 editor编辑器是easyUI中比较重要的一个东东，在其他组件中都有其身影。 1.1 常用API 1.1.1获取 1）获取编辑器 获取索引值为index，字段field的编辑器 var editor = $(this).datag...
easy ui datagrid 增删改查+分页 asp.net
04-27
数据库管理系统，不管是桌面版，还是网页版，我觉得最重要的功能是：增删改查+分页。文档里面的例子就是asp.net web form + easy ui 的datagrid。简单的演示了这五个重要功能。请用vs2010运行，数据库没有给出。
EasyUI之DataGrid（数据表格）
licmi的博客
06-27 2159
文章目录DataGrid介绍使用案例代码实现Ribbon 界面总结 DataGrid介绍 DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 使用案例 实现创建DataGrid，有两种方式 第一种：在HTML中定义列 <table class="easyui-datagrid"> <
easyUI之datagrid
墨笙弘一
04-21 3446
这篇博文打算总结一下，我在项目中使用前端框架easyUI所遇到的一些用法。 先按照下面的图片说三个小的easyUI datagrid中的用法： 1.在easyUI datagrid中每条记录前面显示复选框，并且可以实现单选和全选功能 代码实现如下：{field:'checked',title:'<input type="checkbox" id="selectAll">',width:'2
easyui中datagrid的使用
qq_41617901的博客
06-22 3038
1.自定义id $('#table').datagrid({ ... idField :'myId', ... }); 2.返回的josn格式要如下： {"total":20,"rows":[ {"check":"no","myId":"1","name":"admin01","pass":"123456","time":"2017-10-10","part":"研发部","title":"普通管理员","sex":"男","opr":"1"}, {"check":"no","m
easyUI之datagrid（数据表格）使用
小宝的宝呢的博客
09-14 2912
点击人员信息回顾，右侧Tab页显示书籍相关信息 1.要有一个存放书籍信息的展示页面 在WebContent目录下创建Folder文件夹jsp，在jsp目录下创建useManage.jsp界面 2.点击右侧菜单，显示对应页面 content : '<iframe width="100%" height="100%" src="' + nod...
EasyUI的DataGrid每行数据添加操作按钮的实现代码
08-29
今天做项目的时候，想在easyui的datagrid每一列数据后边都加上一个操作按钮，怎么实现此功能呢？下面小编给大家带来了EasyUI的DataGrid每行数据添加操作按钮的实现代码，需要的朋友参考下吧
easyui-datagrid特殊字符不能显示的处理方法
11-28
在easyui中datagrid、combobox、tree等组件都不能显示含有html标签的特殊字符，因为这些字符会被当作html标签被解析掉。这里给出了一个处理方案，希望对大家有帮助。 以datagrid为例： 找到jquery.datagrid.js文件，...
easyui datagrid加载数据的三种方式
热门推荐
影子
12-27 1万+
1、加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id:"2",name:"二"}]}; $('#dg').datagrid('loadData',obj); 注意：这里的数据必须是json对象，要是json字符串，必须先转换成json对象才能作为datagrid的数据源。否则会出现异常：Cannot read p
EasyUI（DataGrid组件）
m0_46690290的博客
06-26 295
DataGrid组件DataGrid组件简介目标demo DataGrid组件简介 目标 1、通过打开一个选项卡，展示一张表的数据，明确datagrid组件的用法 demo
java_easyui体系之DataGrid（2）
Oscar Chen
01-04 2761
摘要： 进一步实现使用datagrid实现数据的查询功能、实现将form序列化成一个对象、使用load方法结合查询条件动态展示datagrid中的数据。
easyui(datagrid数据查询)
weixin_66202611的博客
05-07 884
简介： DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 《案例演示》 从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。 <table class="easyui-datagrid"> <thead> <tr&.
easyui中datagrid自适应浏览器大小
幻凡ss
01-23 2659
因为datagrid的fitColumns只有在初次加载数据的时候生效，所以在加载完数据后再改变浏览器大小，datagrid是不会改变大小的，只能保持在加载数据的时候的浏览器大小解决方法就是动态设置fitColumns：true这个有个弊端就是 只要改变浏览器大小就要重新加载，即走一遍后台，比较消耗性能，所以在创建datagrid的时候尽量不要动态，写死，只动态生成数据就好,当然也不用担心，一般也...
datagrid初用
m0_53151031的博客
09-13 916
前言：EasyUI有七个重要的控件：layout、tree、tabs、datagrid、form、messeger、combobox。之前讲了三个控件，今天要分享的是datagrid控件。 一、明确目标： 实现效果：当点击左边菜单栏时，要用datagrid（数据表格）控件将数据展现在右边界面上， 已经要用到查询。 二、具体思路以及代码实现： 一、利用dategrid进行数据展示以及结果集的封装： 1、思路： 1、将左边菜单添加点击事件，点击后要弹出对应的界...
easyui vue 数据表格下拉框
04-03
easyui vue 数据表格下拉框的实现步骤如下： 1. 引入 easyui 和 vue 相关的 js 和 css 文件。 2. 创建一个 vue 实例，并定义一个数组用于存放下拉框的选项数据。 3. 在 HTML 中使用 easyui 的 datagrid 组件，并设置 columns 属性，其中需要使用 formatter 属性将某一列的数据转换为下拉框。 4. 在 formatter 中使用 easyui 的 combobox 组件，并将选项数据绑定到该组件中。 5. 在 vue 实例中定义一个方法，用于获取下拉框的选项数据，并将其赋值给选项数据数组。 6. 在 created 钩子函数中调用该方法，以获取初始的选项数据。 代码示例： HTML： ``` <div id="app"> <table id="datagrid" class="easyui-datagrid" :data="data"> <thead> <tr> <th field="name" width="50%">Name</th> <th field="gender" width="50%" formatter="genderFormatter">Gender</th> </tr> </thead> </table> </div> ``` JavaScript： ``` var app = new Vue({ el: '#app', data: { data: [] }, methods: { getGenderOptions: function() { // 获取下拉框选项数据 return [ { value: 'M', text: 'Male' }, { value: 'F', text: 'Female' } ]; }, genderFormatter: function(value, row) { // 将数据转换为下拉框 var options = this.getGenderOptions(); var selectedValue = row.gender; var html = '<select class="easyui-combobox" style="width:100%;" data-options="'; html += 'valueField: \'value\','; html += 'textField: \'text\','; html += 'data: ' + JSON.stringify(options) + '"'; html += '>'; for (var i = 0; i < options.length; i++) { var option = options[i]; var selected = option.value === selectedValue ? 'selected' : ''; html += '<option value="' + option.value + '" ' + selected + '>' + option.text + '</option>'; } html += '</select>'; return html; } }, created: function() { // 初始化数据 this.data = [ { name: 'John Doe', gender: 'M' }, { name: 'Jane Doe', gender: 'F' } ]; // 获取下拉框选项数据 var options = this.getGenderOptions(); // 在 easyui 加载完成后将选项数据绑定到下拉框中 $('#datagrid').datagrid({ onLoadSuccess: function(data) { $.each(data.rows, function(index, row) { var $combobox = $(this).datagrid('getPanel').find('td[field="gender"] div select'); $combobox.combobox('loadData', options); $combobox.combobox('setValue', row.gender); }); } }); } }); ``` 需要注意的是，在 easyui 加载完成后，需要将选项数据绑定到下拉框中，这里使用了 jquery 的 each 方法遍历每一行数据，并通过 easyui 的 combobox 组件将选项数据绑定到对应的下拉框中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值