开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

easyui表格分组 js

EasyUI 是一个基于 jQuery 的用户界面插件集合，提供了丰富的 UI 控件，其中就包括 DataGrid（数据表格）组件。DataGrid 组件支持表格数据的分组显示，可以通过 groupField 属性来指定分组的字段。

基础概念

分组（Grouping）：在数据表格中，分组是指将具有相同属性值的行归为一组，并为每组提供一个汇总或标题。这有助于用户更好地理解和分析数据。

相关优势

提高可读性：通过分组，用户可以快速识别出数据的模式和趋势。
简化数据分析：分组后可以对每组数据进行聚合计算，如求和、平均值等。
定制化展示：可以根据不同的分组字段和需求自定义分组的显示样式。

类型

简单分组：根据单一字段进行分组。
复合分组：根据多个字段进行嵌套分组。

应用场景

财务报表：按部门或项目分组显示收入和支出。
销售分析：按地区和产品类别分组统计销售额。
库存管理：按仓库和商品类型分组查看库存情况。

示例代码

以下是一个使用 EasyUI DataGrid 实现表格分组的简单示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI DataGrid 分组示例</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="dg" title="销售数据分组" style="width:700px;height:250px"
           data-options="
               url: 'get_sales_data.php',
               method: 'get',
               pagination: true,
               rownumbers: true,
               singleSelect: true,
               groupField: 'region', // 指定分组字段
               groupFormatter: function(value, rows){
                   return '<strong>' + value + '</strong> (' + rows.length + ' 条记录)';
               }
           ">
        <thead>
            <tr>
                <th data-options="field:'itemid',width:80">商品编号</th>
                <th data-options="field:'productid',width:100">产品名称</th>
                <th data-options="field:'listprice',width:80,align:'right'">单价</th>
                <th data-options="field:'unitcost',width:80,align:'right'">成本</th>
                <th data-options="field:'attr1',width:150">地区</th>
                <th data-options="field:'status',width:60,align:'center'">状态</th>
            </tr>
        </thead>
    </table>
</body>
</html>

遇到问题及解决方法

问题：分组后数据没有正确显示或分组功能失效。

可能原因：

groupField 属性指定的字段在数据源中不存在或拼写错误。
数据源返回的数据格式不正确，导致 EasyUI 无法正确解析和分组。
JavaScript 代码中存在其他错误，影响了分组功能的执行。

解决方法：

检查 groupField 属性的值是否正确，并确保该字段在数据源中有对应的值。
使用浏览器的开发者工具查看网络请求，确认数据源返回的数据格式是否符合预期。
查看浏览器的控制台日志，找出并修复 JavaScript 代码中的错误。

通过以上步骤，通常可以解决 EasyUI DataGrid 分组功能的相关问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Easyui datagrid 实现表格记录拖拽

测试环境 jquery-easyui-1.5.3 jquery-easyui-datagrid-dnd 下载地址： http://www.jeasyui.net/demo/193.html 实现编辑...datagrid-dnd.js，注释头尾两行代码，如下 //(function($){ //})(jQuery); 关键代码引入js文件 js/datagrid-dnd.js"> 定义表格，添加事件onBeforeDrag，onDrop 事件：事件参数...--项目配置名称列表--> easyui-datagrid" rownumbers="true" pagination="true" id="API_test_case_step...targetRow, sourceRow, point, 'API_test_case_step'); }"> …… …… js

1.4K2 0

EasyUI数据表格之二

在标签上定义工具栏： easyui-linkbutton" data-options="iconCls:'icon-add,...plain:true"/a> easyui-linkbutton" data-options="iconCls:'icon-cut',plain:true"/ass...> easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"/a> 效果如图所示...：同样也可以通过JS数组形式来实现： $('#tb').datagrid({ toolbar: [{ iconCls..."> Language: easyui-combobox

591 0

jQuery EasyUI数据表格之一

/jquery.min.js"> js/themes/default/easyui.css...="stylesheet" href="js/demo/demo.css"/> js/jquery.easyui.min.js"> ... 基本数据表格这个基本的数据表格 easyui-datagrid" title="基本数据表格" style="width:700px; height:250px;" data-options="singleSelect:true,...easyui-datagrid" title="数据表格样式案例" style="width:700px;height:250px" data-options

581 0

商城项目回顾整理（二）easyUi数据表格使用

后台主页：商品的数据表格展示引入用户表数据表格展示引入日志表数据表格展示引入订单表数据表格展示后台主页代码： 1 js"> 9 <script type="text/javascript" 10 src="jquery-easyui-1.5.1/jquery.easyui.min.js.../jquery-3.2.1.min.js"> 8 <script type="text/javascript" 9 src="jquery-easyui-1.5.1/jquery.easyui.min.js.../jquery-3.2.1.min.js"> 8 <script type="text/javascript" 9 src="jquery-easyui-1.5.1/jquery.easyui.min.js.../jquery-3.2.1.min.js"> 8 <script type="text/javascript" 9 src="jquery-easyui-1.5.1/jquery.easyui.min.js

1.3K5 0

新手学EasyUi+JS----ComboBox 级联

最近在做一个EasyUi ComboBox的级别联动的效果，相关的内容如下： ? ...EasyUI刚接触，JS之前学过，不过在怎么用这方面自己还是个新手，不过现在还在不断的学习，实践出真知，这是硬道理，直接上代码：前台的HTML代码：学院：easyui-combobox" name="DropDownList_Course" style="width: 180px;"/>...@* 课程下拉框 *@ 课程：easyui-combobox...style="width: 180px;" data-options="valueField:'VirtualExamRoomId',textField:'ClassRoomId'" /> 下面是JS

1.9K3 0

js数据如何分组排序？

前言前面通过两章，细致的讲解了数组的方法，而且提供了简单的例子，相信大家都有初步的了解了，而且也相信大家都有所得，今天来实战，数据如何分组呢？要应用数组的那些知识呢？...temps = []; // 临时变量 for(let key in data) { let ekey = key.charAt(0).toUpperCase(); // 根据key值的第一个字母分组...// en: "China", // cn: "中国" // }, { // en: "Canada", // cn: "加拿大" // }] //}] 结语轻送搞定，分组加排序

2.9K1 0

ASP.NET MVC5+EF6+EasyUI 后台管理系统（92）-打印EasyUI 的datagrid表格

前言应用系统有时候需要打印Datagrid的表格内容，我们本节就来学习打印datagrid内容打印主要使用：web打印（我们之前有讲过web打印插件jqprint） + 将datagrid重新编制成可以打印的.../jquery.min.js"> easyui.min.js"> js"> ...二、将datagrid数据分解成HTML Table表格 function CreateFormPage(printDatagrid) { var tableString = 'easyui.min.js"> js">

1.5K2 0

easyui,layui和 vue.js的区别

1.easyui easyui是功能强大但是有很多的组件使用功能是十分强大的，而layui是2016年才出来的前端框架，现在才更新到2.x版本还有很多的功能没有完善，也还存在一些不稳定的情况，但是layui...名称介绍 easyui 界面简约美观，而且容易上手 layui 后台框架，适合后端开发人员使用 vue.js 交互式组件，前后端分离模块化 bootstrap 前端响应式，PC端和移动端

1.8K1 0

Vue.js如何划分组件

常见的一些页面，大家坐在一起敲代码就可以了，做完这个页面再做别的页面，但是作为一个功能复杂的系统，尤其是使用一些适合模块化开发的框架，这样会显得效率很低，那么我们就单纯的看在Vue里面如何划分组件的。

1.6K1 0

基于asp.net + easyui框架，一步步学习easyui-datagrid——界面（一）

HTML 表格显示区--%> easyui-datagrid" style="width: auto; height.../jquery.min.js"> easyui 的js--%> easyui.min.js"> js--%> easyui-lang-zh_CN.js"> js实现上传图片之前判断图片格式，同时实现预览，兼容各种浏览器+下载基于asp.net+ easyui框架，js提交图片，实现先上传图片再提交表单基于asp.net + easyui框架，

1.1K3 0

探索 JQuery EasyUI：构建简单易用的前端页面

功能丰富： EasyUI 提供了丰富的组件库，涵盖了常见的用户界面元素，无论是布局、表格、表单还是对话框，应有尽有，能够满足各种需求。...-- 引入 EasyUI 的 JS 文件 --> easyui.min.js"> EasyUI 的 JS 文件 --> easyui.min.js"> EasyUI 的 JS 文件 --> easyui.min.js"> 表格组件Datagrid 数据表格组件可以将数据以表格的形式展示在网页上，并且提供了丰富的功能，如排序、分页、筛选、编辑等，使用户能够轻松地浏览和操作数据。

5821 0

JS导出JSON到Excel表格

导出 $("#export").click(function () { ...

13.9K1 0

js实现 chunk 函数分组数组

// 自己实现 function chunk(list, size) { let len = list.length; if (size < 1...

1.7K1 0

探索 JQuery EasyUI：构建简单易用的前端页面

功能丰富： EasyUI 提供了丰富的组件库，涵盖了常见的用户界面元素，无论是布局、表格、表单还是对话框，应有尽有，能够满足各种需求。...-- 引入 EasyUI 的 JS 文件 --> easyui.min.js"> EasyUI 的 JS 文件 --> easyui.min.js"> 表格组件 Datagrid 数据表格组件可以将数据以表格的形式展示在网页上，并且提供了丰富的功能，如排序、分页、筛选、编辑等，使用户能够轻松地浏览和操作数据。...-- 引入 EasyUI 的 JS 文件 --> easyui/1.9.5/jquery.easyui.min.js

961 0

easyui 布局_layout布局

pageContext.request.contextPath 3.1 引入必要的js和css样式文件 1）引入JQuery（jquery.min.js） 2）引入EasyUI（jquery.easyui.min.js...） 3）引入EasyUI的中文国际化js，让EasyUI支持中文（locale/easyui-lang-zh_CN.js） 4）引入EasyUI的样式文件（/themes/default/easyui.css...content="0"> 4.组件分类：Base（基础）、Layout（布局）、Menu and Button（菜单和按钮）、Form（表单）、Window（窗口）、 DataGrid and Tree（表格和树...-- 引入js文件 --> js/jquery-easyui-1.5.5.2/jquery.easyui.min.js">easyui的中文国际化js --> js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js

2.2K1 0

UI标签库的话题：JEECG智能开发平台 BaseTag(样式表和JS标签的引入)

大家好，又见面了，我是全栈君 UI标签库专题一：JEECG智能开发平台 BaseTag(样式表和JS引入标签) 1.BaseTag(样式表和JS引入标签) 1.1....演示样例 easyui,tools”> 1.2....JS插件类型插件名描写叙述 Jquery 引入版本号jquery-1.8.3 Easyui 引入版本号jquery.easyui.1.3.1及自己定义扩展JS DatePicker 引入版本号My97DatePicker4.8...或者说主键字段否 null width num 表格宽度否 auto height num 表格高度否 auto checkbox boolean 是否显示复选框否 false fit boolean...是否同意表格自己主动缩放。

4.5K2 0

easyui布局——【入门】

③ locale文件夹:组件中显示的数据语言的js文件 ④ plugins文件夹:是EasyUI提供的组件对应的js文件 ⑤ src文件夹:源码文件夹 ⑥ themes文件夹：EasyUI官方提供的整套的样式...⑧ jquery.easyui.min.js：封装了所有组件的js文件 2.EasyUI的常用组件 ① 基础组件：常用的比较小的功能组件，不是每个网页中都会用到 ② 布局组件: 很重要，每个网页都会使用...在网页中显示表格以及树状数据第二节 EasyUI的组件使用下载程序库并导入EasyUI的CSS和Javascript文件到您的页面。...}/static/js/jquery-easyui-1.5.1/jquery.min.js"> js/jquery-easyui-1.5.1/jquery.easyui.min.js"> easyui-layout布局组件 easyui-layout布局组件

1.5K2 0

Web-第十六天 EasyUI【悟空教程】

easyui/jquery.min.js"> easyui/jquery.easyui.min.js"> 注意:文件的导入顺序: jquery文件要位于jquery.easyui.min.js文件的上方帮助文档:参见JQuery EasyUI v1.3.5官方API中文版.exe 如何测试EasyUI...$("#dd").dialog("refresh","test02.html"); //重新刷新窗口,加载服务端的资源test02.html 1.4 组件DataGrid DataGrid以表格形式展示数据...，并提供了丰富的选择、排序、分组和编辑数据的功能支持。...>保存取消 1.6.3 js

1.3K2 0

javaWeb核心技术第十四篇之easyui

EasyUI环境搭建: 1.导入css , 需要2个css 2.导入jquery,需要2个js js"> js.../jquery.easyui.min.js"> EasyUI的定义方式: easyui规定:我们只需要提供简单html代码结构,就可以生成特殊的效果....textFiedld : "name" //将要显示的文本的key放在此处 }); Datagrid:数据表单 url : 加载远程的数据,支持json 表格中的...img src='"+value+"' style='width:40px'>"; } } ]], fit:true ,//表格自动填充

1.2K2 0

学习笔记 – EasyUI官方网站演示

EasyUI官方网站演示撰写：2016/03/21 更新：2016/04/07 博客地址：http://www.cnblogs.com/gibbonnet/p/5362801.html 演示地址...：http://www.jeasyui.com/tutorial/index.php 目录 EasyUI官方网站演示应用程序示例使用jQuery EasyUI创建CURD应用) 创建可以编辑的表格...创建RSS阅读器布局器表格事件树树演示 TreeGrid 基本使用表格动作复选框上下文菜单可编辑表格复杂的表格参考文档应用程序示例使用jQuery EasyUI创建CURD...应用) datagrid class="easyui-datagrid" dialog class="easyui-dialog" form messager $.messager.show 创建可以编辑的表格...easyui/jquery.edatagrid.js"> 指定列的编辑器

7681 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭