- 浏览: 160589 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
qq_21380041:
954414957@qq.com
HTML5数据可视化第二弹:打造最美3D机房 -
qq_21380041:
楼主,求代码
HTML5数据可视化第二弹:打造最美3D机房 -
luoaz:
楼主能不能传个源码的附件上来, 分享学习下呢?
HTML5+WebGL 3D机房开发实例 -
xiaosi1278:
你好能不能把你讲的源代码发一下!!做参考403541110@q ...
TWaver 3D 编辑器的使用(一)----设计3D场景以及数据绑定 -
TWaverGeek:
BigBird2012 写道您好,您能把您使用TWaver导入 ...
TWaver导入导出AutoCAD DXF图纸
TWaver HTML5发布已有一段时间,使用的客户也是逐渐增加,于是我也迫不及待地申请了一个试用版来写一个小网页,最近正在写到数据查询,表格显示的功能。表格组件在HTML5中是提供的,查看TWaver提供的Demo,表格的使用还是比较多的,于是参考了其中的一个Demo,新建一个表格,并给表格赋值。很快一张表格就生成了。
但是想想,如果数据库中有几千甚至几万条数据,一下子显示出来也是不现实的,立马就想要了分页。查看TWaver的API,并没有发现表格中提供了分页的功能。算了,还是自己来扩展,想想TWaver Java中分页的功能,HTML5实现起来应该也不算太难,我们需要定义一个PagedTablePane,panel中包含表格和分页栏,分页栏参考了TWaver Java的那种:
仔细看看上面的分页条,其实也不是那么复杂,几个分页按钮加上分页的信息,于是很快就模仿了一个类似的分页栏,先上图:
界面实现起来还是比较容易的,主要的是按钮的操作和分页信息的显示,我们需要定义几个变量:currentPage(当前页)、countPerPage(每页的条数)、pageCount(页数)、count(总数),定义了这几个变量就可以将上图中分页的信息表示出来了。
另外需要注意,分页按钮上也需要做一些判断,比如当前已经是第一页了,那么“首页”和“上一页”的按钮就应该显示灰色,不可操作的状态;同理如果当前是最后一页,那么后面两个按钮也需要呈不可操作状态,我们来看下相关代码:
if(this.pageCount < 2) { this.btnFirstPage.disabled = true; this.btnPreviousPage.disabled = true; this.btnNextPage.disabled = true; this.btnLastPage.disabled = true; } else { this.btnFirstPage.disabled = false; this.btnPreviousPage.disabled = false; this.btnNextPage.disabled = false; this.btnLastPage.disabled = false; if(this.currentPage == 0) { this.btnFirstPage.disabled = true; this.btnPreviousPage.disabled = true; } if(this.currentPage == this.pageCount - 1) { this.btnNextPage.disabled = true; this.btnLastPage.disabled = true; } }
按钮除了需要判断显示状态之外,还需要加鼠标点击的监听,这里我们需要后台分页,因此,每次点击按钮时,都需要调用后台的方法查询出相应的数据,这样也可以减少前台一次加载大量数据的压力。
this.btnFirstPage = util.addButton(toolbar, '<<', function () { self.currentPage = 0; self.search(); }); this.btnPreviousPage = util.addButton(toolbar, '<', function () { self.currentPage --; self.search(); }); this.btnNextPage = util.addButton(toolbar, '>', function () { self.currentPage ++; self.search(); }); this.btnLastPage = util.addButton(toolbar, '>>', function () { self.currentPage = self.pageCount -1; self.search(); });
另外下拉条也需要加交互事件:
cmbCountPerPage.onchange = function () { var value = parseFloat(cmbCountPerPage.value); self.countPerPage = value; self.search(); };
上面代码中的search都是调用后台的方法,这里就不再给出了。至此,分页的功能就差不多了,加上分页后的效果:
细心的朋友还会看到上面的表头上有些列是可点的,有些是不可点击的。我在这里加上了后台排序的功能,如果这一列可以排序就为可点击状态,反之则为不可点击状态。
HTML5中的表格默认是可以进行排序的,不过这种排序也是在当前页进行排序,还不是真正意义上的后台排序,其实分页后也只有当前页的数据在databox中,后面页的数据都需要通过实时查找才能获取放置到databox中。因此点击排序按钮时我们需要将TWaver默认的处理方式给屏蔽掉,加上自己的处理就可以了,具体实现如下:
先重写table上的getCurrentSortFunction:
getCurrentSortFunction: function () { return this.getSortFunction(); }
然后在onColumnSorted方法中进行自己的业务处理:
this.table.onColumnSorted = function (column) { self.currentPage = 0; if (column) { self.dataPane._sortBy = column.getClient('sortProperty'); self.dataPane._orderAsc = column.getSortDirection() === 'asc'; } else { self.dataPane._sortBy = null; } self.search(); };
这里的sortBy和orderAsc是自己定义的两个变量,在search方法中会调用此变量,将其传入后台进行排序。最后,给出完整的PagedTablePane供大家参考:
var PagedTablePane = function (dataPane) { PagedTablePane.superClass.constructor.call(this); this.dataPane = dataPane; var toolbar = document.createElement('div'); this.setCenter(new twaver.controls.TablePane(dataPane.table)); this.setTop(toolbar); this.setTopHeight(25); this.countPerPage = 20; var self = this; var isStorageSupport = typeof(Storage) !== "undefined"; if(isStorageSupport) { var storageName = dataPane.getPageNumberStorageName(); if(localStorage.getItem(storageName)){ self.countPerPage = parseFloat(localStorage.getItem(storageName)); } } var cmbCountPerPage = document.createElement('select'); var items = ['20', '50', '100', '500', '1000']; for(var i=0,item; i<items.length; i++) { item = items[i]; var option = document.createElement('option'); option.appendChild(document.createTextNode(item)); option.setAttribute('value', item); cmbCountPerPage.appendChild(option); } cmbCountPerPage.onchange = function () { var value = parseFloat(cmbCountPerPage.value); self.countPerPage = value; if(isStorageSupport) { var storageName = dataPane.getPageNumberStorageName(); localStorage.setItem(storageName,value); } self.search(); }; cmbCountPerPage.value = this.countPerPage; toolbar.appendChild(cmbCountPerPage); this.btnFirstPage = util.addButton(toolbar, '<<', function () { self.currentPage = 0; self.search(); }); this.btnPreviousPage = util.addButton(toolbar, '<', function () { self.currentPage --; self.search(); }); this.btnNextPage = util.addButton(toolbar, '>', function () { self.currentPage ++; self.search(); }); this.btnLastPage = util.addButton(toolbar, '>>', function () { self.currentPage = self.pageCount -1; self.search(); }); this.label = document.createElement('label'); toolbar.appendChild(this.label); this.table = dataPane.table; this.currentPage = 0; this.table.onColumnSorted = function (column) { self.currentPage = 0; if (column) { self.dataPane._sortBy = column.getClient('sortProperty'); self.dataPane._orderAsc = column.getSortDirection() === 'asc'; } else { self.dataPane._sortBy = null; } self.search(); }; }; twaver.Util.ext('PagedTablePane', twaver.controls.BorderPane, { search: function () { util.invoke(this, this.handleSearch, { moduleName:this.dataPane._moduleName, method: util.getCountMethod(this.dataPane._method), params: this.dataPane.getParams(), paramTypes:this.dataPane._paramType }); }, handleSearch: function (count) { this.jsonObject = JSON.parse(count); this.count = this.jsonObject[0]; this.pageCount = Math.floor(this.count/this.countPerPage); if(this.count % this.countPerPage) { this.pageCount ++; } if(this.currentPage >= this.pageCount) { this.currentPage = this.pageCount -1; } this.label.innerHTML = jQuery.i18n.prop('paged.page',this.count,this.currentPage + 1,this.pageCount); if(this.pageCount < 2) { this.btnFirstPage.disabled = true; this.btnPreviousPage.disabled = true; this.btnNextPage.disabled = true; this.btnLastPage.disabled = true; } else { this.btnFirstPage.disabled = false; this.btnPreviousPage.disabled = false; this.btnNextPage.disabled = false; this.btnLastPage.disabled = false; if(this.currentPage == 0) { this.btnFirstPage.disabled = true; this.btnPreviousPage.disabled = true; } if(this.currentPage == this.pageCount - 1) { this.btnNextPage.disabled = true; this.btnLastPage.disabled = true; } } this.dataPane.initData(); } });
发表评论
-
数字图像处理技术在TWaver可视化中的应用
2015-04-16 14:30 676数字图像处理(Digital Image Processin ... -
TWaver HTML5之树形布局
2015-03-11 10:53 1364转眼间春节假期已经过完,作为一个职业的程序猿,不知道大家有没 ... -
TWaver推智能手表挑战华为苹果
2015-03-04 10:35 5722015年的春节刚过,苹果、华为、三星就紧锣密鼓的发布了各自 ... -
TWaver矢量小试——Android演进路线图
2015-02-02 11:56 1184还有半个多月就到春节了,年底相信很多公司都会进行年度总结以及 ... -
用TWaver加载大型游戏场景一例
2015-01-06 13:52 696游戏中经常会出现一些大型的户外场景,例如一个小镇、一座古城等 ... -
22万个木箱!TWaver 3D极限压榨
2014-12-29 11:31 851打开个门户网站都千呼万唤,我们还能期待网页上的3D技术会有 ... -
巧用TWaver 3D 矢量图形功能
2014-10-29 11:14 557的确,提起TWaver,大家想到的首先是“电信拓扑图组件”。 ... -
TWaver GIS在电信中的使用
2014-10-09 14:56 510GIS作为信息系统的重要组成部分,在电信行业中的应用由来已久。 ... -
如何创建环型、树型双层布局
2014-09-19 10:58 787TWaver的Demo中有常用的环型布局和树型布局,但是当网 ... -
如何创建发光的环路
2014-09-16 13:44 734先看看发光链路的运行效果:在这个Demo中主要包含三个技术 ... -
Autolayout性能优化
2014-09-03 11:05 942客户的需求就是我们进步的动力。最近有客户提出大数据量Top ... -
DNA分子结构3D模型
2014-08-21 15:16 839生物信息资源更新越来 ... -
TWaver版3D化学元素周期表
2014-07-14 10:17 1670很早就有人做3D网页版的化学元素周期表了,酷炫效果和新鲜技巧 ... -
在MONO Design中使用Flex3D
2014-07-08 10:04 638在项目开发组的努力下,HTML5 3D 的开发包变得越来越优 ... -
TWaver 3D技术在油田行业的应用
2014-05-26 15:29 626油田信息化是是数字油 ... -
用TWaver实现组合的Chart
2013-01-21 12:14 1374TWaver组件中提供了一些通用的Chart,比如Line ... -
TWaver Java内存占用测试
2012-12-25 13:50 800TWaver Java的性能大家有 ... -
JTree实现文件树
2012-11-05 10:57 608这篇文章介绍的内容其实跟TWaver的组件没有任何关系,但是个 ... -
TWaver With JavaFX
2012-10-10 18:08 769JavaFX Script被抛弃以后,很久不关心JavaFX了 ... -
自定义Background
2012-08-17 12:08 916TWaver提供了ImageBackground来为TNetw ...
相关推荐
asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用...
div+css+js制成的表单,点击列名,可以使数据根据点击的列进行升序、降序的排序,还可以选择当前页显示的数据数量。适合网站后台使用
使用SSM框架+EasyUI DataGrid数据表格实现了基本的增删改查,以及对数据分页,排序功能的实现。是一个对于后台管理的很好的例子,因为一般企业后台管理都是使用EasyUI等框架快速搭建,而且DataGrid是EasyUI最重要的...
一个完全响应式的 ...带分页和排序的数据表 不同类型的表单布局 验证表格 范围滑块 表单向导 发票页面 用户资料页面 不同类型的通知和甜蜜警报 登录/注册页面 动画模型 兼容小、中、大屏幕 动态和静态小部件 井文档
很多时候需要这样的功能,对表格进行分页、排序和检索。这个有很多实现的方式,有现成的表格控件、用前端的mvvm,用户控件。但很多时候看着很漂亮的东西你想进一步控制的时候却不那么如意。这里自己实现一次,功能...
舒服的后台可以让你轻松地编辑表格数据。表格可以包含任何数据类型。表格可以用在文章、数据以及挂件中,还可以导入导出为 CSV,XML,HTML等格式。 WP-Table Reloaded安装使用: 下载WP-Table Reloaded 插件,解压...
SYSTABLE version1.2 table表格插件,是本人独立开发的后台通用系统SYSUI的...支持排序,checkbox全选,表格列宽拖拽,按钮操作,分页等table表格功能操作。 支持表格直接修改信息,支持checkbox单选框选择, 文本修改。
Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。 因公司的项目需要实现用户管理的表格实现,所以选用了...
3.10 后台排序 53 3.11 可编辑表格控件--EditorGrid 55 3.11.1 制作一个简单的EditorGrid 55 3.11.2 添加一行数据 56 3.11.3 保存修改结果 58 3.11.4 验证EditGrid中的数据 59 3.11.5 限制输入数据的类型 60 ...
ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。 功能丰富,无人能出其右 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列...
优美的表格化数据显示,用户可用鼠标拖动方便地改变各列的宽度支持客户端表格排序,只需单击要排序列的表头。并且支持设置列的数据类型(数字、字符串、日期),按类型排序页面所有数据操作全部采用Ajax技术后台处理...
舒服的后台可以让你轻松地编辑表格数据。表格可以包含任何数据类型。表格可以用在文章、数据以及挂件中,还可以导入导出为 CSV,XML,HTML等格式。 WP-Table Reloaded安装使用: 1.下载WP-Table Reloaded 插件,...
jqGrid是一款基于jQuery的功能强大的表格插件,使用jqGrid可以轻松实现前端页面与后台数据进行ajax异步通信,jqGrid运行速度相当快,可以很好的应用在一些后台管理系统来管理大量数据的场合。 jqGrid特性: 基于...
PHPGRID不仅具有数据添加编辑删除的基本功能,还具有表单自动生成,排序,分页,查询,权限设定,缓存的功能,而且这些功能是可定制的。 对于特殊或则复杂的业务的需求,您只需编写少量的代码来继承于PHPGRID。
一个基于SSM的通用后台管理系统,可以快速接...3:表格排序功能 4:解决dialog窗口拖动时,阴影变大问题 5:加入druid技术,对sql语句的监控. 6:自定义注解导出excel 7:使用了ehcache缓存机制 8:新增支持oracle分页实现
Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能:...现在做的一个app管理以及后台配置系统,需要针对不同的...
这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。主要特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持...
完全支持 SASS: Gull 实现了 bootstrap 4 sass。样式和自定义方案是用 sass 编写的。 预建应用程序: Gull 有 4 ...数据表:数据表以干净的表格格式显示一组数据,带有服务器/前端分页选项。用户可以搜索和排序数据。