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

最新推荐文章于 2024-09-14 08:09:14 发布

huhaihong

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量1.8k

点赞数

文章标签： dojo structure layout import html 电话

本文链接：https://blog.csdn.net/huhaihong/article/details/3091285

版权

本文是关于dojo1.1.0的学习总结，重点介绍了如何创建一个简单的表格案例。首先导入表格样式、dojo库和所需组件，接着编写表格数据、模型和表头脚本，最后通过dojoType和相关属性显示表格。示例中展示了包含姓名、年龄、性别、电话和地址的表格数据。

摘要由CSDN通过智能技术生成

前台页面：
<%@ 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>
     
    <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>
     
    <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" 表示表格的数据模型