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技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
vue中三级导航的菜单权限控制
Mar 31 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
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
eclipse php wamp配置教程
2016/06/30 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
python导入时小括号大作用
2017/01/10 Python
python抓取文件夹的所有文件
2018/02/27 Python
Python最小二乘法矩阵
2019/01/02 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
基于Python实现天天酷跑功能
2021/01/06 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
一岗双责责任书
2014/04/15 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书