jQuery EasyUI中DataGird动态生成列的方法


Posted in Javascript onApril 05, 2016

EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍EasyUI中DataGird动态生成列的方法。

DataGird动态生成列,实际上就是控制DataGird的 columns 属性值,下面通过ajax异步调用后台columns的数据,进行绑定。

<table id="dg"></table>
<script>
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);
}
});
}
</script>

以上所述是小编给大家介绍的jQuery EasyUI中DataGird动态生成列的方法,希望对大家有所帮助!

Javascript 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
如何实现vue的tree组件
Dec 03 Vue.js
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 #Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 #Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 #Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 #Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 #Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 #Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 #Javascript
You might like
composer.lock文件的作用
2016/02/03 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
webpack之devtool详解
2018/02/10 Javascript
关于layui 弹出层一闪而过就消失的解决方法
2019/09/09 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python+Opencv识别两张相似图片
2020/03/23 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
迎新晚会邀请函
2014/02/01 职场文书
家长会标语
2014/06/24 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
Python基础之元组与文件知识总结
2021/05/19 Python
Python+Appium实现自动抢微信红包
2021/05/21 Python
python中subplot大小的设置步骤
2021/06/28 Python
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL