您的位置：首页 > 其它

dojo1.1.0学习总结--简单表格案例

2008-10-17 12:58 447 查看
前台页面：

<%@ 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" 表示表格的数据模型
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航