从零开始学_JavaScript_系列(十一)——dojo(4)(GRID表格进阶:格式化、style、数据获取、多重排序、点击事件)

如果没有阅读过gridx表格的基本运用教程,建议先阅读这篇(4天点击量已经接近5k):

http://blog.csdn.net/qq20004604/article/details/51170919

里面很详细的说明了gridx表格的创建,常用模块,和基本使用。

如果没有接触过dojo,建议阅读:

http://blog.csdn.net/qq20004604/article/details/51028702

里面介绍了如何加载dojo。

关于dojo的下载,请查看:

https://dojotoolkit.org/download/

建议下载FULL SOURCE版

关于gridx的下载,请点击:

http://oria.github.io/gridx/

如果需要讨论,请评论、或者站内信,我会尽快回复。

(40)表格进阶之合并显示formatter

formatter用在表头,用于 产生数据

假设表格的表头有两项:

{ field:"name", name:"名称", width:"200px" },

{ field:"description",name:"<b>描述</b>",width:"400px" },

然后,我们需要将其合并显示在后面某一个表格栏里,于是这么做。

{ field:"and", name:"合并显示",width:"150px",formatter:function(rowData)

{

returnrowData.name +"," + rowData.description;

}},

注意,读取的数据是没有and这一项的,于是,效果为:

合并前的:

合并后的:(合并前的还在)

rowData可以理解为每一行,rowData.name就是其name项

(41)表格进阶之修饰decorator

decorator函数,是用在表头的,用于 修饰数据

如代码:

{ field:"and", name:"合并显示",width:"150px",formatter:function(rowData)
	{
		return rowData.name +"," + rowData.description;
	},
	decorator:function(cellData, rowId, rowIndex)
	{
		return "<div style='font-size:30px'>" + cellData + "</div>";
	}
},

这里,就是设置这个框的样式为:font-size为30px

效果图(可以发现框内字体比表头大)

也可以设置超链接<a>标签,或者其他。

关于参数:

①rowData是本格数据,如这里第一行就是4,d

②rowId是id属性(如果传递过来的是json文件,且有id属性,那么就是这个);

③rowIndex是索引,第一行是0,第二行是1,依此类推

结论和推测:

①所以说,可以通过这样的形式,给其赋予不同的value属性,例如:

return "<input type='text' value='" + cellData + "'>";

②由此可以推论,可以赋予不同的id、或者其他属性。

(42)表格进阶之修饰单元格本身style、class

formatter创造数据,decorator是修饰数据,但对单元格本身无影响(准确的说,是除表头的表格框)。

dojo代码:

{ field:"and", name:"合并显示",width:"150px",formatter:function(rowData)
	{
		return rowData.name +"," + rowData.description;
	},
	decorator:function(cellData, rowId, rowIndex)
	{
		return "<div style='font-size:30px'>" + cellData + "</div>";
	}
	style:"text-align:center",
	'class':'and_css',
},

CSS代码:

.and_css
{
   color:red;
   background:url(01.png);
}

效果图:

①文本居中了;

②文字颜色染红了;

③背景图片被设置了(范围是单元格)

④鼠标移动上去之后,背景图片没有了,推测是有:hevor属性被预先设置了。

(43)获得某一行某一列的数据grid.cell

假设我要获取第一行第二列的数据,那么:

grid.cell(0,1).data();

就表示第一行第二列的数据(注意,行和列都是从0开始的)。

①第一个坐标表示行(y轴);

②第二个坐标表示列(x周);

③当获取后,就可以愉快的把他赋值给别的变量了。

(44)获取行数grid.model.size()

假设我们想要知道grid表格里有多少行,则使用

grid.model.size();

①返回值是number类型(即可以直接和数字相加);

②返回值是行数

(45)根据行索引,获取该行数据grid.model.byIndex(rowindex)

假如我们想得到第一行的数据。(参数是行索引值)

①首先,第一行的rowindex的值是0(第n行的rowindex是值是n-1);

②然后,grid.model.byIndex(1)表示第一行,其具体内容如下:

{"rawData":{"description":"b","name":"2","id":3,"NEEDEDIT":3,"NEEDDELETE":3},"item":{"description":"b","name":"2","id":3,"NEEDEDIT":3,"NEEDDELETE":3},"data":{"1":3,"2":"2","3":"b","4":3,"5":3,"6":"2,b"}}

③因此,可以利用grid.model.byIndex(1).item.name获取其这一行的name属性。

④但是不确定是否能通过给这样一个变量赋值来修改其值。(我简单的尝试后,失败了)

⑤不能用data然后.1获取

(46)根据行id,获取行index属性grid.model.idToIndex(rowId)

①这里的id,指的是id属性。

②效果是获取该行的索引属性

③假设第二行id属性是100,将100作为参数输入进去。于是返回值是1

(47)根据行索引,获取行id属性grid.model.indexToId(rowIndex)

①这里的rowIndex是行的id属性

②返回值是该行的id属性

③假设第二行id属性是100,将1作为参数(rowIndex),返回值是100

④注意,To固定大写T,然后To前的首字母小写,To后的首字母大写

(48)排序触发函数

插件:gridx/modules/SingleSort

参数:SingleSort  (注意,和ColSort是一个插件)

其他:grid在创建时,modules项加入SingleSort

语法:

通过列号来排序:

grid.column(列号).sort(false);

解释:

①第一列的列号为0,第二列的为1,依次类推;

②false表示正序排列(从0开始),true表示倒序排列,无参数是正序排列;

通过列的ID来排序:

grid.column("列id名").sort(false);

解释:

①首先,表头要有id属性,如表头中的一项:{field:"name",id:"name",name:"名称",width:"200px"}  其id为name。(注意,之前的grid表格的表头,是没有id属性的)

②如果表头没有id属性的话,那么第一列的id将为1,第二列为2依次类推。

③示例:grid.column("name").sort(false);

④初始化grid表格的同时,进行对某列进行排序的操作,我尝试后失败了。

⑤注意使用grid.cell(行-1, 列-1).data()来获取某个单元格的值时,获取的是排序后的值。

取消排序:

grid.sort.clear();

效果:

①恢复排序前的状态(准确的说,是恢复到所有排序行为之前的状态,例如通过ColSort进行的排序也将被恢复);

(49)多重排序

插件:gridx/modules/NestedSort

参数:NestedSort

其他:grid在创建时,modules项加入NestedSort

语法:

grid.sort.sort([{ colId: '列一的ID', descending: false }, { colId: '列二的ID ', descending: true }]);

解释:

①本行命令执行的效果是先对列1进行升序排序(从0开始),在相同的情况下,对列二进行升序排序;

②这里列一和列二的ID,需要是表头的ID(之前是没有加入的)。如下面是表头的一部分:

{field:"name",id:"name", name:"名称",width:"200px"},
{field:"description",id:"de", name:"描述",width:"200px"},

没有设置的话,默认id从1开始。

③grid的modules项同时有参数SingleSort和NestedSort的情况下,可以通过点击表头的右方部分,进行嵌套排序。

④另外,即使不在require的回调函数加入参数NestedSort,也可以正常使用代码来进行排序。但若不在grid的modules项加入,则不能通过点击表头来多重排序

(50)获取单元格的行id和列id

假设该单元格位于第M行,第N列

获取行id:

grid.cell(M-1,N-1).row.id

获取列id:

grid.cell(M-1,N-1).column.id

获取该单元格的值:

grid.cell(M-1,N-1).data()

解释:

①行id,如果该行数据的id属性,则是其id属性(注意,id是小写的);

②列id,指的是该列的表头的id属性;

③单元格的值,通常是其显示的值。

(51)grid表格支持的鼠标键盘事件

如图:

使用方法(如示例代码);

var grid = new Grid(	//grid是变量名,是当前这个grid的变量,后面需要被调用
{
	id:"grid",	//这个是grid的id(单指是这个的)
	store: store,	//store是上面转换过的缓存
	cacheClass: Cache,	//缓存类型,是cache,具体我也不懂
	structure:columns,	//结构,就是上面的表头
	sortInitialOrder: { colId: "name", descending: false },
	filterCaseSensitive: false,		//筛选不区分大小写
	onCellClick:function(evt){alert("1");},
	modules: [ColResizer, ColSort,  VirtualList,IndirectSelect,RowSelect, RowHeader, SingleSort, Filter],
},"results");

这里就是点击后,弹出弹框提示1;(当然,也可以通过处理,让弹出该单元格的值,见下面的另一种方法)

关于点击后触发的行、列事件:

假设参数为evt:

evt.rowId:行id(指的是本行数据的id属性)

evt.parentId:该行如果是子行,返回父行的id;非子行返回0

evt.rowIndex:该行的索引行号(第1行为0);

evt.visualIndex:该行的分页、树节点展开后行号(排序不对其影响)

evt.columnId:列id(在表头中定义的id属性),未定义的话,第n列则为n

evt.columnIndex:列索引(第1列为0)

因此,可以通过点击获得其被点击的所在行、列。然后可以对其进行操纵。

使用connect:

grid.connect(grid, 'onCellClick', function(evt)
{
  var cell = grid.cell(evt.rowId, evt.columnId);
	alert(cell.data());
});

效果:获得所点击区域的值

(52)获取选中的行号

之前在grid里面,加入过行开头的checkbox。这里将给出如何得知选择了哪一些行。

插件和参数:普通gridx所需要的。

语法:

grid.select.row.getSelected()

返回值:

①数组,数组的成员是被选中行的id属性(不是rowindex);

②例如,创建一个普通的gridx表格,带checkbox的(具体创建方法见38);

③html代码(点击某个按钮,获取选中的行号中的那个按钮)

<button id="test2">测试2</button>

④dojo代码(依赖jquery):

$("#test2").click(function()
{
	alert(grid.select.row.getSelected()[1]);
});

⑤效果:在勾选中某些框后,点击“测试2”按钮,弹出一个小窗,内容是选中的所有行中,第二个行的id属性。

如图:

返回值是13

备注:排序不影响返回值。

⑥于是,就可以所选中的行进行处理了(比如删除、修改等);

(53)选中行时触发事件

代码:

grid.connect(grid.select.row, 'onSelected', function(row){
   //row 被选中时触发
 });

效果:

①回调函数返回值row,需要通过row.id来获取其选中行的id属性;

②似乎并没有其他功能了,比如说有一列的id为name,那么无法通过row.name获取该行的name项。

时间: 2024-07-30 13:47:59

从零开始学_JavaScript_系列(十一)——dojo(4)(GRID表格进阶:格式化、style、数据获取、多重排序、点击事件)的相关文章

从零开始学_JavaScript_系列(十)——dojo(3)(GRID表格创建、样式、列宽可变、排序、过滤器)

(34)gridx gridx系列插件并非和dojo的插件在一起 需要下载的请通过以下网址下载: http://oria.github.io/gridx/ 不过我也不太懂不同版本有什么区别(事实上我对gridx还属于新手水平) PS:dojo本身有dojox/grid插件,语法和gridx并不同,所以不能混用. PSS: 由于看这篇帖子的人,基本没办法自己和服务器/数据库互动,所以建议自己写一个json文件,然后get这个json文件(具体看之前的AJAX相关的,很简单,或者使用我下面给的例子也

从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)

(21)和(22)写的不好,跳过. (23)AJAX异步加载 插件:dojo/request 参数:request 语法(get): request.get(URL).then(成功回调函数,失败回调函数); 第一个回调函数是成功的,参数用response:(也可以用其他的) 第二个回调函数是失败的,参数用error:(也可以用其他的) 注: ①读取本地比较简单,直接填写本地的url即可: ②如果读取服务器端(比如数据库),那么需要相应的支持,例如python脚本等(我自己目前对python.和

从零开始学_JavaScript_系列(五)——dojo(基础,动画移动,重力模拟,动画合并,添加标签)

dojo学习 (1)加载 ①首先,先设置 <script> //替代使用data-dojo-config,我们创建一个dojoConfig对象(是个设置)在我们调用dojo.js之前,他们功能相同 //这比通过一大堆设置来说,更易阅读 var dojoConfig = { async: true, //这个代码注册了demo包的正确位置,于是我们可以调用dojo从CDN,并且同时还能加载本地模块 packages: [{ name: "demo", location: lo

从零开始学_JavaScript_系列(16)——CSS&lt;3&gt;(文本、对齐、圆角、盒模型、背景)

注意,有些CSS属性对于低版本浏览器(典型的就是IE),可能不支持,所以在面向低版本浏览器的时候需要注意的说. 关于CSS属性的兼容性检测的网站:http://caniuse.com/ 部分图片来自网易云课堂,侵.私信.删 (34)文字字体 ①font-size:文字大小 ②值有:length(具体值).absolute-size(绝对值,用的少).relative-size(相对值,用的少).percentage(百分比) length:如15px(15px大小),2em(相对父元素属性的2倍

从零开始学_JavaScript_系列(17)——CSS&lt;4&gt;(定位、遮罩、float、弹性布局flex)

部分可能不兼容低版本浏览器(比如IE) 部分图片来自网易云课堂,侵.私信.删 (60)定位 ①position ②值: static:默认,无定位 relative:相对定位,仍在文档流之中(其他的元素不变),参照物相对于原来的位置进行定位.会压在其他的元素上面.作用是为绝对定位元素提供参照物. absolute:绝对定位,脱离文档流(后续元素会在绝对定位元素的前序元素的后面),默认宽度是内容宽度,参照物是第一个定位的祖先/根元素(根元素是html元素),如果祖先没有定位元素,那么会导致其参照物

从零开始学_JavaScript_系列(13)——CSS&lt;2&gt;(新窗口打开,背景图片填充,底文字,小提示,CSS选择器整理)

前注:图片和部分内容引用的网易云课堂的,所以,侵,私信,删. 这篇也算上周的 (10)打开一个网页时,以新窗口形式打开 将 <a href="www.baidu.com"></a> 新增属性: <a href="www.baidu.com" target="_blank"></a> 即可. (11)关于块间的莫名空隙 假设有html代码: <div id="a"> &

从零开始学_JavaScript_系列(27)——myblog的优化【1】样式表分离、localStorage

myblog的建立参照: http://blog.csdn.net/qq20004604/article/details/52019904 本来打算今天写的轮播图,不过突然看到localStorage,一时兴起先搞这个了.下次再写轮播图吧 [1]全局样式和独立样式的分离 我将样式表分割为全局表和独立表: l 在全局的样式里,是一些通用的样式,他们的特点是复用率高,例如设置隐藏效果的.displayNONE,他只有一条属性那就是display:none;加载全局样式时,样式表在head部分. l 

从零开始学_JavaScript_系列(四)——jquery(基础,选择器,触发条件,动画,回调函数)

jQuery语法 (1)引用jquery文件及下载库: http://jquery.com/download/ 下载 Download the compressed, production jQuery 2.2.2 这个是用户版的,已经被精简和压缩. 然后使用 <script src="jquery.js"></script> 来启动这个库文件,记得将下载的文件重命名为jquery.js 也可以使用谷歌和微软的CDN,不过这里略. (2)jQuery语法 $ (

从零开始学编程系列汇总

github 地址:https://github.com/justjavac/Programming-Alpha-To-Omega 「从零开始」系列 从零开始写个编译器吧系列 (知乎专栏) 从零开始写一个简单的操作系统 (伯乐在线) 从零开始写 JavaScript 框架 (图灵社区) 从零开始写 jQuery 框架 (蓝色理想 ) 从零开始 nodejs 系列文章 (粉丝日志) 从零开始编写网络游戏 ( 英特尔? 开发人员专区) 从零开始编写自己的 C# 框架 (博客园) 如何从零开始写一个