Easyui DataGrid动态生成列

最新推荐文章于 2022-12-30 17:18:49 发布

liuc__________

最新推荐文章于 2022-12-30 17:18:49 发布

阅读量1.2w

点赞数 1

本文链接：https://blog.csdn.net/liuchuan__________/article/details/48524401

版权

一、DataGrid基本定义

1、HTML Page

[html] view plain copy print ?

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

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

2、Js中创建DataGrid

[javascript] view plain copy print ?

$("#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]
]
});

$("#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方法

[javascript] view plain copy print ?

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

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

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

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

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

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

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

[javascript] view plain copy print ?

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="#" οnclick="remove('+index+')">删除</a>';
}
}
);
$('#myList').datagrid(options);
$('#myList').datagrid('reload');
}

   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="#" οnclick="remove('+index+')">删除</a>';
            }  
        }     
     );  
     $('#myList').datagrid(options);  
     $('#myList').datagrid('reload');      
   }

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

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

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

本文转载于：http://blog.csdn.net/ld_____/article/details/47615405

liuc__________

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Easyui DataGrid动态生成列

一、DataGrid基本定义1、HTML Page[html] view plaincopyprint?body> table id="myList">table> body> 2、Js中创建DataGrid [javascript] view plaincopyprin
复制链接

扫一扫