dojo学习小结-dojox.grid.DataGrid
发布时间:2010-06-06 18:01:59 文章来源:www.iduyao.cn 采编人员:星星草
dojo学习总结-dojox.grid.DataGrid
dojo学习总结-dojox.grid.DataGrid
一、使用场景
服务端获得的DataTable转化为Json格式后传递给客户端dojo,dojo将json数据直接绑定在dojox.grid.DataGrid上
二、基本用法
1.客户端页面DataToJson.aspx返回一个Json数据
private void Json()
{
DataTable dt = this.GetData();
string str = JsonHelper.DateTableToJson(dt);
Response.Write(str);
Response.End();
}
2.利用ajax接受json数据
dojox.grid.DataGrid凭借dojo.data.ItemFileWriteStore可以轻松具有ajax功能
使用dojo.grid.DataGrid首先做如下准备工作
a.引入样式表
<link rel="Stylesheet" href="dojo-re/dojox/grid/resources/soriaGrid.css" />
b.引入所需库
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.layout.FloatingPane");
c.编写代码
<script type="text/javascript">
function Grid1() {
var data = new dojo.data.ItemFileWriteStore({
url: "DataToJson.aspx"
});
var structure = [
{ name: "用户名", field: "userName", width: "120px" },
{ name: "密码", field: "userPwd", width: "120px" },
{ name: "电子邮件", field: "email", width: "150px;" },
{ name: "博客", field: "blog", width: "150px" },
{ name: "生日", field: "birthday", width: "120px" },
{ name: "年龄", field: "age", width: "80px" },
{ name: "备注", field: "description", width: "120px" }
];
var grid = new dojox.grid.DataGrid({
store: data,
structure:structure
},"grid1");
grid.startup();
}
function ShowFloatingPane() {
var floatingPane = dijit.byId("dFloatingPane");
floatingPane.show();
Grid1();
}
</script>
所需HTML
<div >
<div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"
title="A floating pane" data-dojo-props="resizable:true, dockable:true, title:'A floating pane'"
style="position:absolute;top:150px;left:400px;width:600px;height:400px; visibility:hidden">
<div id="grid1" style="width:450px; height:350px"></div>
</div>
</div>
<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:ShowFloatingPane"></div>
三、继续完善DataGrid功能
1,增加搜索条件
query:{userName:"evilyang",id:"*"},
2,隐藏一列,不显示
{name:"密码",field:"userPwd",width:"100px",hidden:"true"}
3,为某一列增加一个样式名
<style type="text/css">
.name{ font-style:italic; font-size:14px; color:Red;}
</style>
{ name: "用户名", field: "userName", width: "120px" ,classes:"name"}
4,为某一列直接增加一个样式
{ name: "电子邮件", field: "email", width: "150px;",styles:"text-align:center;" },
5,固定前两列
更改structure结构,加入noscroll属性
var structure = [{
noscroll: true,
cells: [
{ name: "用户名", field: "userName", width: "80px", classes: "name" },
{ name: "密码", field: "userPwd", width: "80px", hidden: "true" },
{ name: "电子邮件", field: "email", width: "150px;", styles: "text-align:center;" }
]
}, {
cells: [
{ name: "博客", field: "blog", width: "120px" },
{ name: "生日", field: "birthday", width: "120px" },
{ name: "年龄", field: "age", width: "50px" },
{ name: "备注", field: "description", width: "120px" }
]
}];
6,cell中的样式设置默认模式
defaultCell:{width:"80px",styles:"text-align:center;"},
这样设置完后,每一列的属性就不必单独设置了
7, 其他属性
selectionMode: "extended", //none,single,multiple
loadingMessage: "请等待,数据正在加载中......",
errorMessage: "对不起,你的请求发生错误!",
columnReordering:true//此属性设置为true,可以拖拽标题栏,更换列顺序
new dojox.grid.cells.RowIndex({ name: "编号", width: "20px" })//加入自编号
四、数据显示高级功能
1, RowClick事件
grid.on("RowClick", function(evt) {
var idx = evt.rowIndex,
item = this.getItem(idx),
store = this.store;
content = dojo.byId("content");
content.innerHTML="you have clicked on rows " + store.getValue(item, "id");
}, true);
2,SelectionChanged事件
grid.on("SelectionChanged",dojo.hitch(grid, reportSelection), true);
function reportSelection() {
var items = this.selection.getSelected(),
msg = "你选择了以下数据";
var tmp = dojo.map(items, function(item) {
return this.store.getValue(item, "id");
}, this);
var content = dojo.byId("content");
content.innerHTML = msg + tmp.join(",");
}
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。
其他相似内容:
-
《松本行弘的程序世界》之面向对象
最近读《SICP》把脑细胞搞死大半,还没看完2章,而且看得也是一知半解,实在是受不了了,...
-
GroovyHelp 3.2.7 GA发布
GroovyHelp简介
GroovyHelp是一款Javadoc及Groovydoc搜索查阅软件,它能够帮助Java开发人员以...
-
Velocity在Roller中的应用
Velocity是java世界中出现比较早,也比较成熟的、性能比较好的、应用也比较广泛的模板框架。
所...
-
Rpc远程调用框架的设计与实现(2)
接上:
3 基于Json的前后端数据交互
3.1 轻量级的数据交换形式
3.1.1 什么是Jso...
-
excel 单元格的锁定 以及 JXL的实现方式
在使用excel表格时,有些列是不希望用户可以修改的,诸如审计日志里面确定的部分,而审计...
-
仓秤和散料秤:java连接opc Server
这三篇都是之前写好的,一直没发。
这次一起发出来吧。
java连接硬件很痛苦,特别是对我这...
-
Rpc远程调用框架的设计与实现(1)
Rpc远程调用框架的设计与实现
1 Rpc远程调用框架设计概述
1.1 研究背景
1.1.1...
-
集合中的线程安全问题
一、why?
Java中常用的集合框架推荐使用的三个实现:HashSet\ArrayList\HashMap都是线程不安全的.如...
-
Java定时任务的实现
本例依据Java自身提供的接口实现,通过监听器(Listener)和定时器(Timer)定时执行某个任务(Task)。
MyListener:
...
-
java中log日志的使用
一、介绍
Log4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控...