在easyUI页面中实现datagrid动态列和form字段的动态添加是一个常见的前端开发需求,尤其是在处理灵活的用户界面设计或需要根据后台数据动态展示表格结构的场景下。在这个示例中,开发者分享了如何通过JavaScript和easyUI组件来实现这一功能。 首先,通过`$(function(){})`的匿名函数,当页面加载完成后,会执行`doDatagridHead()`函数来初始化动态的datagrid表头。这里的`tabHeadObjs`是一个从Java后台获取的数据集合,包含了参数代码和名称等信息,用于生成动态表头。 `doDatagridHead()`函数的核心是遍历`tabHeadObjs`数组,为每一个对象创建一个动态的表头配置对象。这个对象包含字段名、对齐方式、宽度、标题以及自定义的样式和数据格式化方法。例如,`styler`函数用于设置字体大小,而`formatter`函数则根据特定的字段ID(如`**`)动态设置数据显示内容。 为了实现表头的动态插入,代码使用`columns[0].splice()`方法,该方法允许在指定索引位置插入新的表头对象。在这里,索引根据`tabHeadObjs.length`动态计算,确保每个对象都被正确地插入到datagrid的列中。 此外,代码还提及了一个额外的需求,即根据下拉列表的值控制某些表头字段的显示或隐藏。为此,创建了一个名为`vardelIndexs`的数组,用于存储需要删除的列索引。这表明在实际应用中,可能还需要根据用户的交互动态调整列的可见性。 这段代码提供了一个实用的方法,展示了如何使用easyUI的datagrid组件与JavaScript配合,实现动态表头的生成和基于用户行为的列控制。这对于那些在项目开发中需要处理类似问题的开发者来说,是一个有价值的参考案例。通过理解和运用这种方法,可以提高开发效率并实现更加灵活的用户界面设计。
//初始化页面对象时加载动态拼接的表头
doDatagridHead();
});
//加载datagrid表头
var tabHeadObjs = JSON.parse('${tabHeadObjs}');//表头结果集(从java后台查询到的对象集合传到前台)
function doDatagridHead() {
var columns = $('#dg***').datagrid('options').columns;
var datagridHead = [ [ {
field : 'tableCode',
halign : 'left',
align : 'center',
width : 180,
title : ''
} ] ];//第一列默认
for ( var j = 0; j < tabHeadObjs.length; j++) {
//动态表头对象
var obj = {
field : tabHeadObjs[j].paramaterCode,
halign : 'center',
align : 'center',
width : 120,
height : 'auto',
title : tabHeadObjs[j].paramaterName,
styler : function(value, row, index) {
return 'font-size:12px;';
},
//格式化datagrid里的数据
formatter: function(value,row,index){
if(fieldId=='**'){
value =***);
}
return value;
}
};
//columns[0].push(obj);//添加表头集合,直接添加到后面
// 添加到指定位置(.splice 拼接函数(索引位置, 要删除元素的数量, 元素))
//columns[0].splice(5+j, 0, obj);
columns[0].splice(j, 0, obj);
}
//业务需求,根据下来列表的值控制某些字段的显隐,多个的话用数组存需要删除的列索引,循环删除
var delIndexs=[];//需要删除的列索引
var delIndex;
for(j = 0; j < columns[0].length; j++) {
if(iType == "D"){
if(columns[0][j].field =="***"){
delIndex=j;
delIndexs.push(delIndex);
}
if(columns[0][j].field =="***"){
delIndex=j;
delIndexs.push(delIndex);
}
}
if(iType == "L"){
if(columns[0][j].field =="***"){
delIndex=j;
剩余6页未读,继续阅读
- 粉丝: 0
- 资源: 1
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展