easyUI下datagrid嵌套显示

最新推荐文章于 2022-01-20 16:38:12 发布

原创

最新推荐文章于 2022-01-20 16:38:12 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #datagrid #嵌套显示

本文介绍如何使用easyUI的datagrid实现行内嵌套显示，以展示更多内容，如JSON字符串和从表数据。通过在首次加载时添加特定代码，利用'expandRow'事件创建子网格，并解决可能的detailView找不到问题，参考了相关教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要是运用 easyui的方法进行行内嵌套显示，让一行可以显示更多的东西，让一行显示JSON的字符串、从表之类的东西。

下边先看效果图：

接下来说实现过程：
（1）在首次加载中添加代码

view: detailview,
detailFormatter:function(index,row){
   
   
return '<div style="padding:2px"><table class="ddv"></table></div>';
 },
 onExpandRow: function(index,row){
   
   
var ddv=$(this).datagrid('get

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Mr.F阿

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

jquery easyui datagrid 实现嵌套表格

清叶的专栏

11-23

1万+

subGrid，也就是datagrid中再套一层datagrid，比较适合用于显示一些带有层次的数据，比如要显示一批订单，订单包含具体的货物。这样一个需求，就可以用到subGrid。我们可以先看看官网上subGrid的样子来增强一下视觉上的感觉。如何来实现呢？若只是用来显示一下数据，其实还是简单的。看看demo的代码量也不过区区几十行，跟上思路很容易就可以理解了。 $(funct

【EasyUI DataGrid DetailView】表格嵌套子表格

wilson_m的博客

08-23

7082

一、功能描述在做项目的时候，要求能够对某一行的数据进行折叠显示，用来查看该行的详细信息。拟通过采用easyui的detailview创建表格分组，大致的效果图如下所示：二、使用方法 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;本篇博客承接以前的一篇博客：https://blog.youkuaiyun.com/wilson_m/article/details/813

参与评论您还未登录，请先登录后发表或查看评论

datagrid进阶——subGrid讲解

懒人的博客

10-05

7801

datagrid进阶——subGrid讲解

easyui datagrid 嵌套datagrid

02-03

easyui datagrid 嵌套datagrid form 简单提交，刷新子表数据

让jquery easyui datagrid列支持绑定嵌套对象

weixin_30640769的博客

03-06

161

嵌套对象是指返回的json数据，是对象的某个属性自带有属性。而我们恰恰又需要这个属性，默认情况下easyui的datagrid是不支持绑定嵌套对象的。比如：datagrid的field属性只能为field:'itemid'。这样的样式。而在项目中我们往往在项目中使用了外键对象这样的json数据,比如 //嵌套对象的json数据 var person = {"name":"张三","rol...

EasyUI DataGrid - 嵌套的DataGrid

weixin_30468137的博客

12-20

231

实现效果：一、在页面头部引用视图脚本JS文件 <script src="@Url.Content("~/Resources/EasyUI/plugins/datagrid-detailview.js")" type="text/javascript"></script> 二、创建主DataGrid视图 <div id="table"&gt...

easyui嵌套datagrid

weixin_30632883的博客

01-29

183

用easyui设计datagrid嵌套，需要注意的地方第二个datagrid的数据源：testData[index].arr 好了，上代码，相信大家都会看的明白的<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">&...

easyui下datagrid嵌套显示相关文件

07-27

总结来说，"easyui下datagrid嵌套显示"涉及到前端HTML和JavaScript的交互设计，后端PHP的数据库查询和数据封装，以及数据库连接的管理。这些文件协同工作，实现了在EasyUI的datagrid组件中动态加载并显示嵌套的表格...

easyui datagrid嵌套显示及代码实例教程

从标题“easyui下datagrid嵌套显示相关文件”和描述“用于博客easyui下datagrid嵌套显示的相关easyui代码文件”中，我们可以提炼出以下知识点： 1. EasyUI 框架介绍： - EasyUI 是一个基于 jQuery 的前端UI库，它...

Easyui—datagrid嵌套四层

qq_38567182的博客

01-20

851

关于Easyui 多层datagrid 列表数据应用场景：如查询一个省有多少城市？一个城市有多少县区？一个县区多少乡镇。用列表展示出来，并很直观感受出来效果展示 <div id="divLayout" class="easyui-layout layout easyui-fluid" data-options="fit:true" style="border-top: 1px solid #95b8e7; width:100%;height:100%;"> <div st

easyui datagrid-datagridview.js自己修改版

12-18

easyui的datagridview拓展。具体的使用方法看我的博文，网址https://mp.youkuaiyun.com/postedit/85068385

easyui datagrid 嵌套数据的使用

guxing_1的博客

10-18

540

在我们传数据用hibernate的时候，很容易用到嵌套的对象，而datagrid又不能直接引用，例如以下 columns : [ [ { title : '零件编号', field : 'workpiece.wno', align : 'center', width : 150, } 其中不能的原理以及其中一种解决方案可以借鉴一下大佬的 https:...

easyui datagrid表格嵌套子表

yb305

01-12

8203

1.源码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="jquery,ui,easy,easyui,web"> <meta name="descriptio...

easyui datagrid 三层嵌套

星空月零的博客

11-29

982

代码： function local(role,region,ip){ $("#roleList").datagrid({ // title:'服务器监控列表', height:($(window).height())-35, iconCls : 'icon-ok', width:"100%", pa...

easyui系列-datagrid加载多层嵌套JSON

yuxiaoc的博客

06-02

469

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

ssm框架—知识点记录（1）：利用easyUi的datagrid 如何渲染得到嵌套数据即： json格式二次渲染

对白的学习小屋

06-11

696

这个是，后台得到json格式的数据，类型是双层嵌套的，现在前端的需求是，页面显示本表ideas和user表的数据（多表联查）；sql是left join on 然后，前端需要鼠标上移动，看到user表里的某些字段的详情。 easyui默认的表格渲染只能渲染到第一层的数据，即本表本字段，联表的数据无法显示，所以需要手动再次封装一下数据做法：利用easyui封装的 formatter属性...

Easyui 在dialog中加载datagrid，并实现可拖放行(drag and drop rows)

希望1992的博客

04-19

5350

Easyui 在dialog中加载datagrid，并实现可拖放行的数据表格 1.html部分<div id="dialogProperty"> <table id="datagridProperty"> <thead> <tr> <th data-options="field:'sort',width:94,alig

关于easyui的dialog弹出datagrid问题

zw199611的博客

03-29

4546

因为工作遇到了然后百度了好久很多人，很复杂的做法，代码一串一串的看的我云里雾里，最后想清楚了其实我遇到的还算挺简单的，把我自己的做法分享给大家；首先是效果图:点详情就会单独弹框成这样。一开始我没做出来的时候效果是这样的：，后来想了一下是div的问题，如果把下面的表单放到弹框里面效果会是怎么样的。图里面有两个table id为dg的是显示没有点击时候的数据也就是最开始的图，dg2是弹窗以后需要...