dojox/grid/EnhancedGrid数据格网小部件

来源：互联网发布：淘宝入门基础知识2017 编辑：程序博客网时间：2024/05/16 01:31

该类用于创建数据网格表格小部件来显示数据。使用前需要引入该小部件的css文件。如果网格部件中需要用到插件则需要导入相应插件的模块。

该类的store属性值为dojo中的数据存储对象，

比如：

1.ItemFileWriteStore存储对象(不赞成使用)

2.ObjectStore(该存储对象中存储的数据用于其它对象消费使用)，ObjectStore支持两种数据形式，一是Memory(存在内存中的数据)，二是JsonRestd中的数据(通过http向服务器请求从而获取json数据)

你可以网格对象中store属性值改为ObjectStore对象可是可以的。

创建objectStore对象存储数据的形式为：

//数据

var datas=[{"id":1,"uuid":12346546,"number":20,"sb_mc":'大1'},{"id":2,"uuid":18999946,"number":22,"sb_mc":'3'}];

//先把数据放到内存存储

var memory=new Memory(
{
data:datas
});
//再把数据放到dojo中的存储对象
var store=new ObjectStore(
{
objectStore:memory
});

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据网格表</title>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v43_api/arcgis_js_api/library/4.3/4.3/esri/css/main.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v43_api/arcgis_js_api/library/4.3/4.3/dijit/themes/soria/soria.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v43_api/arcgis_js_api/library/4.3/4.3/dojox/grid/resources/soriaGrid.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v43_api/arcgis_js_api/library/4.3/4.3/dojox/grid/enhanced/resources/EnhancedGrid.css"/>
<script type="text/javascript" src="http://localhost/arcgis_js_v43_api/arcgis_js_api/library/4.3/4.3/init.js"></script>
<style type="text/css">
html,body{ margin: 0px;padding:0px;width:100%;height:100%}
</style>
<script type="text/javascript">
require(["dojo/_base/window",
"dojo/_base/declare",
"dojox/layout/FloatingPane",
"dojo/dom-construct",
"dojo/on",
"dojox/grid/EnhancedGrid",
"dojo/dom",
"dojox/grid/enhanced/plugins/Pagination",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/data/ItemFileWriteStore",
"dojo/domReady!"],
function(Win,declare,FloatingPane,domConstruct,on,EnhancedGrid,dom,Pagination,Memory,ObjectStore,ItemFileWriteStore)
{

//创建数据对象用于将数据存储在它的属性数组中
var dataObj={

"identifier": "id",
items: []//数组用于存储数据
};
//放入数据
dataObj.items=[{"id":1,"uuid":12346546,"number":20,"sb_mc":'大1'},{"id":2,"uuid":18999946,"number":22,"sb_mc":'大3'}
];
//数据放到dojo中的存储对象
var storeObj=new ItemFileWriteStore(
{
data:dataObj
});

//数据格网的标题部分
var layout = [[
{'name': '编号', 'field': 'id', 'width': '10%',styles:"text-align: center;"},
{'name': 'uuid','field': 'uuid',styles: "text-align: center;", hidden: true},
{'name': '设备编号', 'field': 'number', 'width': '20%', styles: "text-align: center;"},
{'name': '用户名称', 'field': 'sb_mc', 'width': '20%', styles: "text-align: center;"},

]];
//创建格网对象
var dataGrid=new EnhancedGrid(
{
id : "pointdataGrid",//用于通过id查找小部件对象
structure : layout,//构造数据网格的标题头
noDataMessage : "暂无轨迹信息！",//当表格中没有数据时将要显示该信息
loadingMessage : "请等待，数据正在加载中......",//网格正在加载数据时显示该信息
//网格中的页面插件
plugins : {
pagination : {
pageSizes : [ "10", "25", "50", "All" ],
description : true, // 如果设置成False，就没有最左边的描述信息了
sizeSwitch : false,// 如果设置成False，中间的行数切换就没了
pageStepper : true,// 如果设置成False，右边的页面切换也省了
gotoButton : true,// 显示Goto
// Button，默认是不显示的。
maxPageStep : 3,
defaultPageSize : 20,// 默认每页显示的行数
position : "bottom"
}
}

},document.createElement("div"));
dom.byId("mydiv").appendChild(dataGrid.domNode);
dataGrid.store = storeObj;//用于格网存储的数据的属性，用于数据的显示
dataGrid.startup();
});
</script>
</head>
<body class="soria">
<div id="mydiv" style="border:1px solid red;position:absolute;top:20px;left:30px;height:600px;width:350px"></div>
</body>
</html>

阅读全文

0 0