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 相关文章推荐
JavaScript 替换Html标签实现代码
Oct 14 Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
js 调用百度分享功能
Feb 27 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
基于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
神族 PROTOSS 概述
2020/03/14 星际争霸
PHP调用Webservice实例代码
2011/07/29 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
js的对象与函数详解
2019/01/21 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
Python的高级Git库 Gittle
2014/09/22 Python
python实现关键词提取的示例讲解
2018/04/28 Python
Django REST framework 分页的实现代码
2019/06/19 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
python判断元素是否存在的实例方法
2020/09/24 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
中国梦演讲稿教师篇
2014/04/23 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
公司授权委托书
2014/10/17 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
python爬虫selenium模块详解
2021/03/30 Python