easyui datagrid 动态生成列

easyui_datagrid根据具体值修改列名title及列属性field 前几天修改一个需求,刚好用到。顺便记录下来。 需求大概是这样(以下是举例子跟需求相近,并不是真的):假设A=1,该列列名为“学生”,对应数据库字段为“student”;若A=2,该列列名为“老师”,对应数据库字段为“teacher”。 要实现这种最简单的方法就是,直接定义两个datagrid的columns,根据A值来替换,但是总觉得太粗暴了,到时候会被审查代码的人嫌弃,哈哈。于是便开始找资料 阅读详情

easyui datagrid 定义列的方式通常是:

$('#grid').datagrid({columns:[[
    {field:'f1',title:'字段1',width:160},
    {field:'f2',title:'字段2',width:160}
]]});	

但在实际项目中,我们会经常需要datagrid能动态生成列。

在网上搜了一篇文章:再次谈谈easyui datagrid 的数据加载

很佩服这个作者,他居然能在easyui那一堆满是数字和字母组合的变量的被混淆的源码中,找到自己想要扩展的功能。。。强!

但是我不喜欢这种方式。毕竟修改源码有很多副作用,还是喜欢原生态。

动态生成列,这个很常见的需求,easyui不太可能不支持。

只是官方文档没有提到而已,可能作者是想靠这些高级功能赚咨询费。。。


说了很多废话,现在贴出我费了不少周折搞定的方法:


var options={};
$(function(){
	var myNj = 9;
	//初始化
	$("#disgrid").datagrid({
		type: 'POST',
		nowrap: false,
		striped: true,
		fit:true,
		width:1024,
		height:500,
		url:'',
		pageSize:30,
		remoteSort: false,
		pagination:true,
		rownumbers:true,
		singleSelect:true,
		queryParams:{
			nj:myNj,
			unitType:1
		}
	});	
	
	fetchData(myNj);
});

function fetchData(nj) {
	var s = "";
	s = "[[";
	s = s + "{field:'unitname',title:'单元',width:160},{field:'practicetime',title:'测试时间',width:160},{field:'userid',title:'userid',width:120,hidden:'true'},{field:'serial',title:'serial',width:120,hidden:'true'},{field:'unitid',title:'unitid',width:100,hidden:'true'},";
	
	//lu todo 列的定义可从服务器获得
	if (nj==9) {
		s = s + "{field:'aipanel_text_exam',title:'短文朗读',width:80},{field:'aipanel_scene_exam',title:'情景对话',width:80},{field:'aipanel_oral_exam',title:'简短说话',width:80}";

        //lu 加一个计算列
		s = s + ",{field:'tatal_score',title:'总分',width:60,formatter:function(value,rec){return paraseIntValue(rec.aipanel_text_exam)+paraseIntValue(rec.aipanel_scene_exam)+paraseIntValue(rec.aipanel_oral_exam);}}";
	}else if (nj==7||nj==8){
	  //....
  }
	s = s + "]]";
	options={};
	options.url = '/app/search.do';
	options.queryParams = {
		nj:nj,
		unitType:1
	};
	options.columns = eval(s);
	//lu 增加一列
	options.columns[0].push(
		{
			field:'desc',title:'查看详情',width:60,
      		formatter:function(value,rec){
      			return "<a href=\"javascript:showDescInfo(\'"+rec.serial+"\',\'"+rec.scene_score+"\',\'"+rec.total_score+"\');\">详情</a>";
      		}
      	}	
	);
	
	$('#disgrid').datagrid(options);
	$('#disgrid').datagrid('reload');	
	
}


是不是觉得很简单?优雅的原生支持。。。


需要注意的是,列定义的JSON格式,很重要,不能错!如果格式不对,就不能正常工作。

EasyUI Jquery 学习笔记 ——DataGrid(数据网格)与 Tree(树)详细版 数据网格(datagrid)以表格格式显示数据,并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格(datagrid)的设计目的是为了减少开发时间,且不要求开发人员具备指定的知识。它是轻量级的,但是功能丰富。它的特性包括单元格合并,多列页眉,冻结列和页脚,等等。 阅读详情

相关推荐

easyui datagrid标题列宽度自适应

NULL 博文链接:https://wusuobuai.iteye.com/blog/1860496

五、easyUI中的datagrid(数据表格)组件

五、easyUI中的datagrid(数据表格)组件

weixin_44230693的博客 7184

基于Cohesive单元的二维水力压裂(二)

部件 2D-deformabel-shell 尺寸100 矩形工具(-20,-20)(20,20) 刨分:预知cohesive单元&定位注液点位置,定义全局网格尺寸0.2 X方向采用过渡网格,向中间加密。指定网格类型:CPE4P,指定单元类型,COH2D4P,粘性正则化系数:0.0001 材料属性 材料1 弹性模量10e9,泊松比0.25,渗透率1e-7,孔隙比0.1,液体比重...

s0302017的博客 1598

easyui—DataGrid(数据表格)

目录 一.DataGrid(数据表格) 一.DataGrid(数据表格) DataGrid以表格形式展示数据,并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间,并且使开发人员不需要具备特定的知识。 使用案例 1.从现有的表格元素创建DataGrid,在HTML中定义列、行和数据 <table class="easyui-datagrid"> <thead> <tr> .

qq_67785529的博客 4865

YOLOv11n-seg 实战指南:从训练到模型部署的完整流程

本文提供了YOLOv11n-seg实例分割模型从环境准备、数据标注到模型训练、验证及最终部署的完整实战指南。详细讲解了如何准备多边形掩码数据、配置关键训练参数、解读分割核心评估指标,并重点介绍了将模型导出为ONNX等格式进行部署的流程与优化技巧,帮助开发者高效完成从开发到生产的全链路实践。

weixin_29062255的博客 554

在树莓派5(8G版)上运行Ollama + LLM

直接上结论,Ollama在树莓派上能安装,且本身运行起来毫无压力,但具体到大语言模型,Deepseek似乎不总是最佳选择。

ki1381的专栏 1650

easyui datagrid+ashx实现动态生成列

easyui datagrid查询时需要动态生成列,网上收集了一些资料,最终实现和大家分享一下: JS脚本: var grid; $(function(){ grid = $('#tt').datagrid({ fit: true,//自动大小 rownumbers:true,//行号 //loadMsg:'数据装载中......', singleS

wangqiuyun的专栏 1万+

手把手教你驱动6脚三位一体数码管:从引脚分析到C语言扫描代码实战

本文详细解析了如何逆向工程并驱动6脚三位一体数码管的全过程,从引脚分析到C语言扫描代码实战。通过系统化的测试和优化,作者总结出一套高效的驱动架构和调试方法,适用于工业设备中的非标准数码管应用。

weixin_42632434的博客 213

Easyui DataGrid动态生成列

利用前台变量或动态交互方式动态生成column

ld_____的博客 5101

数据分析案例-对某宝用户评论做情感分析

目录 原始数据 绘制词云图 情感分析 原始数据 原始数据为某宝一商品的用户评论数据 绘制词云图 # coding=utf-8 import jieba import re import wordcloud import imageio # 打开需要分析词频的文本 with open('淘宝评论3.0.txt', encoding='utf-8') as f: data = f.read() # 文本预处理 :去除一些无用的字符只提取出中文出来 new_data

m0_64336780的博客 1万+

AUTOSAR进阶图解==>AUTOSAR_SWS_BSWGeneral

本文详细解析AUTOSAR基础软件(BSW)模块的通用规范,涵盖其分层架构、配置管理、初始化流程和状态转换机制。AUTOSAR采用清晰的分层设计,包括应用层、服务层、ECU抽象层和微控制器抽象层,各层模块通过标准化接口交互。BSW模块配置采用类型化定义,支持预初始化、初始化和后期构建配置。文档还阐述了模块初始化流程中的依赖管理,以及运行时的状态转换与错误处理机制,为汽车电子控制单元的标准化开发提供规范指导。

一名留德华的,康德的信徒的,专注于汽车电子领域的博客 1127

Easyui datagrid+ashx 实现动态生成列

easyui datagrid查询时需要动态生成列,网上收集了一些资料,最终实现和大家分享一下: JS脚本: var grid; $(function(){ grid = $('#tt').datagrid({ fit: true,//自动大小 rownumbers:true,//行号

摩根船长 1210

详解RT-DETR网络结构/数据集获取/环境搭建/训练/推理/验证/导出/部署

本文给大家带来是利用RT-DETR模训练自己的数据集,RT-DETR是一种新提出的目标检测模型,它利用的自注意力机制来处理图像数据。不同于YOLO通过连续的卷积层直接对图像区域进行分析,RT-DETR采用Transformer架构中的自注意力机制,这允许模型更有效地理解图像中不同部分之间的关系。这种方法使得RT-DETR在处理图像中的复杂场景和多对象环境时,能够展现出更高的准确性和效率。此外,RT-DETR在保持高精度的同时,也针对实时处理进行了优化,使其适合需要快速响应的应用场景。

Snu77的博客 6万+

easyui datagrid动态生成列

easyui datagrid 定义列的方式通常是: [javascript]view plaincopy $('#grid').datagrid({columns:[[ {field:'f1',title:'字段1',width:160}, {field:'f2',title:'字段2',wi...

ajh42238的博客 142

CQE和SQE 以及 PQA和DQA的区别

‌:PQA聚焦产品全生命周期流程管理,DQA专注于设计阶段的质量控制。

a1809032425的博客 1904

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

easyUi动态生成datagrid列

应用目标 在一个公共页面用单选按钮实现查询信息,根据选择不同,返回不同的信息,因此需要生成不同的列 实现代码: function loadDataGrid(){ $('#datagrid').datagrid({ //生成datagrid基本信息 url : '${ctx}/userBpm/workspace-listPerso...

weixin_34357887的博客 380

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

easyui中datagrid动态生成列(动态formatter)

需求: 客户需要按照月份查出当月所有天数的数据 解析需求: 后台需要拿到动态生成的数据(我们是用存储过程生成或者函数),前台进行拼接 前台实现: 取到对应的天数,然后初始化字段,接着加载数据 function dynamicLoad(){ //拿到月份,需要只选取年和月份的插件可以找我 var month = $("#query_month").datebox("getValue"); if(month==""){ $.msg.alert("请选择月份"); return;

qq_40516010的博客 1976

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

easyui之datagrid:动态生成列(动态报表)

我们都知道,使用easyui可以很容易的生成datagrid,代码如下: _queryGrid = $("#datagrid_queryReport").datagrid({ url:urljson, queryParams:parData, fitColumns:true, width:$(window).width() - 5, height:$(window).heig

赶路人儿 6066

EasyUI datagrid动态生成列

任务描述:根据用户选择时间段,生成列数据,如图 一、先定义好datagrid固定的数据列 <script type="text/javascript"> $(document).ready(function () { $("#td_Radio").datagrid({ striped: t...

weixin_30768175的博客 222
上一篇: 用 html 的 base 标签,解决静态资源、请求的相对路径问题
下一篇: jquery Ajax get方法 中文参数乱码的问题
yanjunlu
博客等级 码龄22年 9粉丝 17原创
评论 22
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值