easyui datagrid怎么动态获取表头的列名及显示名称
说明:目前使用easyui combobox多选属性,绑定的数据源是来自datagrid的表头的列名及显示名称
处理方法:
//获取冻结的数据源并返回key,value格式数据
var GetFrozeData = function (gridStr, isFroze) {
//获取所有未冻结列数据
var cols = $(gridStr).datagrid('getColumnFields', isFroze);
var array = [];
for (var i in cols) {
//获取每一列的列名对象
var col = $(gridStr).datagrid("getColumnOption", cols[i]);
//声明对象
var obj = new Object();
obj["value"] = cols[i];
obj["text"] = col.title.trim();
//追加对象
array.push(obj);
}
return array;
} //加载combobox数据源
var LoadComboData = function (gridStr, comboStr, isFroze) {
//获取冻结或非冻结列名,转成key,val 格式
var comboData = GetFrozeData(gridStr,isFroze);
//重新绑定combo数据源
$(comboStr).combobox({ data: comboData });
//$(comboStr).combobox('loadData', comboData);
}
最后返回处理结果

页面上调用:
<div>
<div id="setDiv" style="margin-top: 25px;">
<a id="btnText" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" data-bind="click:showOrHideClick">高级设置</a>
</div>
<div class="clear"></div>
<div id="frozeDiv">
<div class="grid_1 lbl">冻结列:</div>
<div class="grid_2 val"><input type="text" id="frozeCols" data-bind="comboboxValue:form.FrozeColoumn" data-options="multiple:true" class="z-txt easyui-combobox " /></div>
<div class="clear"></div>
<a id="a_search" href="#" class="buttonHuge button-blue" style="margin:5px 1%;" data-bind="click:saveSetClick">保存设置</a>
</div>
</div>
调用加载js方法:
//显示或隐藏div事件
var showOrHideClick = function(){
//取到linkbutton按钮的显示值
if($("#btnText").linkbutton("options").text == "高级设置"){
//更换linkbutton图标,显示值
$('#btnText').linkbutton({ iconCls: 'icon-remove' });
$("#btnText").linkbutton({text: '隐藏'});
// $('#frozeDiv').attr("style","display:none;"); //隐藏div
}
else{
//更换linkbutton图标
$('#btnText').linkbutton({ iconCls: 'icon-add' });
$("#btnText").linkbutton({text: '高级设置'});
// $('#frozeDiv').attr("style","display:block;"); //显示div
}
//显示或隐藏div的jq事件
$("#frozeDiv").toggle(500); //加载combobox的数据源
LoadComboData("#gridlist","#frozeCols",false);
};
页面效果如下:

参考网址:
https://www.oschina.net/question/1993919_166055
easyui datagrid怎么动态获取表头的列名及显示名称的更多相关文章
- easyui datagrid 表格动态隐藏部分列的展示
1.一套代码中,可能不同的项目情况都在用,但是可能不同的项目要求展示的datagrid列的内容并不一致,所以能够动态的显示部分datagrid列的内容. 即datagrid的中的某一列,这个项目要求显 ...
- EasyUI DataGrid getChecked/getSelections 获取不到数据
今天使用getChecked获取选择的行,结果总是获取一行数据,于是换用getSelections,结果还是一样,想起之前做的项目,把idField换了下,之后getChecked/getSelect ...
- 扩展jQuery easyui datagrid增加动态改变列编辑的类型
$.extend($.fn.datagrid.methods, { addEditor : function(jq, param) { if (param instanceof Array) { $. ...
- easyui datagrid分页参数获取
$("#btnDataExport").click(function () { $.messager.show({ title: '导出提示', msg: '每次导出一页商户数据, ...
- easyui datagrid中 多表头方法总结
easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...
- EasyUI DataGrid 实现单行/多行编辑功能
要实现 EasyUI DataGrid 的可编辑很简单,在需要编辑的列添加 editor [编辑器]就可以了. 单行编辑 // 初始化数据列表 function initDatagrid() { $( ...
- easyui tree datagrid动态添加表头和表格数据,动态弹出框,修改和删除按钮
1.要有获取表头的URL和表格的URL 背景:点击树的一个节点,就加载一个表格,这个表格是动态的,表头和表格数据都是动态的 解决方案:需要两个URL,一个是获取表头的URL,一个是获取表格数据的URL ...
- 转载 -- jquery easyui datagrid 动态表头 + 嵌套对象属性展示
代码功能: 1.datagrid 的表头由后台生成,可以配置在数据库 2.datagrid 的列绑定数据 支撑嵌套对象 $(function() { var columns = new Array() ...
- 如何用easyui+JAVA 实现动态拼凑datagrid表格(续)
前面一段时间写了一篇文章: 如何用easyui+JAVA 实现动态拼凑datagrid表格 这篇文章的话,效果是可以实现,但是经过我反复试验,还是存在一些问题的. 今天这篇文章就是向大家介绍下如何避免 ...
随机推荐
- dom4j 解析字符串成树形结构
引入maven依赖: <dependency> <groupId>dom4j</groupId> <artifactId>dom4j</artif ...
- PHP微信商户支付企业付款到零钱功能
一 开通条件,就是首先要在微信平台设置好. 以下微信文档里有的,我这里大概掠几项比较重要的. 付款资金 企业付款到零钱资金使用商户号余额资金. 根据商户号的账户开通情况,实际出款账户有做区别: ◆ 默 ...
- docker 安装prometheus
使用到的命令: [root@lgswork ~]# docker search prometheus NAME DESCRIPTION STARS OFFICIAL AUTOMATED prom/pr ...
- Flink使用(三)——记一次Flink Session任务反复重启
前言 环境: JDK 1.8+Flink 1.6+Hadoop 2.7.3 文中若有表述不正确,欢迎大伙留言指出,谢谢! 1.现象 使用yarn-session在yarn上启动flink集群并提交任务 ...
- 如何使用Mojave将APFS卷上的MacOS Catalina Beta安装到双引导
如果你想与macOS Mojave或macOS High Sierra一起运行MacOS Catalina Beta,你可以通过向Mac添加一个新的APFS卷来实现这一点,如果该Macs硬盘被格式化为 ...
- nginx-location语法匹配优先级
- OpenStack核心组件-cinder存储服务
1. cinder 介绍 Block Storage 操作系统获得存储空间的方式一般有两种: 1) 通过某种协议(SAS,SCSI,SAN,iSCSI 等)挂接裸硬盘,然后分区.格式化.创建文 ...
- CentOS7.5环境下搭建禅道
在安装配置禅道之前,可以百度了解一下两款项目管理工具禅道与JIRA的区别. 一.安装 进入禅道官网https://www.zentao.net,选择适用的版本进行安装,我这里下载的是“开源版11.6” ...
- P1525 关押罪犯[扩展域并查集]
题目来源:洛谷 题目描述 S城现有两座监狱,一共关押着N名罪犯,编号分别为1−N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨气值”(一个正整 ...
- Centos7 Rsync怎么实现热备份笔记
应用场景:备份Web服务器相关目录下的数据文件,确保指定目录下的所有文件同步. 操作系统:Centos 7 服务器两台:web服务器 172.19.242.70 备份服务器 172.19.242.7 ...