自定义动态表格指令edGridDynamic

项目中经常会遇到表头动态的表格,这种情况下,增加了该指令,实现表格表头及表格内容的动态变化。

一 使用方法:

<div ed-grid-dynamic="test" ed-url="user/query.do" ed-model="user"></div>
	

ed-grid-dynamic、ed-url以及ed-model的值的意义与ed-grid完全相同,实际上ed-grid-dynamic只是对ed-grid的进一步封装,继承ed-grid的所有方法及属性。

在使用动态表格时ed-grid-dynamic的值(同默ed-grid认为grid)中增加了一个方法setDynamicTable(url, params),用来动态更新表头,改方法第一个参数可以传递url,也可以传递最终需要的表头json。

注:单表头url返回的json中的data类型为:

[     
	{     
	    col: "userCode",     
	     
	name: "测试字段一",     
	    width: "100"     
	},     
	 {     
	    col: "userName",     
	     
	name: "测试字段一",     
	     
	edit: "input"     
	},     
	 {     
	    col: "gender",     
	     
	name: "测试字段一",     
	     
	option: "gender", // 下拉选项     
	    edit: "select" // 下拉菜单     
	} ] 

多表头时json格式为:

[     
	[     
	    {     
	     
	   "col": "userCode",     
	     
	    "name": "用户编码",     
	     
	    "rowspan": "2",     
	     
	    "width": "200"     
	    },     
	     
	{     
	     
	   "col": "",     
	     
	    "name": "colspan",     
	     
	    "colspan": "2"     
	    }     
	],     
	 [     
	    {     
	     
	   "col": "userName",     
	     
	    "name": "用户名称",     
	     
	    "edit": "input"     
	    },     
	     
	{     
	     
	   "col": "gender",     
	     
	    "name": "性别",     
	     
	    "option": "gender",     
	     
	    "edit": "select"     
	    }     
	] ] 

如果需要在页面打开后就显示动态表格,需要在当前页面的controller的页面加载完毕事件中调用该方法;手动调用该方法没有限制

$scope.$on('$viewContentLoaded', function() {     
	$scope.grid.setDynamicTable('dynamic/datatable.do', null); }); 

版权及转载说明

本站原创、转载文章欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区

本站转载文章版权归原作者所有,如发现本站文章涉嫌侵权请点击「联系我们」反馈,本站将给予删除