Easyui DataGrid动态生成列

最新推荐文章于 2024-03-18 21:27:04 发布

原创最新推荐文章于 2024-03-18 21:27:04 发布 · 5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #datagrid #DetailView

Web前端同时被 2 个专栏收录

16 篇文章

订阅专栏

EasyUI

3 篇文章

订阅专栏

一、DataGrid基本定义

1、HTML Page

   <body>
        <table id="myList"></table>
   </body>

2、Js中创建DataGrid

$("#myList").datagrid({
	title: '列表',
	url:'datagrid_data.json',
	width:500,
	remoteSort:false,
	singleSelect:true,
	fitColumns:true,
	columns:[
		[field:'testName',title:'考试名称',width:80],
		[field:'testDate',title:'考试时间',width:80],
		[field:'gradeNo',title:'年级',width:80]
	]
});

二、动态生成列

1、定义datagrid

columns:fetchData()

2、实现fetchData方法

function fetchData(){
	var columns = [];
	var c = {fiele:"",title:"",width:160}
	columns.push(c);
	return [columns];
};

var c = {} 内部即为定义的列属性

3、与后台交互的动态加载

定义全局变量 var options = {};

按照基本定义初始化datagrid，此时可不定义columns

在datagrid定义外执行，fetchData()方法

   function fetchData(nj){  
     var s = "";  
     s = "[[";  
     s = s + "{field:'testName',title:'考试名称',width:250},{field:'testDate',title:'考试时间',width:250},},";  
      
     // 定义可选列
     if(true){  
        s = s + "{field:'gradeNo',title:'年级',width:100}";  
     }

     s = s + "]]";  
     options = {};  
     options.url = '......';  
     options.queryParams = {  
        "":""
     };  
     options.columns = eval(s);  

     // 追加列
     options.columns[0].push(  
        {  
            title:'查看详情',width:60,  
            formatter:function(value,row,index){  
                return'<a href="#" onclick="remove('+index+')">删除</a>';
            }  
        }     
     );  
     $('#myList').datagrid(options);  
     $('#myList').datagrid('reload');      
   }

* js 中的eval()函数，可计算某个字符串，并执行其中的JavaScript代码

http://www.w3school.com.cn/jsref/jsref_eval.asp

* 需要注意列定义的json格式