- 浏览: 330887 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
di1984HIT:
谢谢,写的不错。
使用hector操作Cassandra -
mr_von:
非常感谢!
paoding的分词使用 -
howgoo:
http://www.dhtmlx.com/docs/prod ...
dhtmlxGrid分页与排序 -
青春的、脚步:
谢谢
spring-data-mongodb的MongoTemplate 使用小例子 -
青春的、脚步:
xiaofancn 写道青春的、脚步 写道这个能查询都个值在某 ...
spring-data-mongodb的MongoTemplate 使用小例子
1、服务端处理的Conntllor
package com.snailteam.reporting.web; import java.util.ArrayList; import java.util.List; import javax.annotation.Resource; import javax.validation.Validator; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import com.snailteam.reporting.domain.DataSource; import com.snailteam.reporting.domain.json.JsonRow; import com.snailteam.reporting.domain.json.JsonTable; import com.snailteam.reporting.service.DataSourceService; import com.snailteam.reporting.util.PojoMapper; /** * @Description:异步请求,dhtmlGrid数据的处理 * * @Author: xiaofancn * @Date: 2011-7-20 上午10:51:01 * */ @Controller @RequestMapping("/ajax") public class Ajax { private Logger logger = LoggerFactory.getLogger(Ajax.class); private Validator validator; @Resource private transient DataSourceService dataSourceService; @Autowired public Ajax(Validator validator) { this.validator = validator; } /** * 根据页面请求的起始页和数量参数 返回json对象,spring负责将对象序列化成json * * @param posStart * @param count * @return */ @RequestMapping(value = "/ds", method = RequestMethod.GET) @ResponseBody // JsonTable是我封装好的对象,页面dhtmlxGrid脚本能够识别的Json格式 public JsonTable loadDataSources(Integer posStart, Integer count, @RequestParam(required = false) String orderby, @RequestParam(required = false) String direct) throws Exception { JsonTable table = new JsonTable(); List<JsonRow> rows = new ArrayList<JsonRow>(); if (direct != null && !direct.equals("asc")) direct = "DESC"; // DataSource是我们项目中的实体 List<DataSource> lists = dataSourceService.loadDataSources(posStart, count, orderby, direct); if (lists == null) return null; for (DataSource ds : lists) { JsonRow row = new JsonRow(); List<String> datas = new ArrayList<String>(); row.setId(ds.getId()); datas.add(ds.getId().toString()); datas.add(ds.getName()); datas.add(ds.getDescription()); datas.add(ds.getJdbcDriver()); datas.add(ds.getJdbcPassword()); datas.add(ds.getJdbcUserName()); datas.add(ds.getJdbcUrl()); rows.add(row); row.setData(datas); } table.setPos(posStart); table.setRows(rows); table.setTotal_count(dataSourceService.getCount().intValue()); //测试代码 System.out.println(PojoMapper.toJson(table, true)); return table; } }
2、页面端的代码
<html> <head> <title>小例子</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=8"> <link rel="stylesheet" href="/base/static/style/blueprint/screen.css" type="text/css" charset="UTF-8" media="screen, projection"> <link rel="stylesheet" href="/base/static/style/blueprint/print.css" type="text/css" charset="UTF-8" media="print"> <link rel="stylesheet" type="text/css" href="/base/static/dhtmlx/3.0/dhtmlx.css" charset="UTF-8"> <link rel="SHORTCUT ICON" href="/base/static/imgs/favicon.ico"><script src="/base/static/dhtmlx/3.0/dhtmlx.js" type="text/javascript" charset="UTF-8"></script> <script src="/base/static/jquery-1.6.js" type="text/javascript" charset="UTF-8"></script> <script src="/base/static/jquery.form.js" type="text/javascript" charset="UTF-8"></script> <script src="/base/static/mvcUtil.js" type="text/javascript" charset="UTF-8"></script> <script src="/base/static/dhtmlx/3.0/dhtmlxgrid_json.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" charset="UTF-8"> var webStatic = "/base/static/"; var dhxSkin = "dhx_skyblue"; var webroot = "/base/"; var dhxImagePath = "/base/static/dhtmlx/3.0/imgs/"; </script> <script src="/base/static/dataSource/initDhtmlDrid.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <table width="500px" id="paging_container"> <tr> <td id="recinfoArea"><!--页数信息--></td> </tr> <tr> <td> <div id="gridbox" style="widht:100%; height:150px; background-color:white;overflow:hidden"><!-- --></div> </td> </tr> <tr> <td id="pagingArea"><!--页数区域 --></td> </tr> </table> </body> </html>
3、我们的脚本 static/dataSource/initDhtmlDrid.js
var mygrid; var mygridUrl = webroot + "ajax/ds?un="+ Date.parse(new Date()); $(document).ready(function() { //初始化Grid表格 doInitGrid(); //注册Grid表格的排序事件 mygrid.attachEvent("onBeforeSorting", sortGridOnServer); }); function doInitGrid() { mygrid = new dhtmlXGridObject('gridbox'); mygrid.setImagePath(webroot + "static/dhtmlx/3.0/imgs/"); // 指定图片路径 mygrid .setHeader("id,name,description,jdbcDriver,jdbcUserName,jdbcPassword,jdbcUrl"); // 设置表头显示 mygrid.init(); //设置可排序的字段 mygrid.setColSorting("id,name"); //允许分页 mygrid.enablePaging(true, 18, 5, "pagingArea", true, "recinfoArea"); mygrid.load(webroot + "ajax/ds?posStart=0&count=18&un=" + Date.parse(new Date()), "json"); mygrid.xmlFileUrl=webroot + "ajax/ds";//分页时,dhtmlxGrid能自动为我们添加参数如posStart和count } function sortGridOnServer(ind, gridObj, direct) { mygrid.clearAll(); mygrid.load(webroot + "ajax/ds?posStart=0&count=18&un=" + Date.parse(new Date())+ "&orderby=" + gridObj + "&direct=" +direct ,"json"); mygrid.xmlFileUrl=webroot + "ajax/ds"; mygrid.setSortImgState(true, gridObj, direct); return true; }
4、显示效果
参考代码构造的json对象
package com.snailteam.reporting.domain.json; import java.util.List; public class JsonRow { Object id; Object data; public Object getId() { return id; } public void setId(Object id) { this.id = id; } public Object getData() { return data; } public void setData(Object data) { this.data = data; } } public class JsonTable { List<JsonRow> rows; int total_count; int pos; public int getPos() { return pos; } public void setPos(int pos) { this.pos = pos; } public int getTotal_count() { return total_count; } public void setTotal_count(int total_count) { this.total_count = total_count; } public List<JsonRow> getRows() { return rows; } public void setRows(List<JsonRow> rows) { this.rows = rows; } }
dhtmlxGrid项目参考代码
// 初始化角色信息的dhtmlxGrid function initRoleGrid() { roleGrid = new dhtmlXGridObject('roleGrid'); roleGrid.setHeader(" ,角色名,角色类型"); //允许可以选中多行 roleGrid.enableMultiselect(true); roleGrid.enableMultiline(true); roleGrid.setImagePath(webroot + "static/dhtmlx/3.0/imgs/"); //第一类设置checkbox显示(数据为1,0) roleGrid.setColTypes("ch,ro,ro"); roleGrid.init(); roleGrid.load(webroot + "user/roles?&un=" + Date.parse(new Date()) + "&userId=" + $("#userId").val(), "json"); roleGrid.xmlFileUrl = webroot + "user/roles"; } //获取所有行id数组对象 function getSelectRowId() { var idArray = new Array(); //根据索引遍历所有的行 for ( var index = 0; index < roleGrid.getRowsNum(); index++) { var ch = roleGrid.cellByIndex(index,0);//index行,第一列 if (ch.isChecked()) {//checkbox是否选中 idArray.push(roleGrid.getRowId(index));// 获取index行的Id属性值 } } return idArray; }
评论
3 楼
howgoo
2012-12-26
http://www.dhtmlx.com/docs/products/dhtmlxGrid/editions.shtml
免费版不支持分页,我晕。。。
免费版不支持分页,我晕。。。
2 楼
yspl66
2012-09-27
能不能把程序包发我邮箱359164636@qq.com,十分感谢,我就想看下json格式,我做的xml可以显示总页数,但是用json做就不行了。
1 楼
sjx84110
2012-08-12
enablePaging方法在3.5里面有么?
发表评论
-
spring cloud gateway 全局过滤器。
2019-03-17 23:11 526spring cloud gateway 网关 ... -
elasticsearch 5.4搜索
2017-05-19 08:37 148@Test public void t ... -
netty简单的操作memcached
2017-04-19 18:59 974pom文件 <dependency> ... -
juc系列-Executor框架
2017-03-20 13:34 697转自 juc系列-Executor框架 什 ... -
ReentrantLock 类
2017-03-19 21:11 11.1 什么是reentrantlock java.u ... -
juc之CountDownLatch、CyclicBarrier和Semaphore例子
2017-03-19 17:23 832import java.util.concurren ... -
netty客户端与服务端例子
2017-03-12 20:07 2797package com.snailteam.nett ... -
freemaker集成spring
2017-02-26 19:00 567<bean id="freeMark ... -
spring集成Hessian插件配置改成自动注入。
2017-02-10 15:39 834原来的配置 <bean name="/ ... -
web开发模版
2017-02-09 14:42 0# Rules reminder: # DEBUG &l ... -
Java多线程
2017-02-04 14:39 515线程状态图 新建状态(New): ... -
hash冲突解决
2017-01-23 18:30 4531、开放地址法有一个公式: m是hash表长度,di ... -
mybatis +spring 分库
2015-04-30 17:56 353<context:component-scan b ... -
Java并发任务处理例子
2014-02-12 16:06 1125public void init() { su ... -
JAVA动态代理模式
2012-10-03 01:01 1183这是我要实现的效果 public static ... -
paoding的分词使用
2012-06-13 21:30 4864paoding下载 http://code.googl ... -
使用spring-hadoop操作hadoop
2012-05-20 02:12 32参考文章 http://blog.springsource. ... -
solr3.5集成paoding和位置搜索及对solrj的使用。
2012-04-28 02:12 1978http://xiaofancn.iteye.com/blog ... -
日期处理DateUtils
2012-03-24 09:47 4810import java.text.SimpleDateF ... -
Cassandra的数据分布情况测试
2012-03-16 15:09 20321、规划种子节点ip和Token值的对应 4个种子 ...
相关推荐
本篇文章将深入探讨DHTMLX Grid中的数据复制和分页栏跳转功能。 一、DHTMLX Grid的复制功能 DHTMLX Grid的复制功能允许用户方便地选取并复制表格中的数据。这在处理大量信息时非常实用,用户可以快速地将表格数据...
1. **分页功能**:dhtmlxGrid 1.4 Pro支持分页显示数据,这在处理大数据集时尤为重要,它可以提高网页性能,减少服务器负载,并提供良好的用户体验。用户可以轻松切换页面,查看不同部分的数据。 2. **数据编辑**:...
9. **API与插件**:dhtmlxGrid具有完善的API,可以通过JavaScript调用方法进行操作。同时,它还支持插件系统,可以扩展更多功能。 10. **响应式设计**:适应不同设备屏幕尺寸,支持移动设备和触摸操作。 在描述中...
此外,dhtmlxGrid还提供了与其他数据库交互的途径,能够对单元格进行扩展,类似EXCEL,并且具备拆分模式,也称作冻结栏。本文将详细介绍dhtmlxGrid的功能和API操作方法。 #### dhtmlxGrid介绍 1. **自定义XML**: ...
dhtmlxGrid可以与其他dhtmlx库中的组件(如dhtmlxCalendar、dhtmlxCombo)无缝集成,提供更丰富的交互体验。 **6. API与事件处理** 尽管v2.0的手册缺乏搜索功能,但开发者仍然可以通过查阅API文档,了解每个方法、...
3. **分页**:对于大量数据,dhtmlxGrid可以实现分页显示,以优化性能和用户体验。 4. **数据格式化**:dhtmlxGrid允许自定义单元格和行的样式,以及数据的显示格式,使数据呈现更加美观和直观。 5. **拖放功能**...
- **数据绑定**:dhtmlxGrid可以与多种数据源绑定,包括本地数组、JSON对象或远程服务器端点,确保数据的实时更新和同步。 - **性能优化**:在处理大量数据时,dhtmlxGrid提供了分页、虚拟滚动等特性,有效提升了...
1. **数据操作**:dhtmlxGrid支持动态加载、分页、排序、过滤、搜索等功能,使得用户可以轻松地浏览和操作大量数据。 2. **编辑功能**:内置多种编辑器(文本、下拉框、日期选择器等),允许用户直接在单元格内进行...
5. **分页**:dhtmlxGrid提供分页功能,帮助用户管理和浏览大量数据,提高页面响应速度。 6. **拖放操作**:支持列的拖放调整,以及行的拖放排序,增强了用户体验。 7. **API支持**:dhtmlxGrid拥有丰富的API,...
在实际应用中,dhtmlxGrid通常与其他dhtmlx组件结合使用,构建完整的前端应用框架。例如,可以与dhtmlxForm结合处理表单数据,或与dhtmlxCalendar配合展示日期选择功能。此外,dhtmlxGrid也可以与后端框架,如PHP、...
排序与过滤:** 用户可以通过点击列头进行升序或降序排序。同时,`dhtmlxGrid` 支持列过滤,通过设置条件筛选出满足特定要求的数据。 **6. 内置搜索功能:** 内建的搜索功能使用户能够在整个表格或指定列中查找...
- **表格布局**:dhtmlxGrid允许用户以表格形式展示大量数据,支持多列、排序、分页等功能。 - **自定义列头**:可以设置自定义的列头文字、图标和样式,以适应不同需求。 - **行和列的可调整**:用户可以自由...
DhtmlXGrid是一款功能强大的JavaScript表格控件,它允许开发者在网页中创建复杂的数据网格,支持数据的排序、过滤、编辑、分页等操作。经过改造后的DhtmlXGrid控件,更加强调了对JavaScript表格一般需求的满足,提高...
通过dhtmlxConnector,开发者可以轻松地将dhtmlxGrid2.1与其他dhtmlx组件的数据操作功能与服务器端逻辑结合。 **四、核心文件详解** 1. **dhtmlxgrid.css**:这是dhtmlxGrid的样式表文件,包含了表格的各种样式...
5. **集成其他dhtmlx库**:dhtmlxGrid能与dhtmlxSuite中的其他组件(如dhtmlxCalendar、dhtmlxChart等)无缝集成,扩展应用功能。 6. **多语言支持**:支持多语言界面,方便全球化的应用程序开发。 7. **皮肤定制*...
dhtmlxGrid是这个项目的关键技术,它是一个功能丰富的JavaScript数据网格组件,支持大量的特性,如数据分页、排序、过滤、编辑、拖放以及自定义列格式。它允许开发者在前端实现复杂的数据管理和展示,提供了良好的...
4. **排序与过滤**:允许用户对数据进行列排序,并支持自定义过滤条件,便于数据筛选。 5. **拖放功能**:允许用户通过拖放操作调整列的顺序,甚至可以将行或数据单元格拖放到其他位置。 6. **扩展性**:dhtmlx...
- **排序与过滤**:支持多列排序和动态过滤,便于用户快速查找所需信息。 - **分页与虚拟滚动**:实现大量数据的高效加载,提供分页功能,对于大数据集,使用虚拟滚动提高性能。 - **拖放操作**:允许用户通过...