说明:目前使用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怎么动态获取表头的列名及显示名称的更多相关文章

  1. easyui datagrid 表格动态隐藏部分列的展示

    1.一套代码中,可能不同的项目情况都在用,但是可能不同的项目要求展示的datagrid列的内容并不一致,所以能够动态的显示部分datagrid列的内容. 即datagrid的中的某一列,这个项目要求显 ...

  2. EasyUI DataGrid getChecked/getSelections 获取不到数据

    今天使用getChecked获取选择的行,结果总是获取一行数据,于是换用getSelections,结果还是一样,想起之前做的项目,把idField换了下,之后getChecked/getSelect ...

  3. 扩展jQuery easyui datagrid增加动态改变列编辑的类型

    $.extend($.fn.datagrid.methods, { addEditor : function(jq, param) { if (param instanceof Array) { $. ...

  4. easyui datagrid分页参数获取

    $("#btnDataExport").click(function () { $.messager.show({ title: '导出提示', msg: '每次导出一页商户数据, ...

  5. easyui datagrid中 多表头方法总结

    easyui datagrid中怎么设置表头成多行显示呢?其实很简单,就是给datagrid的columns属性设置成多个数组就行了.下面直接看例子吧,这是一个两行表头的,按照此方法,还可以设置三行表 ...

  6. EasyUI DataGrid 实现单行/多行编辑功能

    要实现 EasyUI DataGrid 的可编辑很简单,在需要编辑的列添加 editor [编辑器]就可以了. 单行编辑 // 初始化数据列表 function initDatagrid() { $( ...

  7. easyui tree datagrid动态添加表头和表格数据,动态弹出框,修改和删除按钮

    1.要有获取表头的URL和表格的URL 背景:点击树的一个节点,就加载一个表格,这个表格是动态的,表头和表格数据都是动态的 解决方案:需要两个URL,一个是获取表头的URL,一个是获取表格数据的URL ...

  8. 转载 -- jquery easyui datagrid 动态表头 + 嵌套对象属性展示

    代码功能: 1.datagrid 的表头由后台生成,可以配置在数据库 2.datagrid 的列绑定数据 支撑嵌套对象 $(function() { var columns = new Array() ...

  9. 如何用easyui+JAVA 实现动态拼凑datagrid表格(续)

    前面一段时间写了一篇文章: 如何用easyui+JAVA 实现动态拼凑datagrid表格 这篇文章的话,效果是可以实现,但是经过我反复试验,还是存在一些问题的. 今天这篇文章就是向大家介绍下如何避免 ...

随机推荐

  1. JVM——垃圾回收资格的判定

    一:判断一个对象是否已死 1:引用数算法:给对象加个引用计数器,被引用时加一,引用失效减一,在任何时刻一直为0的就说明不会被使用,但是由于一种情况的存在,导致这种算法不被JVM所考虑,在两个对象相互引 ...

  2. C++(四十九) — set、multiset 容器的基本操作

     1.set的基础知识 set的特性是:所有元素都会根据元素的键值自动排序,set的元素不像map那样可以同时拥有实值(value)和键值(key),set元素的键值就是实值,实值就是键值.set不允 ...

  3. Error while obtaining UI hierarchy XML file: com.android.ddmlib.SyncException: Remote object doesn't

    在使用真机定位页面元素时启动uiautomatorviewer.bat ,报错Error while obtaining UI hierarchy XML file: com.android.ddml ...

  4. docker学习2-快速搭建centos7-python3.6环境

    前言 当我们在一台电脑上搭建了python3.6的环境,下次换了个电脑,或者换成linux的系统了,又得重新搭建一次,设置环境变量.下载pip等操作. 好不容易安装好,一会Scrips目录找不到pip ...

  5. HTTP get post 请求实例

    package wzh.Http; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStr ...

  6. Linux TTY介绍

    1. TTY介绍 TTY(TeleType)指Linux中的一类终端(Terminal)设备, 是一种字符设备 在Linux中, tty可分为如下几类- 串行端口终端(serial port term ...

  7. php导出表格两种方法 ——PhpExcel的列子

    php常用的导出表格有两种方法,第一种是输出表格,这种方法打开的时候有警告提示,一般导出表格会用phpexcel,这个导出比较灵活,而且还可以设置表格的样式. 第一种导出例子 /** * 执行导出 * ...

  8. janusgraph批量导入数据-IBM( janusgraph-utils)的使用

    janusgraph-utils的简介 可与JanusGraph一起使用的实用工具,包括: JanusGraphSchemaImporter:一个groovy脚本,它将图形模式定义(JanusGrap ...

  9. jQuery - 添加元素append/prepend和after/before的区别

    append <p> <span class="s1">s1</span> </p> <script> $(" ...

  10. REdis之maxmemory解读

    redis.conf中的maxmemory定义REdis可用最大物理内存,有多种书写方式,以下均为合法: maxmemory 1048576 maxmemory 1048576B maxmemory  ...