EasyUI实践之路之datagrid（菜单栏、工具栏、格式化、动态换列）

EasyUI datagrid 实践：菜单栏、工具栏与列管理

最新推荐文章于 2021-08-11 10:06:20 发布

原创

最新推荐文章于 2021-08-11 10:06:20 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#datagrid #easyui #frozen #格式化列 #动态加载列

这篇博客介绍了EasyUI中datagrid的使用技巧，包括如何添加table菜单栏，实现frozen列的两种方法，动态加载或更换列的操作，以及如何进行列的格式化。在菜单栏部分，讲解了通过div和easyui-linkbutton创建菜单。对于frozen列，既介绍了HTML静态方式，也阐述了js动态设置frozenColumns的灵活性。动态换列通过初始加载基本列并在onclick事件中更改columns实现。此外，还详细说明了如何利用formatter属性进行列的格式化处理。

一、datagrid：

1、table菜单栏：先在div中添加<a easyui-linkbutton>，再在table 属性中设置toolbar=div的id；

2、frozen列：有2种方式，一是在table的<thead frozen="true">加上，后面跟上是要冻结的列，这种方式比较呆板，直接就写死在html代码中；另一种是js，用frozenColumns:[[]]将要冻结的列写在里面，这样可以灵活调整，如下图：

$('#tt').datagrid({
    title: 'Frozen Columns',

    frozenColumns: [[
        {
 
 field: 'itemid', title: 'Item ID'

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zerovpp

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

EasyUI DataGrid 添加工具

05-14

这个例子显示了如何添加工具栏 DataGrid插件有工具栏属性，这个属性可以定义工具栏。工具栏包括定义了下列属性的按钮： • text: 在按钮上显示的文本 • iconCls: 定义背景图标显示在按钮的左面的CSS类。 • handler: 当用户按下按钮时，处理一些事情的函数

easyui中datagrid内置工具栏

风一样的男子

08-08

2399

$("#dg").datagrid({ url:url, //自动伸缩 fitColumns:true, //工具栏 toolbar: [ { id : "con", text : '<input type="text" id="content" placeholder="请输入...

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

对easyui datagrid进行扩展，当滚动条拉直最下面就异步加载数据。

科技小潘

08-08

3459

以下方法是通用的，只要把datagrid定义为全局的即可，其他部分的代码不用进行修改！可以把以下代码放入到一个单独的js文件，然后再需要的页面引入即可！ $(function(){ try{ $(".datagrid-body").scroll(function(){ var sheight = $(this)[0].scrollHeight;

EasyUI 动态改变数据窗口列 Dynamic Change DataGrid Coiumns

飘渺

06-17

1090

数据表格列可以通过’columns’属性轻松定义。如果要动态改变列也没有问题。要改变列，可以再次调用数据表格方法并传递一个新的columns属性。下面我们定义了一个数据表格组件:$(#tt).datagrid({ title:Change Columns, iconCls:icon-save, width:550, height:250,

easyui Datagrid 加入 add， cut， save工具栏

学习专栏

11-25

5388

var toolbar = [{ text: 'Add', iconCls: 'icon-add', handler: function () { alert('add') } }, { text: 'Cut', iconCls: 'icon-cut', handler: func

jQuery-Easyui 1.1.2：打造高效J2EE树状菜单栏

在J2EE框架中，通常会涉及到服务器端的处理和客户端的展示，而jQuery-Easyui的出现可以很好地解决客户端的用户界面问题，尤其是在实现动态的树状菜单栏时。 ### 详细知识点 #### jQuery-Easyui 1.1.2的特性： 1. ...

掌握easyui jQuery EasyUI：DataGrid功能全解析

复杂工具栏允许在DataGrid上方添加多个按钮和下拉菜单，形成一个功能区域，可以实现更多复杂的功能。 ### 6. DataGrid的固定列固定列功能允许将一列或多列固定在DataGrid的左侧或右侧，即使滚动表格内容，固定列也...

easyUI与shior整合实现JSON格式化数据展示

本文将深入探讨如何将easyUI框架与shiro权限框架相结合，并通过JSON格式化来展示数据，实现一个具有两级菜单栏的用户界面。 ### easyUI简介 easyUI是一个基于jQuery的前端UI框架，它提供了一系列可重用的UI组件，如...

easyUI1.3 中文之官方文档

11-02

6. **菜单（Menu）**：EasyUI 的菜单系统支持多级结构，可以方便地创建树形菜单或横向/纵向排列的菜单栏，通过`onClick`事件处理点击事件。 7. **树形控件（Tree）**：树形控件可用于展示层级关系的数据，支持异步...

easyUi-datagrid 真分页 + 工具栏添加控件

weixin_30549657的博客

06-14

224

1、新建Pager.js /** * * @param {any} el 元素 */ function showDataGrid1(el) { $(el).datagrid({ title: '分页的gridview', url: '/Home/GetPagerUserInfo', //一个用以从远程站...

jquery easy ui edatagrid 动态编辑表格例子

09-19

jquery easy ui edatagrid 动态编辑表格下拉框联动，支持增加，编辑，删除行，日期狂，下拉框联动显示数据，测试ok

EasyUi之DataGrid（数据表格）

Lzxccas的博客

06-25

1110

DataGrid（数据表格）简介DataGrid属性事件方法案例简介 DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 EasyUi学习文档光网链接：EasyUI Datagrid 数据网格成品展示 DataGrid属性事件方法案例目标这里有三种方式这是前两种我们要使用

datagrid表格的右键菜单功能

weixin_42412843的博客

08-11

534

1、页面添加一个div，设置右键菜单显示列表 <div id="rightclickdiv" class="easyui-menu" style="width: 115px;"> <div data-options="iconCls:'icon-edit',name:'001'">编辑</div> <div data-options="iconCls:'icon-remove',name:'002'">删除</div> ..

EasyUI-数据表格复杂工具栏

dxm809的博客

03-28

535

@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scri...

Easyui 动态改变列

热门推荐

JQ棣的博客

12-25

5万+

Easyui 动态改变列，刷新列头，保留屏蔽层

easyUI快速入门第五讲——easyUI中的datagrid（数据表格）组件

李阿昀的博客

10-31

2518

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

easyui-datagrid自适应

777

11-20

734

<thead > <tr > <th width="15%" data-options="field:'itemNo',width:140,align:'center'">商品编号</th> <th width="15%" data-options="field:'itemName',width:140,align:'cente

jqueryEasyUI实现datagrid column自定义显示顺序

现役码农的博客

01-20

1887

项目要求实现一个可以自定义的datagrid column的功能，查看了资料发现目前jqueryeasyui暂时没有这个功能。在了解需求后，自己想了方法首先用户可以选择一些列（定义好的）把这些列按照顺序保存起来界面初始化的时候可以显示这里列。（按照保存的顺序）思路理清楚后，开始设计首先新增一张表格（可以简单一点）CURD功能要有 CREA...

easyui的datagrid动态列

流润的博客

06-12

1176

虽说easyui有点丑，但功能算是不错的。我在工作中遇到了这样一个问题，先说下需求： 1.系统中可以动态维护表，就是对表可以进行增删改的操作 2.上述的这些表都对应有唯一的id存在一张表中，姑且叫做data_table吧 3.每张表的字段都动态可维护的 4.这些表的字段与它们所在的表一样都有一个唯一的id存在一张表中，目前命名为data_table_colmn 5.点开一个页面，这个