一、DataGrid基本定义
1、HTML Page
- <body>
- <table id="myList"></table>
- </body>
<body>
<table id="myList"></table>
</body>
- <body>
- <table id="myList"></table>
- </body>
<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]
- ]
- });
$("#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];
- };
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="#" ο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格式