您的位置：首页 > 产品设计 > UI/UE

Easyui DataGrid动态生成列

2015-09-17 17:14 411 查看

一、DataGrid基本定义

1、HTML Page

[html]
view plaincopy print ?

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

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

2、Js中创建DataGrid

[javascript]
view plaincopy 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 plaincopy 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 plaincopy 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="#" onclick="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="#" onclick="remove('+index+')">删除</a>';
}
}
);
$('#myList').datagrid(options);
$('#myList').datagrid('reload');
}

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

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

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

本文转载于：/article/1900253.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航