EasyUI之DataGird动态组合列
2024-10-15 06:24:40
Dojo、ExtJS、Jquery(EasyUI、jQgrid、ligerui、DWZ)、还有asp.net中的服务器控件、当然也少不了HTML 标签之table标签了。其中dojo、ExtJS、Jquery这三者应该算是并列关系吧,都是基于JavaScript的框架、只不过dojo、ExtJS的学习成本比jquery高一些罢了,学习曲线陡一些,中文文档少一些,不过功能之强大还属dojo 、extjs,dojo偏向于地图。使用各式各样的datagrid有几年了,一直都没有做过总结,姑且算是忙于工作吧。最为惭愧的是,每一种dataGrid都没有用的特别精通。在实际使用中遇到问题,除了谷歌,度娘意外就只有查看晦涩难懂的英文文档了。
注:dojo 有人直接念拼音、有人叫豆角(谐音)。
今天在这里简单介绍EasyUI中的DataGrid中的动态组合列,也是在项目中遇到的一个问题,就是同一个报表,不同的用户登录后只能查看自己权限范围内的报表字段。有这么两种思路:
- 隐藏列
鉴于现在的牛人非常多,随便一查看源码就能知晓其大意,便放弃了。
2. 动态组合显示的列 这里用了easyui 的datagrid
先来看一下
<table id="dg"></table>
$('#dg').datagrid({
title: '',
loadMsg: "数据加载中,请稍候……",
height: $(window).height() - 31,
width: $(window).width(),
singleSelect: true,
selectOnCheck: true,
url: 'col.page',
sortName: 'sn',
sortOrder: 'desc',
remoteSort: false,
idField: 'id',
columns: [[
{ field: 'id', title: '主键编码', hidden: true },
{ field: 'name', title: '字段名', width: 100 },
{ field: 'alias', title: '字段别名', width: 100 },
{ field: 'sn', title: '顺序', width: 100, sortable: true },
{ field: 'insdt', title: '创建时间', width: 220 },
{ field: 'opuser', title: '操作用户', hidden: true, width: 100 },
]],
onDblClickRow: function (rowIndex, rowData) {
upd();
}
});
$('#dg').datagrid()中所包含的部分为一个Object
Columns中所包含的部分为一个嵌套数组Object
说到这里应该都明白其中大意了吧,看实现代码
function easyUIDataGrid(medid) {
var $datagrid = {};
var columns = new Array(); $datagrid.title = "";
$datagrid.height = $(window).height() - 31;
$datagrid.width = $(window).width();
$datagrid.sortName = "dt";
$datagrid.sortOrder = "desc";
$datagrid.idField = "id"; var param = { "medid": medid };
$.ajax({
url: 'getCol.page',
type: 'post',
data: "medid=" + medid,
dataType: "json",
async: false,
success: function (returnValue) {
//异步获取要动态生成的列 别名,宽度也可以
var arr = returnValue;
$.each(arr, function (i, item) {
columns.push({ "field": item.colname, "title": item.colalias, "width": 100, "sortable": true });
});
$datagrid.columns = new Array(columns);
$('#dg').datagrid($datagrid);
console.log(JSON.stringify($datagrid));
}
}); }
转载请注明出处 http://guanhp2013.cnblogs.com/
如有疑问,欢迎留言。
最新文章
- [原] KVM 虚拟化原理探究(4)— 内存虚拟化
- 【shadow dom入UI】web components思想如何应用于实际项目
- Eclipse代码注释模板
- VM安装OracleLinux
- (转) C#多线程赛跑实例
- XSS的高级利用部分总结 -蠕虫
- nova.conf部分参数解析
- iOS 开发者账号共用发布证书 (Distribution)问题
- Android数据的四种存储方式
- 预告:准备开个坑,集中学习一下esp32模块
- FastCGI技术
- \n 与 \r
- CI 笔记 数据库
- java工程开发之图形化界面之(第二课)
- Jenkins构建自动化脚本执行无界面解决方法
- JAVA String中文乱码
- 机器学习笔记之二-win10+cuda9.1+CUDNN7+Anaconda3+VS2017+tensorflow1.5+opencv3.4
- Java细节整理——数组与内存控制
- Scala学习(八)练习
- CSS_高级选择符
热门文章
- Windows Cluster 添加新节点--验证报错
- windows 无法启动网络发现
- vue2.0 配置环境总结(都是泪啊)
- 解决flutter的image_cropper组件引入报错问题
- 在macos上基于python2.7安装PyQt5
- Android-PickerView【仿iOS的PickerView控件,并封装了时间选择和选项选择这两种选择器】使用
- UmengAppDemo【友盟统计SDK集成以及多渠道打包配置,基于V7.5.3版本】
- ABP框架连接Mysql数据库
- 补习系列(14)-springboot redis 整合-数据读写
- Springboot 系列(七)Spring Boot web 开发之异常错误处理机制剖析