- 浏览: 800119 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (480)
- Spring (12)
- Hibernate (8)
- Struts2 (4)
- Java 基础-JDK-类-接口-URI-专题研究 (27)
- 线程、线程池、多线程高并发高可用、Socket通信 (15)
- Oracle数据库 (20)
- 一般-前端js-html-其它 (25)
- JYSK-互联网金融、金融科技、支付、公司、新闻等等 (8)
- Ajax-jQuery开源框架 (7)
- Json-轻量级的数据交换格式 (14)
- JavaScript (15)
- Jsp、Servlet、Servlet+JSP+JavaBean开发模式(MVC) (18)
- Html-JavaScript-前端-调用接口 (12)
- Sql Server 2005 (6)
- 正则表达式 (2)
- Java tools (18)
- 加签与验签、加密与解密 (3)
- Ajax技术核心-xmlHttpRequest(简称XHR) (6)
- xml-数据交换格式 (3)
- 信息采集 (1)
- Http - Https - HttpClient - httpCore-SSL-TLS (10)
- HtmlParser (2)
- 标签库 (1)
- SMS (2)
- jxl-导入导出 (4)
- poi-导入导出 (2)
- 定时器Timer+Quartz (6)
- 工作流引擎JBPM3.2.3 (4)
- 工作流引擎JBPM4 (0)
- 数据源-JNDI (0)
- tomcat、weblogic等应用服务器 (6)
- 工作流引擎jbpm5 (1)
- 搜索引擎Lucene (1)
- ant (1)
- 大数据-HBase (2)
- bigtable (0)
- 数据库设计 (4)
- jquery tab (0)
- mybatis (5)
- jquery ui 1.10.3 (5)
- Jboss7 (1)
- 规则引擎drools (0)
- 工作流引擎Activiti5 (0)
- 数据库-用户自定义函数 (0)
- 数据库-存储过程 (2)
- 数据库-视图 (0)
- 数据库-触发器 (0)
- 数据库-sql (2)
- highcharts-图表工具 (1)
- sql server 2008 (6)
- 诗词-工作室 (2)
- 数据割接 (1)
- GIS-地理信息系统 (2)
- RS-遥感技术 (1)
- GPS-全球定位系统 (1)
- java整合flex_RIA开发 (3)
- C#编程语言 (5)
- webservice_axis2_cxf_soap_wsdl (2)
- sql语句 (3)
- Flex_WebService_GIS (25)
- PHP编程语言 (0)
- ExtJS4.2 (1)
- Spring mvc (5)
- EasyUI1.4.2 (16)
- 日期时间工具类 (4)
- 随机数 (1)
- Arcgis api for js (0)
- Mysql数据库 (9)
- 移动互联网 java html5/flash socket netty (0)
- API接口 (1)
- AndroidStudio (0)
- Git (2)
- Maven (5)
- IDEA (0)
- 大数据-Hadoop (2)
- JPA (0)
- Spring boot (4)
- JSF (0)
- nginx_lua_module_redis (2)
- Activiti (1)
- bootstrap (1)
- AngularJS (10)
- 数据库-索引 (1)
- Linux及其连接工具SSH (4)
- java日志管理 (2)
- islider滑动控件 (1)
- jquery (1)
- 异常处理Exception (1)
- 秒杀与类秒杀系统 (1)
- 连接数据库、数据库连接池 (4)
- 数据库-临时表 (1)
- 软件设计模式-单例、多例、代理、工厂、观察者 (3)
- 集合框架 (5)
- 人工智能--Artificial intelligence、神经网络算法、机器学习 (1)
- 分布式应用 (1)
- SOA服务-Dubbo框架-Thrift框架 (2)
- Zookeeper分布式服务框架 (2)
- intellij idea (1)
- python编程语言 (0)
- 消息队列_MQ (0)
- 消息队列_RabbitMQ (2)
- 消息队列_ActiveMQ (1)
- 消息队列_Kafka (2)
- 缓存_Redis (4)
- 缓存_Memcache (0)
- 缓存_Ehcache (0)
- ivy-ivyde (1)
- google-protocol buffers (1)
- 正向代理-正向代理服务器 (1)
- 反向代理-反向代理服务器 (1)
- JVM内存模型 (0)
- Thunder框架 (1)
- NIO-非阻塞式IO (0)
- 软件测试、性能测试 (1)
- 序列化、Serializable接口、Externalizable接口 (3)
- 线程池-ExecutorService-ThreadPoolExecutor (1)
- web.xml (1)
- java开发-java工具-实用工具网站 (6)
- 医疗 (1)
- Filter-过滤器 (2)
- Unicode码-双字节字符编码 (1)
- OpenResty (1)
- 计算机网络 (1)
- eclipse_myeclipse_intellij idea (3)
- Enum (1)
- 大数据--Big Data (1)
- 云计算--Cloud computing (1)
- Elastic-Job (1)
- Redis (2)
- 文件流-IO操作 (6)
- 计算机基础知识 (1)
- Hessian-二进制RPC协议 (1)
- String类 (3)
- BigDecimal类 (1)
- java重要接口 (1)
- ReactJS (1)
- 跨域问题 (0)
- Map (1)
- 注解 (1)
- ASCII码-单字节字符编码 (1)
- 微服务、微服务架构 (2)
- RPC协议、RPC服务、RPC框架 (0)
- java反射 (1)
- java项目之classpath (1)
- 经典算法-树 (1)
- listener-监听器 (1)
- Interceptor-拦截器 (1)
- pojo javabean (2)
- 计算机科学与技术-进阶 (1)
- 代码规范与文档编写 (1)
- UML-统一建模语言 (1)
- 对接微信、支付宝 (3)
- 压力测试 (1)
- 办公软件-Excel (1)
- 办公软件-PPT (0)
- UTF8、GBK编码 (1)
- 微服务架构:Spring Cloud架构-Dubbo架构 (6)
- Nginx (1)
- 点滴业务 (1)
- form表单-json数据-转换与接口调用 (1)
- Junit单元测试 (1)
- 大数据-Spark (1)
- 大数据-Storm (1)
- 数据库事务-Spring事务 (0)
- elasticsearch (1)
- windows (1)
最新评论
//=================================================================初始化 $(function() { //获取乙方 下拉 $("#companyname").combobox({ url : sunny.contextPath + "/company/getByType.do?typeid=2", valueField : 'id', textField : 'companyname', filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) > -1; } }); //全选 $("#chkAllId").click(function () { //alert('al'); if($('#chkAllId').is(':checked')){ $("input[name='chkName']").prop("checked", true); } else { $("input[name='chkName']").prop("checked", false); } }); // $("input[readOnly]").keydown(function(e) { e.preventDefault(); }); //默认查询 queryData('',1,10);//查询框的值-第几页-每页多少条 // //获取页面分页对象 var p = $('#grid').datagrid('getPager'); if (p){ $(p).pagination({ beforePageText: '第', afterPageText: '页 共 {pages}页', displayMsg: '显示 {from}到{to} ,共 {total}条记录', onSelectPage:function (page,pageSize) { queryData('',page,pageSize); } }); } // }); //================================================================= //根据条件进行查询 var queryByCondition=function(){ //获取显示的文本属性:$("#companyname").textbox('getText') //获取未显示的值:$("#companyname").textbox('getText') //获取grid的当前分页信息 var pageopt = $('#grid').datagrid('getPager').data("pagination").options; // alert('size:'+pageopt.pageSize+',pageNumber:'+pageopt.pageNumber); queryData($("#companyname").textbox('getText'),pageopt.pageNumber,pageopt.pageSize); } //================================================================= function queryData(companyname,pageNumberV,pageSizeV){ //grid grid = $('#grid').datagrid({ //title:'单位信息列表', loading:false, url : sunny.contextPath + '/company/list.do', queryParams:{ pageNumber:pageNumberV, pageSize:pageSizeV, companyname:companyname }, striped : true, rownumbers : true, pagination : true, singleSelect: false, selectOnCheck: true, checkOnSelect: true, fitColumns : true, fit:true, idField : 'id', sortName : 'id', sortOrder : 'desc', pageNumber:pageNumberV, pageSize:pageSizeV, pageList : [ 5,10, 20, 30, 40, 50, 100, 200, 300, 400, 500,1000,10000,20000], columns : [ [ { title : '主键', field : 'id', hidden : true }, { width : '40', title: '<input id=\"chkAllId\" type=\"checkbox\" >', field : 'codeChk', formatter: function (value, rec, rowIndex) { return "<input type=\"checkbox\" name=\"chkName\" value=\"" + rec.id + "\" >"; } }, { title : '单位名称', field : 'companyname', width: 200 }, { title : '单位类型', field : 'companytype', width: 60, formatter:function(value,row){ if(value=='2') return "乙方"; if(value=='1') return "甲方"; } } , { title : '单位负责人', field : 'companyresponsible', width: 70 }, { title : '联系电话', field : 'telphone', width: 120 }, { title : '单位地址', field : 'address', width: 180 },{ title : '操作', field : 'action', formatter : function(value, row, index) { var str = ''; str += sunny.formatString('<img class="iconImg ext-icon-note" title="查看" onclick="viewCompanyInfo(\'{0}\');"/>', row.id); //if (securityUtil.havePermission("/security/user!update")) {%> str += sunny.formatString('<img class="iconImg ext-icon-note_edit" title="编辑" onclick="editFun(\'{0}\');"/>', row.id); //}%> //if (securityUtil.havePermission("/security/user!grantRole")) {%> //}%> //if (securityUtil.havePermission("/security/user!grantOrganization")) {%> //}%> //if (securityUtil.havePermission("/security/user!delete")) {%> str += sunny.formatString('<img class="iconImg ext-icon-note_delete" title="删除" onclick="deleteFun(\'{0}\');"/>', row.id); //}%> return str; } } ] ], toolbar : '#toolbar', loadMsg:'数据加载中....', onBeforeLoad : function(param) { //parent.$.messager.progress({ // text : '数据加载中....' //}); }, onLoadSuccess : function(data) { isDatagridEmpty(); //$('#grid').datagrid('loadData', jQuery.parseJSON(data)); //var pager = $('#grid').datagrid('getPager'); //pager.pagination({ //更新pagination的导航列表各参数 // total:total,//总数 // pageSize: pageSize,//行数 // pageNumber: pageNumber//页数 // }); //$('.iconImg').attr('src', sunny.pixel_0); //parent.$.messager.progress('close'); }, onDblClickRow: function (rowIndex, rowData) { viewCompanyInfo(rowData.id); } }); } //=================================================================数据库无记录 function isDatagridEmpty(){ var len=$('#grid').datagrid('getRows').length; if(len==0){ $.messager.alert('系统提示','<font size=\"2\" color=\"#666666\"><strong>数据库暂无记录!</strong></font>','infoSunnyIcon'); } }
发表评论
-
Easyui tree 异步加载
2016-06-01 10:21 15201、效果图 【图1】 【图2】 2、js代码 $(f ... -
easyui datagrid 动态表头 动态columns 的一种实现方式
2016-05-23 18:09 9465function doUpgradeDataQueryFu ... -
easyui datagrid数据查询
2016-05-18 13:56 921function doFirstQueryFun(){ ... -
easyui datebox formatter parser
2015-10-13 15:42 1503//年月日 function myformatter(dat ... -
amcharts与easyui datagrid实现值班数量统计
2015-09-11 15:37 1764效果: 代码: <script> var ... -
easyui datagrid rowedit点击编辑行
2015-08-27 11:14 1740onClickRow: function (index, r ... -
easyui dialog 修改title
2015-08-25 19:47 1414方式一: parent.$('#monthDutyAddDi ... -
easyui dialog关闭窗口最好使用destroy而不推荐使用close
2015-08-24 16:05 2758http://blog.csdn.net/maosijunzi ... -
easyui datagrid 数据源获取与表格渲染 demo1 demo2
2015-08-20 14:19 4632demo1:表格和数据同步 $(function() { ... -
easyui messager alert 3秒后自动关闭提示
2015-08-20 10:24 2340function isDatagridEmpty_duty( ... -
easyui datagrid 前台批量传递数据到后台_json
2015-08-19 09:28 2065前台: var rows = $('#mygrid ... -
easyui dialog 子窗口jsp(被弹出窗口)调用父jsp页面方法操作父jsp
2015-08-14 18:08 14535父jsp(monthDuty.jsp'): <scrip ... -
easyui datagrid loadFilter loadData
2015-08-05 17:10 1576不使用loadFilter(弄了半天没反应),直接使用load ... -
easyui messager show和confirm
2015-07-10 17:32 2256//show var sho ... -
jquery easui tabs注册完刷新另一个tabs
2015-07-10 16:21 881========思路:没有的话直接添加,自动刷新;有的话先关闭 ...
相关推荐
JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件,它提供了丰富的功能,如数据分页、排序、过滤和自定义操作等。在实际应用中,动态加载数据是DataGrid的一个重要特性,允许用户在需要时加载更多的...
Pagination分页功能是DataGrid处理大数据量时的关键组件。当数据量过大,一次性加载所有数据会影响页面性能和用户体验时,Pagination就显得尤为重要。通过Pagination,用户可以逐页查看数据,而服务器只需要返回当前...
EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的功能,如表格布局、数据分页、排序、过滤等,常用于Web应用的数据展示。在本项目中,"easyui datagrid 分页查询样例"是利用EasyUI Datagrid与...
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。 这里重点用到了pagination的监听...
DataGrid 是 EasyUI 中一个非常重要的组件,它可以用来展示大量的表格数据,并且支持分页、排序、搜索等常用功能。DataGrid 不仅可以展示静态数据,还可以动态加载服务器返回的数据。通过使用 DataGrid,开发者能够...
在这个示例中,你可以找到 HTML、CSS 和 JavaScript 文件,它们共同展示了如何利用 jQuery 和 EasyUI 创建一个具备自定义分页功能的 DataGrid。 通过以上步骤,我们可以在不依赖 EasyUI 内置分页组件的情况下,完全...
在本文中,我们将深入探讨EasyUI的DataGrid组件如何实现动态编辑功能。EasyUI是一个基于jQuery的前端框架,它提供了一系列轻量级、易于使用的UI组件,DataGrid就是其中之一,常用于展示和管理表格数据。 DataGrid是...
EasyUI 提供了两种主要的服务器端分页机制,这两种方法都在 datagrid 中实现。 一、使用 datagrid 默认机制 这种机制下,datagrid 会自动通过 POST 请求向服务器发送 `rows` 和 `page` 参数,其中 `rows` 表示每页...
在EasyUI的DataGrid中,分页功能可以通过设置`pagination`属性为`true`来开启。 下面是一段基本的HTML和JavaScript代码示例,展示了如何创建一个具有分页功能的DataGrid: ```html <table id="dg" class="easyui-...
pagination: true, // 开启分页 fitColumns: true, // 自动调整列宽 columns: [[ { field: 'id', title: 'ID', width: 50 }, { field: 'name', title: '姓名', width: 100 }, // ... 其他列定义 ]] }); }); ...
在网页开发中,jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了丰富的用户界面组件,如 DataGrid,用于创建交互式、数据...此外,还可以通过扩展 EasyUI 的功能,实现更多自定义功能,如自定义过滤、排序等。
分页是Datagrid的标准特性,通过设置`pagination`属性启用。可以配置每页显示的记录数,以及通过`onPageChange`事件处理分页操作。 7. **数据修改**: Datagrid支持行内编辑,用户可以直接在表格中修改数据。通过...
10. **pagination**:分页功能的开关,开启后会在底部显示分页工具栏。 11. **rowNumbers**:显示行号的选项,开启后每行前面会有编号。 12. **singleSelect**:如果设置为 `true`,用户只能选择一行。 13. **...
`easyUidataGrid`是一个基于`EasyUI`框架的数据网格组件的使用示例,适合初学者学习和使用。`EasyUI`是一个轻量级的前端JavaScript库,它基于jQuery,提供了丰富的用户界面组件,包括数据网格、下拉框、表单、窗口等...
使用Easyui的Datagrid组件创建表格,设置分页属性如`pagination`、`pageSize`等。同时,配置请求参数,如`url`指向Action的处理方法。 8. **Ajax请求与JSON响应**: Datagrid通过Ajax请求获取服务器端数据,...
在这个例子中,`url`属性指定了请求的路径,`fitColumns`、`singleSelect`、`pagination`等其他属性则是datagrid的配置项,用于控制列宽、单选、分页等功能。 5. **数据格式化**: `formatterdate`函数展示了如何...
在本文中,我们将深入探讨如何将jQuery EasyUI的pagination分页功能与普通的HTML表格结合使用。jQuery EasyUI是一个基于jQuery的轻量级框架,它提供了一系列的UI组件,包括分页,这对于处理大量数据的展示非常有用。...
6. **pagination**:是否启用分页功能,如果为 true,则会在 DataGrid 底部显示分页控件。 7. **pageList**:定义分页控件显示的页码列表,例如 [10, 20, 50]。 8. **pageSize**:每页显示的数据条数,默认值通常为 ...
EasyUI 提供了内置的分页样式,你可以自定义分页工具栏的显示,例如,你可以决定是否显示“跳到第 X 页”的输入框,是否显示每页显示条数的下拉框,以及是否显示“总计”、“上一页”、“下一页”等按钮。...