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表格 这篇文章的话,效果是可以实现,但是经过我反复试验,还是存在一些问题的. 今天这篇文章就是向大家介绍下如何避免 ...
随机推荐
- Django-视图函数view
目录 1.Django的视图函数view 1.1一个简单的视图 2.CBV和FBV 3.使用Mixin(了解) 4.给视图加装饰器 4.1使用装饰器装饰FBV 4.2使用装饰器装饰CBV 5.requ ...
- vim 配置遇到的问题
1 使用 Vundle 安装插件时提示输入 github 账户密码 .vimrc 中 Plugin ‘路径' 的路径填写错误,仔细检查下 2 在 vim 中执行 shell 命令(如 ls)会闪退 . ...
- C程序中的内存分布
一个典型的C程序存储分区包含以下几类: Text段 已初始化数据段 未初始化数据段 栈 堆 进程运行时的典型内存布局 1. Text段 Text段通常也称为代码段,由可执行指令构成,是程序在目标文件或 ...
- mysql where 1
where后跟各种查询条件,当条件为真时即可查询出记录.在这里where 1,1为真,也就是where后的条件为真,查询表中所有内容. SELECT * FROM `sdb_pam_members` ...
- 【转】GnuPG使用介绍
一.什么是 GPG 要了解什么是 GPG,就要先了解 PGP. 1991 年,程序员 Phil Zimmermann 为了避开政府监视,开发了加密软件 PGP.这个软件非常好用,迅速流传开来,成了许多 ...
- 万众期待的kintone开发账号免费开放申请啦!
亲爱的小伙伴们,等了很久很久的kintone开发账号终于可以免费申请使用了! 有人想问了,什么是kintone? kintone是指无需开发知识,即可根据公司业务轻松创建系统的Cybozu的云服务. ...
- java.sql.SQLException: The server time zone value '�й���ʱ��' is unrecognized or represents more than one time zone.
java.sql.SQLException: The server time zone value '�й���ʱ��' is unrecognized or represents more tha ...
- expect工具实现脚本的自动交互
1 安装expect工具 expect是建立在tcl基础上的一个自动化交互套件, 在一些需要交互输入指令的场景下, 可通过脚本设置自动进行交互通信. 其交互流程是: spawn启动指定进程 -> ...
- danci8
approach 英 [ə'prəʊtʃ] 美 [ə'protʃ] n. 方法:途径:接近 vt. 接近:着手处理 vi. 靠近 emulate 英 ['emjʊleɪt] 美 ['ɛmjulet] ...
- 在windows下安装cx_Oracle问题
将 instantclient_11_2 所在的目录添加到环境变量,但是环境变量有时没有立即生效,可以复制 oci.dll(版本也要正确)到 \Python36\Lib\site-packages 目 ...