dojo很强大,也很方便,但是缺少文档,只能看源代码,也挺好的,就是费时间。。。

网上找了一段代码(找不到原出处了,不好意思),也看了dojo自带的demo,放一段可以执行的页面代码这里。把ip换成自己架设的js服务器(esi的CDN貌似有点问题)即可

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>dojo grid 分页</title> <link rel="stylesheet" href="http://192.168.30.86/arcgis_js_api/library/3.12/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://192.168.30.86/arcgis_js_api/library/3.12/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://192.168.30.86/arcgis_js_api/library/3.12/dijit/themes/claro/document.css">
<link rel="stylesheet" href="http://192.168.30.86/arcgis_js_api/library/3.12/dojox/grid/enhanced/resources/claro/EnhancedGrid.css">
<link rel="stylesheet" href="http://192.168.30.86/arcgis_js_api/library/3.12/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css"> <style>
#gridDiv{
width: 60em;
height: 35em;
border: 1px solid #D5CDB5;
}
</style>
<script src="http://192.168.30.86/arcgis_js_api/library/3.12/init.js"></script>
<script> require([
"dojo/parser",
"dojox/grid/EnhancedGrid", //表格
"dojo/data/ItemFileWriteStore",//数据
"dojox/grid/enhanced/plugins/DnD", //拖拽
"dojox/grid/enhanced/plugins/Pagination",//分页
"dojox/grid/enhanced/plugins/nestedSorting",//嵌套排序
"dijit/form/Button","dojo/dom","dojo/on","esri/config","esri/lang","dojo/domReady!"
],
function () {
//获取数据
var data = {
identifier : 'id',
items : []
};
var data_list = [{
col1 : "normal",
col2 : false,
col3 : 'But are not followed by two hexadecimal',
col4 : 29.91
}, {
col1 : "important",
col2 : false,
col3 : 'Because a % sign always indicates',
col4 : 9.33
}, {
col1 : "important",
col2 : false,
col3 : 'Signs can be selectively',
col4 : 19.34
}
];
var rows = 60;
for (var i = 0, l = data_list.length; i < rows; i++) {
data.items.push(dojo.mixin({
id : i + 1
}, data_list[i % l]));
}
var store = new dojo.data.ItemFileWriteStore({
data : data
}); dojo.ready(function () {
/*set up layout*/
var layout = [[{
name : 'slector',
field : 'Sel',
editable : true,
width : '20px',
cellStyles : 'text-decoration: none; cursor:default; text-align: center;position: relative; left: -10px',
headerStyles : 'text-align: center;',
type : dojox.grid.cells.Bool//选择器
}, {
'name' : 'Column 1',
'field' : 'id'
}, {
'name' : 'Column 2',
'field' : 'col2'
}, {
'name' : 'Column 3',
'field' : 'col3',
'width' : '230px'
}, {
'name' : 'Column 4',
'field' : 'col4',
'width' : '230px'
}
]];
/*create a new grid:*/
var grid = new dojox.grid.EnhancedGrid({
id : 'grid',
store : store,
structure : layout,
plugins : {
nestedSorting:true,//嵌套排序
dnd : false,//数据拖拽
pagination : {//分页
pageSizes :[ "10", "20", "50","100", "ALL"],//最后一个只是标识,不显示的
//[10, 20, 50, Infinity],//或者换这种写法
//description: true,//描述,第1-20个,共60个。默认是true
//sizeSwitch: true,//分页大小切换,默认是true
maxPageStep : 8,
gotoButton : true,//转至第几页,默认为false
defaultPage : 1,
defaultPageSize : 20,
position: "bottom"//有三种方式,top, bottom, both,默认是bottom
},
},
rowSelector : '20px'
},
document.createElement('div'));
/*append the new grid to the div*/
dojo.byId("gridDiv").appendChild(grid.domNode);
/*Call startup() to render the grid*/
grid.startup();
}); });
</script>
</head>
<body class="claro">
<div id="gridDiv">
</div>
</body>
</html>

gird分页

效果如下图

其他的再说吧

dojo grid 分页的更多相关文章

  1. dojo grid 编辑问题

    今天dojo grid编辑小问题,找了半天才找到问题, 1.问题 2.原因 数据单元没有索引列->id 3.修改前代码 <!DOCTYPE HTML> <html lang=& ...

  2. dojo表格分页插件报错

    dojo表格分页插件报错 (1)dojo/parser::parse() error ReferenceError {stack:(...),message:"layout is not d ...

  3. dojo表格分页之各个参数代表的意义(一)

    下面是dojo表格分页参数代表的意义 //每页可以显示10/15/20/25/30条记录 (1)pageSizes: [10, 15, 20, 25,30], //每页显示的记录从多少到多少,共多少条 ...

  4. [转]ExtJS Grid 分页时保持选中的简单实现方法

    原文地址 :http://www.qeefee.com/article/ext-grid-keep-paging-selection ExtJS中经常要用到分页和选择,但是当选择遇到分页的时候,杯具就 ...

  5. ExtJS自制表格Grid分页条

    试过Grid自带的load和分页功能,没有成功,干脆就自己写了...... 主要是查询条件比较复杂...... 希望哪位大神能有更好的意见. Ext.define('MyApp.ux.Paginati ...

  6. ExtJS入门教程06,grid分页的实现

    前面两篇内容分别介绍了extjs grid的基本用法和extjs grid异步加载数据,这篇文章将介绍extjs grid的分页. 数据量大的时候我们必须用到分页,结合上一篇的异步加载数据,今天我们就 ...

  7. ExtJs4 SpringMvc3 实现Grid 分页

    新建一个Maven webapp项目,webxml以及spring配置没什么需要注意的,不再赘述. Maven依赖:(个人习惯,有用没用的都加上...) <project xmlns=" ...

  8. extjs grid 分页

    在使用extjs创建带分页功能的 grid 如下: 1.创建一个模型 // 创建算定义模型 模型名称 User Ext.define('User', { extend: 'Ext.data.Model ...

  9. Ext4.1 Grid 分页查询

    转载:http://blog.csdn.net/zyujie/article/details/16362747 最近用Ext4.1自己做了做项目的练习:把一些知识点,在这里记录下来了! 上面一个for ...

随机推荐

  1. 【UVa-514】铁轨——栈的学习

    UVa514 Rails(铁轨) 题目:铁轨 题目链接: UVa514链接 题目描述: 某城市有一个火车站,有n节车厢从A方向驶入车站,按进站的顺序编号为1-n.你的任务是判断是否能让它们按照某种特定 ...

  2. shell 中数学计算总结

    shell中的赋值和操作默认都是字符串处理,在此记下shell中进行数学运算的几个特殊方法,以后用到的时候可以来看,呵呵.   1.错误方法举例   a)   var=1+1   echo $var  ...

  3. Oracle11g安装出现em.ear

    在windows 7下安装Oracle 11g R2 时大概安装到45%时 提示找不到em.ear文件,如果点击继续还会出现其他错误,最后安装不成功. 检查文件发现另外一个zip没有解压 解压第二个压 ...

  4. 【LR】安装LR11后遇到的问题

    (1)问题:录制脚本时无法弹出IE浏览器 解决方法: 正确的是C:\Program Files (x86)\Internet Explorer\iexplore.exe 错误是:C:\Program ...

  5. VC++中内存对齐

    我们经常看到求 sizeof(A) 的值的问题,其中A是一个结构体,类,或者联合体. 为了优化CPU访问和优化内存,减少内存碎片,编译器对内存对齐制定了一些规则.但是,不同的编译器可能有不同的实现,本 ...

  6. mybatis源码学习: 编译的方法

    mybatis3用了一段时间,抽出时间来研究一下.具体用法参考官方文档就行,源码在这里.mybatis相对而言,规模较小,可以从中学习如何编写高质量的java项目. mybatis3使用maven管理 ...

  7. java类与对象的动手动脑和其他小问题

    在Java中,我们可以通过组合一私有字段和一对get/set方法来定义一个属性.私有的变量,共有的方法. package sample; /** * 自定义Java类的示例 */ class MyCl ...

  8. WCF基礎

    參考:http://www.cnblogs.com/MeteorSeed/archive/2012/04/24/2399455.html http://www.cnblogs.com/scy25114 ...

  9. Kali vmtools

    参考链接:http://www.leavesongs.com/SHARE/kali-vmtools-install.html   安装环境:kali-1.1.0 ---3.18.0-kali1-amd ...

  10. DNN 错误代码 0x80070005 解决方案

    在IIS上创建DNN站点,可能出现的错误代码:0x80070005,因为权限不足而不能访问DNN. 解决方法:打开IIS, 1.右键目标网站->编辑权限->安全->添加组或者用户 “ ...