开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何冻结datagrid中的头表，使用EasyUI + JQ？

要冻结datagrid中的头表（表头），可以使用EasyUI和jQuery来实现。以下是一种实现方法：

在HTML中引入EasyUI和jQuery的相关资源文件：

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jquery-easyui@1.9.22/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jquery-easyui@1.9.22/themes/icon.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-easyui@1.9.22/jquery.easyui.min.js"></script>

在HTML中创建一个datagrid，并设置相应的属性和列定义：

<table id="datagrid" class="easyui-datagrid" style="width:100%;height:300px;"></table>

在JavaScript中初始化datagrid，并使用fixed:true来冻结表头：

$(function(){
    $('#datagrid').datagrid({
        url: 'data.php', // 数据源URL
        columns: [[
            {field:'id',title:'ID',width:100},
            {field:'name',title:'Name',width:100},
            // 其他列定义...
        ]],
        fitColumns: true, // 自适应列宽
        singleSelect: true, // 单选模式
        rownumbers: true, // 显示行号
        striped: true, // 斑马线效果
        fixed: true, // 冻结表头
    });
});

这样就实现了datagrid中的表头冻结效果。

需要注意的是，上述代码中的data.php应替换为实际的数据源URL，以便从服务器获取数据。

在这个场景下，推荐使用腾讯云的CVM（云服务器）来部署后端服务，使用CDB（云数据库）来存储数据，使用COS（对象存储）来存储静态资源。相关产品和介绍链接如下：

希望以上信息能够对你有所帮助！

相关搜索:为什么不能在带有easyui datagrid的表中添加新行如何在DataGrid中显示表中数组中的数据？如何使用Cailburn.Micro在DataGrid的DataGrid中显示属性如何使用css冻结html表中最右边的列？如何使用ItemsControl、ListView或DataGrid设计具有动态列的表？如何使用jquery触发datagrid中的下拉列表如何冻结PrimeNg数据表中的列- Angular 2？如何使用jq更新数组中的多个对象如何使用JQ限制JSON中的值(clamp)？如何使用jq对json中的值求和如何使用Keras冻结某些图层中的权重？如何使用EditTemplate绑定到Blazorise DataGrid中的TextEdit 如何使用WPF中的列表填充Datagrid中的组合框如何使用jq根据json中的值进行分组？如何使用jq过滤和替换json中的值如何使用cqlengine在Cassandra中定义冻结的列？如何使用头字节计算可视化FoxPro表中的记录数？iOS如何在swift中填充表视图头和表节中的数据？使用apache POI保护/冻结xslx工作表中图像的位置和大小如何使用jq扁平化json中的嵌套键。

相关搜索:

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

有帮助

没帮助

相关·内容

完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能

需求&场景　　例表查询是业务系统中使用最多也是最基础功能，但也是调整最平凡，不同的用户对数据的要求也不一样，所以在系统正式使用后，做为开发恨不得坐在业务边上，根据他们的要求进行调整，需要调整最多就是列的位置和宽度...实现方法　　因为我这边的项目都是用easyui datagrid开发的，datagrid提供了对每一列宽度的手工调整和位置的拖动功能，但是并没有提供保存修改后属性功能，这里我们就需要对datagrid...代码实现　　easyui datagrid 拖动调整列的位置功能官方已经提供扩展支持https://www.jeasyui.com/extension/columns_ext.php 下载地址可以获得...$(target).data('datagrid'); //冻结列不允许修改属性和位置 //const fields = $(target).datagrid('getColumnFields...(jq) { return jq.each(function () { const opts = $(this).datagrid('options');

1.7K3 0

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

EASYUI中的DataGrid组件对数据的显示进行管理 1.2 相关知识点 1.2.1 EasyUI介绍 easyui是一种基于jQuery的用户界面插件集合。...> 注意:文件的导入顺序: jquery文件要位于jquery.easyui.min.js文件的上方帮助文档:参见JQuery EasyUI v1.3.5官方API中文版.exe 如何测试EasyUI...1.2.3 EasyUI运行原理以及组件使用的通用规律 1.2.3.1 EasyUI运行原理: 当浏览器是识别到案例中的案例代码后,easyui要通过识别a链接标签上不同的属性,例如 class的值...组件调用通用规律通过我们研究帮助文档中linkbutton组件的使用方式,得出使用EasyUI组件的通用规律 *_HTML创建组件的通用格式: <标签名 id="btn"...DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

1.3K2 0

jQuery EasyUI 详解

使用 easyui 你不需要写很多代码，你只需要通过编写一些简单 HTML 标记，就可以定义用户界面。 easyui 是个完美支持 HTML5 网页的完整框架。...easyui 的布局 jq easyui 把网页分成了上、下、左、中、右，分别对应：North、South、West、Center、East。...的树组件 easyui 树形菜单（Tree）也可以定义在元素中。...easyui 表格组件表格是easyui里面使用最广的组件。...target：DOM 对象，datagrid 对象。container：行的容器。frozen：表示是否呈现冻结容器。

9.2K1 0

浅析Easyui Datagrid的Rownumber行号显示「建议收藏」

easyui datagrid 如何获取行号 getRowIndex方法$(选择器).datagrid("getRowIndex",row) +1 其中row可以是一行也可以是这一行的id值，获取选择行可以用...getselected或getselections方法，行索引从0开始，所以要加1，具体可以参照easyUI的API。...Datagrid中当你的行数据超过9999时，第一列的行号rownumber将会因为表格内容过长而导致无法显示全部数字，这一点Easyui无法做到自适应所以需要进行修改，这里扩展一个方法就行了。...$.extend($.fn.datagrid.methods, { fixRownumber : function (jq) { return jq.each(function...easyui源码当中即可然后在你的$(“#dg”).datagrid()中添加onLoadSuccess事件 $("#dg").datagrid({ onLoadSuccess

1.3K3 0

在EasyUI的DataGrid中嵌入Combobox

https://blog.csdn.net/huyuyang6688/article/details/46687767 在做项目时，需要在EasyUI的DataGrid中嵌入Combobox.../Content/JqueryEasyUI/themes/icon.css")" rel="stylesheet" /> @*添加Jquery，EasyUI和easyUI的语言包的JS文件*@.../Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js")"> @*实现对EasyUI的DataGird控件操作的JS代码*@..., { editCell: function (jq, param) { return jq.each(function () {...，只需要把将要执行的操作写在onAfterEdit(index, row, changes)函数中即可，index为编辑的行号，默认从0开始；row为被编辑单元格所在的整个行，row.列名可以获得此行此列的数据

3.8K3 0

ASP.NET MVC5+EF6+EasyUI 后台管理系统（81）-数据筛选（万能查询）

前言听标题的名字似乎是一个非常牛X复杂的功能，但是实际上它确实是非常复杂的，我们本节将演示如何实现对数据，进行组合查询（数据筛选）我们都知道Excel中是如何筛选数据的.就像下面一样他是一个并的关系...，我们现在要做的也是这样的效果，下面我们将利用EasyUI的DataGrid为例来扩展（就算是其他组件也是可以的，同样的实现方式！）...实现思路前台通过查询组合json 后台通过反射拆解json 进行组合查询虽然短短3点，够你写个3天天夜了优点：需要从很多数据中得到精准的数据，通常查一些商品他们的属性异常接近的情况下使用缺点：我实现的方式为伪查询...，大量数据请使用存储过程简单了解从Easyui的官方扩展中了解到一个JS文件，但是实质上，这个文件BUG很多，在使用中我曾经一度认为是使用出现问题，其实他根本就不可用所以我这里先献上修改后的整个...下面来说说如何调用前端实现方式 1.引入datagrid-filter.js 2

2.6K8 0

easyui内嵌iframe问题解决

项目中使用easyui的tab页，每个tab页均内嵌iframe，现在要在tab页中控制新增一个同级别的tab页，记录如下：首先是main.html主页面：现在要在‘首页’这个tab页中控制新增一个同级别的...tab页，可使用如下： var jq = top.jQuery; if (jq("#tabs").tabs('exists', "新增的tab页")){ jq("#tabs").tabs('...', "新增的tab页"); var tab = jq('#tabs').tabs("getSelected"); // get selected panel jq('#tabs').tabs('update...然后是在iframe子页面中调用父页面的js方法： function openCustomerLinkMan(){ var selectedRows=$("#dg").datagrid("getSelections

2.5K0 0

ASP.NET MVC5+EF6+EasyUI 后台管理系统（83）-Easyui Datagrid 行内编辑扩展

这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务，上一节讲述了Datagird的批量编辑和提交本节主要演示扩展Datagrid行内编辑的属性,下面来看一个例子,我开启编辑行的时候...当字符串指明编辑类型的时候，对象包含2个属性：type：字符串，该编辑类型可以使用的类型有：text,textarea,checkbox,numberbox,validatebox,datebox,combobox...总结：在加载Easyui.min.js后引入jquery.easyui.plus.js即可没有特别的复杂用法，其实EasyUI是一个可以扩展很多东西的组件，我们之间还对他扩展过万能查询 http:...//www.cnblogs.com/ymnets/p/6129139.html 下面分享我的一个扩展JS，主要来替代Easyui的不足 1.扩展tree，使其支持平滑数据格式 2.扩展combotree...6.datagrid过长显示...截断 /** * panel关闭时回收内存，主要用于layout使用iframe嵌入网页时的内存泄漏问题 */ $.fn.panel.defaults.onBeforeDestroy

1.5K9 0

day51_BOS项目_03

今天内容安排： 1、解决window窗口bug 2、bos项目整体需求分析（基础设置、取派、中转、路由、报表） 3、取派员添加功能 4、jQuery easyUI 数据网格控件 datagrid 的使用方式...2.1、基础档案设置功能概述：在其他的系统中通常称为“数据字典”。`提供基础数据，供其他模块使用`。 ...数据网格控件 datagrid 的使用方式数据网格（datagrid）以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。...数据网格（datagrid）的设计目的是为了减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。它的特性包括单元格合并，多列页眉，冻结列和页脚，等等。...4.3、方式三：通过js代码，使用插件提供的API动态创建datagrid，大量使用方式三：通过js代码，使用插件提供的API动态创建datagrid，大量使用 <table

3.4K1 0

【ssm个人博客项目实战05】easy ui datagrid实现数据的分页显示1、数据格式准备工作2、业务层实现3、控制层实现4、前端视图处理

前面一节我们已经实现博客类别的dao层的实现，其中特别讲解了博客类别的分页的实现，那么现在我们实现了后台的分页，那么前台分页怎么显示呢，这时候我们用到了easyui的datagrid了。...在我们jquery-easyui-1.3.5/demo/datagrid/datagrid_data1.json ?...因为datagrid需要的是json数据所以这里我们需要将对象序列化这里我使用的是阿里巴巴的fastjson 在pom添加相关依赖 <!...方法如何将json返回第一步获取response对象在SpringMVC中我们可以直接在方法形参中添加HttpServletResponse response即可第二步拿到response...请求结果结果与前面datagrid_data1.json格式一致满足我们的要求 4、前端视图处理在webapp目录下面的admin目录下面新建blogTypeManage.jsp 打开easyUI

1.4K2 0

EasyUI 创建 CRUD 应用

数据收集并妥善管理数据是网络应用共同的必要。CRUD 允许我们生成页面列表，并编辑数据库记录。本教程将向你演示如何使用 jQuery EasyUI 框架实现一个 CRUD DataGrid。...我们将使用下面的插件： datagrid：向用户展示列表数据。 dialog：创建或编辑一条单一的用户信息。 form：用于提交表单数据。 messager：显示一些操作信息。...步骤 1：准备数据库我们将使用 MySql 数据库来存储用户信息。创建数据库和 'users' 表。 ?...步骤 2：创建 DataGrid 来显示用户信息创建没有 javascript 代码的 DataGrid。...DataGrid 使用 'url' 属性，并赋值为 'get_users.php'，用来从服务器检索数据。

1.3K7 0

第五节 - easyUI的基本使用1. 列表组件 datagrid2. 按钮组件 linkbutton3.右下角弹窗组件 $.messager

' title="部门管理01" class="easyui-datagrid" fitColumn="true" pagination="true" rownumbers="true" url=...，json格式返回： 1.5 分页查询如果我们想要做分页，就需要给datagrid传递两个参数，分别为total和rows，total代表这个表的查询总数，rows代表分页后查出来的数据。...分页规律：现在，首先考虑如何在php文件中获取第几页和每页多少条？在datagrid组件中，只要你设置了分页，就会给后台传递page和rows，分别对应第几页和每页多少条。...代码： //查询部门表中的数据 $resultset = mysql_query("select * from tm_dept where 1=1 limit $start,$rows...按钮组件 linkbutton 渲染按钮的方法，给一个a标签加上class为easyui-linkbutton 即可。

1.3K7 0

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

3.4 Datagrid 数据表格组件Datagrid 数据表格组件可以将数据以表格的形式展示在网页上，并且提供了丰富的功能，如排序、分页、筛选、编辑等，使用户能够轻松地浏览和操作数据。...4.2.2 示例// 扩展 EasyUI 的方法$.extend($.fn.datagrid.methods, { doSomething: function(jq){ return...jq.each(function(){ // 执行一些自定义操作 }); }});// 使用扩展的方法$('#dg').datagrid('doSomething...简单实践构建一个简单的用户管理页面可以让我们演示如何使用 EasyUI 来创建常见的用户界面，并实现基本的数据展示和操作功能。...总结希望通过本篇博客的学习，读者可以掌握 JQuery EasyUI 的基本用法，并且了解如何利用 EasyUI 开发各种类型的前端应用程序。加油加油！

5191 0

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

3.4 Datagrid 数据表格组件 Datagrid 数据表格组件可以将数据以表格的形式展示在网页上，并且提供了丰富的功能，如排序、分页、筛选、编辑等，使用户能够轻松地浏览和操作数据。...4.2.2 示例 // 扩展 EasyUI 的方法 $.extend($.fn.datagrid.methods, { doSomething: function(jq){ return...jq.each(function(){ // 执行一些自定义操作 }); } }); // 使用扩展的方法 $('#dg').datagrid('doSomething...简单实践构建一个简单的用户管理页面可以让我们演示如何使用 EasyUI 来创建常见的用户界面，并实现基本的数据展示和操作功能。...总结希望通过本篇博客的学习，读者可以掌握 JQuery EasyUI 的基本用法，并且了解如何利用 EasyUI 开发各种类型的前端应用程序。加油加油！(ง •_•)ง

731 0

easyui 分页组件的使用

在这里以我自己的一个例子,frozen是将thead里边的列冻结起来 <thead data-options...{ rownumbers:true, pageSize: 50, pageList: [50,100,200], loadMsg:'加载中...(_pagesize){ //改变每页记录数 cm.showdata();//获取分页的相关数据后执行重新刷新datagrid }, onSelectPage...var params={'pageSize':pageSize,'pageNumber':pageNumber'} $('#records').datagrid('options')....($ret); 数据的索引total和rows名称是固定的，无需修改，会自动传到前台解析这样整个分页组件的使用教程就到这里结束了

9371 0

day60_BOS项目_12

--> 使用正则表达式校验手机号 2、为保存按钮绑定事件 jQuery EasyUI 的 datagrid 数据网格控件的使用方式 1、将静态HTML代码渲染成datagrid样式 2、由datagrid...发送ajax请求获取服务端json数据，构造datagrid 3、使用EasyUI提供的API（js代码）动态构造一个datagrid 使用datagrid实现取派员分页查询取派员批量删除（逻辑删除）...实现区域的分页查询，重构分页代码（将Action中的属性和方法统一提取到BaseAction中）实现分区的添加功能 1、jQuery EasyUI 的combobox下拉框使用（2种方式）...查询、添加）角色管理（添加、查询）用户管理（添加、查询）修改自定义BOSRealm中的授权方法，通过查询数据库获得登录人的权限使用ehcache 缓存权限数据系统的左侧菜单根据当前登录用户的权限动态展示...框架在bos中实现流程定义管理 1.11、项目第十一天流程实例管理（查询流程、查看流程实例运行状态（查询部署id、图片名称、查询坐标））数据同步（将用户和角色数据同步到activiti对应的用户表和组表中去

1.7K2 0

day54_BOS项目_06

今天内容安排： 1、业务受理环节分析 2、创建业务受理环节对应的数据表（业务通知单、工单、工作单） 3、实现业务受理、自动分单 4、数据网格datagrid的编辑功能的使用 5、基于数据网格datagrid...第三步：我们根据建表文件 bos_qp.sql使用 Navicat for MySQL 生成对应的表，生成的表为：qp_noticebill(业务通知单)、qp_workbill(工单)、qp_workordermanage...第四步：我们使用MyEclipse中Hibernate反转引擎插件生成对应的实体类以及对应的xxx.hbm.xml文件　　详细操作步骤链接：https://www.cnblogs.com/chenmingjun...的编辑功能的使用列（Column）属性：数据网格（DataGrid）的列（Column）是一个数组对象，它的每个元素也是一个数组。... }/js/easyui/locale/easyui-lang-zh_CN.js"> 方式三：通过js代码，使用插件提供的API动态创建datagrid

2.3K2 0

【Jqurey EasyUI+Asp.net】—DataGrid增加、删、更改、搜

大家好，又见面了，我是全栈君在前面写了两，但不知道如何完成，对比刚刚开始学这个，他们摸着石头过河，一步步。在最后两天DataGridCRUD融合在一起。因此份额。...它是说数据表，我建立了一个非常easy的表Rex_Test ID 自增序号 tName 姓名 tEmail 邮箱前台代码： Default.aspx <table id="tt" title="设置" class="<em>easyui</em>-<em>datagrid</em>...<em>的</em>增删改查，其他功能还在学习<em>中</em>。...哦，对了，我发现这个Jqurey <em>EasyUI</em> <em>DataGrid</em><em>的</em>一些功能，比方刷新、分页这些在IE11下。不怎么兼容样。假设有知道解决方法<em>的</em>朋友，希望能够留言。给大家分享一下，谢了。

1.4K2 0

Web-第二十三天 Web商城实战三【悟空教程】

4.2 相关知识点 4.2.1 组件DataGrid的使用 4.2.1.1 JQ方式创建DataGrid组件 $('#dg').datagrid({...JQ的方式创建DataGrid ?...1_当用户点击商品查看链接时,向服务端发起请求,请求product_list.jsp页面.服务端返回 product_list.jsp页面,浏览器识别页面中的datagrid组件和分页组件 2_当页面加载完毕之后...,向服务端再次发起请求 5.3.3 实现 1_实现页面中datagrid组件和分页组件的创建 <a href="#" class="<em>easyui</em>-linkbutton...4_浏览器接收到上传成功消息,关闭对话框,重新加载<em>DataGrid</em>组件<em>中</em><em>的</em>内容 5.4.2 代码实现步骤1_实现上传商品对话框 <div id="dd" class="<em>easyui</em>-dialog

9401 0

very-easyUI 框架快速上手文档

插件安装使用该框架非常简单，首先，准备一下easyUI的资源和框架js ? image.png 随便创建一个test.html，引入必要的资源。...列表首先，在body中声明一个grid0，（grid0代表第一个grid）然后在js...中设置grid0的详细： var grid0 = { title : '学生列表' , url : '/queryStudents.do', singleSelect...需要注意的是，field的type属性支持这样几个值：text，textarea，file file是文件上传框，如果需要使用这个配置，你还需要在页面上加这一段： <div class="<em>easyui</em>-dialog...-1.0.0.zip （本文档正在全力更新<em>中</em>... ... ）原文地址：http://www.java520tz.com/?

1.7K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭