前台页面:
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>简单表格案例</title>
<!-- 表格样式 -->
<style type="text/css">
@import "js/dojo-release-1.1.0/dojox/grid/_grid/Grid.css";
</style>
<!-- 导入dojo库 -->
<script type="text/javascript" src="js/dojo-release-1.1.0/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<!-- 导入组件包 -->
<script type="text/javascript">
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
dojo.require("dojo.parser");
</script>
<script type="text/javascript">
//表格数据
data = [
[ '张三',25,'男','58429046',['北京','上海']],
[ '李四',26,'男','58429046','上海'],
[ '王五',27,'男','58429046','上海'],
[ '赵六',28,'男','58429046','上海']
];
//表格模型
model = new dojox.grid.data.Table(null, data);
//表格表头
var columns = {cells: [[
{name: '姓名',width:"15%"},
{name: '年龄',width:"15%"},
{name: '性别',width:"15%"},
{name: '电话',width:"40%"},
{name: '地址',width:"15%"}
]]
};
//表头层
var layout = [ columns ];
</script>
</head>
<body class="tundraGrid">
<div id="grid" dojoType="dojox.Grid" model="model" structure="layout"></div>
</body>
</html>
dojo 1.1.0 学习总结
六. 表格案例
1.导入样式,库,组件
<!-- 表格样式 -->
<style type="text/css">
@import "js/dojo-release-1.1.0/dojox/grid/_grid/Grid.css";
</style>
<!-- 导入dojo库 -->
<script type="text/javascript" src="js/dojo-release-1.1.0/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<!-- 导入组件包 -->
<script type="text/javascript">
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
dojo.require("dojo.parser");
</script>
2.编写表格脚本
<script type="text/javascript">
//表格数据
data = [
[ '张三',25,'男','58429046',['北京','上海']],
[ '李四',26,'男','58429046','上海'],
[ '王五',27,'男','58429046','上海'],
[ '赵六',28,'男','58429046','上海']
];
//表格模型
model = new dojox.grid.data.Table(null, data);
//表格表头
var columns = {cells: [[
{name: '姓名',width:"15%"},
{name: '年龄',width:"15%"},
{name: '性别',width:"15%"},
{name: '电话',width:"40%"},
{name: '地址',width:"15%"}
]]
};
//表头层
var layout = [ columns ];
</script>
注:此部分每一步都是必须的
3.显示表格的层
<div id="grid" dojoType="dojox.Grid" model="model" structure="layout"></div>
注:
1. structure="layout" 表示表格的结构,即列头
2. model="model" 表示表格的数据模型
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>简单表格案例</title>
<!-- 表格样式 -->
<style type="text/css">
@import "js/dojo-release-1.1.0/dojox/grid/_grid/Grid.css";
</style>
<!-- 导入dojo库 -->
<script type="text/javascript" src="js/dojo-release-1.1.0/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<!-- 导入组件包 -->
<script type="text/javascript">
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
dojo.require("dojo.parser");
</script>
<script type="text/javascript">
//表格数据
data = [
[ '张三',25,'男','58429046',['北京','上海']],
[ '李四',26,'男','58429046','上海'],
[ '王五',27,'男','58429046','上海'],
[ '赵六',28,'男','58429046','上海']
];
//表格模型
model = new dojox.grid.data.Table(null, data);
//表格表头
var columns = {cells: [[
{name: '姓名',width:"15%"},
{name: '年龄',width:"15%"},
{name: '性别',width:"15%"},
{name: '电话',width:"40%"},
{name: '地址',width:"15%"}
]]
};
//表头层
var layout = [ columns ];
</script>
</head>
<body class="tundraGrid">
<div id="grid" dojoType="dojox.Grid" model="model" structure="layout"></div>
</body>
</html>
dojo 1.1.0 学习总结
六. 表格案例
1.导入样式,库,组件
<!-- 表格样式 -->
<style type="text/css">
@import "js/dojo-release-1.1.0/dojox/grid/_grid/Grid.css";
</style>
<!-- 导入dojo库 -->
<script type="text/javascript" src="js/dojo-release-1.1.0/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<!-- 导入组件包 -->
<script type="text/javascript">
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
dojo.require("dojo.parser");
</script>
2.编写表格脚本
<script type="text/javascript">
//表格数据
data = [
[ '张三',25,'男','58429046',['北京','上海']],
[ '李四',26,'男','58429046','上海'],
[ '王五',27,'男','58429046','上海'],
[ '赵六',28,'男','58429046','上海']
];
//表格模型
model = new dojox.grid.data.Table(null, data);
//表格表头
var columns = {cells: [[
{name: '姓名',width:"15%"},
{name: '年龄',width:"15%"},
{name: '性别',width:"15%"},
{name: '电话',width:"40%"},
{name: '地址',width:"15%"}
]]
};
//表头层
var layout = [ columns ];
</script>
注:此部分每一步都是必须的
3.显示表格的层
<div id="grid" dojoType="dojox.Grid" model="model" structure="layout"></div>
注:
1. structure="layout" 表示表格的结构,即列头
2. model="model" 表示表格的数据模型