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表格 这篇文章的话,效果是可以实现,但是经过我反复试验,还是存在一些问题的. 今天这篇文章就是向大家介绍下如何避免 ...
随机推荐
- Linux安装和配置MySQL5.7【修改密码、修改字符集等配置】(5.7.18+版本也可参考,我是5.7.22)
本文是转载篇,这里是 原文原文原文. --------------------分割线------------------------------- 这下面内容讲述如何修改密码为简单密码(比如:1234 ...
- logstash multiple piplines 配置方式
当logstash有很多个input类型需要处理时.为了更方便的管理,我们需要使用一个.conf(input->filter->output)配置文件来对应一个pipeline. pipl ...
- mysql应用
1. 简述 MySQL是开源的关系型数据库.官网:https://dev.mysql.com/. 2. 安装及应用 可通过https://dev.mysql.com/downloads/下载MyS ...
- Gtest:源码解析
转自:玩转Google开源C++单元测试框架Google Test系列(gtest)之七 - 深入解析gtest 一.前言 “深入解析”对我来说的确有些难度,所以我尽量将我学习到和观察到的gtest内 ...
- PEP 8016-Python之父重回决策层
PEP 8016-Python之父重回决策层 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 去年,技术社区里还发生了一件大事:Linux 之父 Linus Torvalds 宣 ...
- yum仓库的部署
https://segmentfault.com/a/1190000013968371 私有yum仓库在企业中的应用还是比较广泛,有方便.快捷.灵活等优势.如某公司安全部门不允许大批量的主机连接互联网 ...
- SQL进阶系列之10HAVING子句又回来了
写在前面 HAVING子句的处理对象是集合而不是记录 各队,全队点名 --各队,全体点名! CREATE TABLE Teams (member CHAR(12) NOT NULL PRIMARY K ...
- 《Java设计模式》之代理模式 -Java动态代理(InvocationHandler) -简单实现
如题 代理模式是对象的结构模式.代理模式给某一个对象提供一个代理对象,并由代理对象控制对原对象的引用. 代理模式可细分为如下, 本文不做多余解释 远程代理 虚拟代理 缓冲代理 保护代理 借鉴文章 ht ...
- es6 字符串模板拼接和传统字符串拼接
字符串拼接是在日常开发中必不可少的一个环节. 注意:字符串可以用单引号'',或者""双引号,出于方便大家理解,文章以下内容统一使用单引号''! 如果只是一个字符串和一个变量拼接,使 ...
- ASP.NET Core 类库中取读配置文件 appsettings.json
首先引用NuGet包 Microsoft.Extensions.Configuration Microsoft.Extensions.Configuration.Json Microsoft.Exte ...