大佬教程收集整理的这篇文章主要介绍了Dojo 1.6 官方教程: DataGrid导引,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
原作者:Bryan Forbes
原文链接:http://dojotoolkit.org/documentation/tutorials/1.6/datagrid/
译者:zhuxw (zhuxw1984@gmail.com)
鉴于DataGrid对于表格数据的有效呈现,它早已成为许多应用的核心组件之一。在本教程中,我们将着眼于如何定义grid的布局结构,并讨论DataGrid所采用的滚屏机制。
适用Dojo版本:1.6 (其实绝大部分内容自1.2开始就支持了——译者注)
可以看到,DataGrid能够轻易地承载这份包含了17452项纪录的数据列表。在本教程中,我们将使用一份较小的数据集作为例子:只显示名人堂球员的击球统计。好了,让我们开始吧!
在后面的教程中,我们还将不断修这个示例的布局结构。要定义一个DataGrid的模样,我们需要在构造函数里给structure(结构)属性传递一些对象和数组。我们将从最小的可定义单元开始——单元格——直到最大的组成部分——视图。我们暂时不涉及如何从服务器端获取数据,但下一篇教程会涵盖这部分内容。
grid = new dojox.grid.DataGrid({ store: store,query: { id: "*" },structure: [ { name: "First Name",field: "first",width: "84px" },{ name: "last name",field: "last",{ name: "Bats",field: "bats",width: "70px" },{ name: "Throws",field: "throws",{ name: "G",field: "@R_279_10586@lG",width: "60px" },{ name: "AB",field: "@R_279_10586@lAB",{ name: "Games as Batter",field: "@R_279_10586@lGAB",width: "120px" },{ name: "R",field: "@R_279_10586@lR",{ name: "RBI",field: "@R_279_10586@lRBI",{ name: "BB",field: "@R_279_10586@lBB",{ name: "K",field: "@R_279_10586@lK",{ name: "H",field: "@R_279_10586@lH",{ name: "2B",field: "@R_279_10586@l2B",{ name: "3B",field: "@R_279_10586@l3B",{ name: "HR",field: "@R_279_10586@lHR",width: "60px" } ] },"grid");【示例】
<style> .firstName { font-style: italic; } .lastName { font-weight: bold; } </style> <script> grid = new dojox.grid.DataGrid({ store: store,width: "84px",classes: "firstName" },cellClasses: "lastName" },width: "70px",cellStyles: "text-align: right;" },width: "120px",styles: "text-align: center;" },"grid"); </script>【示例】
单元格定义中使用两个新的属性:rowSpan定义了一个单元格占用多少子行,而colSpan则定义了一个单元格占用多少列。
grid = new dojox.grid.DataGrid({ store: store,structure: [ [ { name: "First Name",rowSpan: 2 },width: "60px" } ],[ { name: "Games as Batter",colSpan: 2 },field: "@R_279_10586@lH" },field: "@R_279_10586@l2B" },field: "@R_279_10586@l3B" },field: "@R_279_10586@lHR" } ] ] },"grid");【示例】
grid = new dojox.grid.DataGrid({ store: store,structure: [ { noscroll: true,cells: [ { name: "First Name",width: "84px" } ] },{ cells: [ [ { name: "Bats",width: "60px" } ],[ { name: "Games as Batter",field: "@R_279_10586@lHR" } ] ] } ] },"grid");【示例】
grid = new dojox.grid.DataGrid({ store: store,defaultCell: { width: "84px" },field: "first" },field: "last" } ] },{ defaultCell: { width: "60px" },cells: [ [ { name: "Bats",field: "@R_279_10586@lG" },field: "@R_279_10586@lAB" },field: "@R_279_10586@lR" },field: "@R_279_10586@lRBI" },field: "@R_279_10586@lBB" },field: "@R_279_10586@lK" } ],"grid");【示例】
以上是大佬教程为你收集整理的Dojo 1.6 官方教程: DataGrid导引全部内容,希望文章能够帮你解决Dojo 1.6 官方教程: DataGrid导引所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。