`
Franciswmf
  • 浏览: 800178 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

easyui datagrid pagination 自定义分页

 
阅读更多
//=================================================================初始化
$(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');
				}
	   
   }


分享到:
评论

相关推荐

    JS EasyUI DataGrid动态加载数据

    JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件,它提供了丰富的功能,如数据分页、排序、过滤和自定义操作等。在实际应用中,动态加载数据是DataGrid的一个重要特性,允许用户在需要时加载更多的...

    EasyUI DataGrid及Pagination(源码)

    Pagination分页功能是DataGrid处理大数据量时的关键组件。当数据量过大,一次性加载所有数据会影响页面性能和用户体验时,Pagination就显得尤为重要。通过Pagination,用户可以逐页查看数据,而服务器只需要返回当前...

    easyui datagrid 分页查询样例

    EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的功能,如表格布局、数据分页、排序、过滤等,常用于Web应用的数据展示。在本项目中,"easyui datagrid 分页查询样例"是利用EasyUI Datagrid与...

    jQuery EasyUI datagrid实现本地分页的方法

    本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。 这里重点用到了pagination的监听...

    easyui datagrid实现实现上下左右和回车切换单元格

    DataGrid 是 EasyUI 中一个非常重要的组件,它可以用来展示大量的表格数据,并且支持分页、排序、搜索等常用功能。DataGrid 不仅可以展示静态数据,还可以动态加载服务器返回的数据。通过使用 DataGrid,开发者能够...

    jquery自制分页,控制easyui datagrid分页,集中处理了一下前后台

    在这个示例中,你可以找到 HTML、CSS 和 JavaScript 文件,它们共同展示了如何利用 jQuery 和 EasyUI 创建一个具备自定义分页功能的 DataGrid。 通过以上步骤,我们可以在不依赖 EasyUI 内置分页组件的情况下,完全...

    easyui DataGrid动态编辑

    在本文中,我们将深入探讨EasyUI的DataGrid组件如何实现动态编辑功能。EasyUI是一个基于jQuery的前端框架,它提供了一系列轻量级、易于使用的UI组件,DataGrid就是其中之一,常用于展示和管理表格数据。 DataGrid是...

    jQuery EasyUI Pagination实现分页的常用方法

    EasyUI 提供了两种主要的服务器端分页机制,这两种方法都在 datagrid 中实现。 一、使用 datagrid 默认机制 这种机制下,datagrid 会自动通过 POST 请求向服务器发送 `rows` 和 `page` 参数,其中 `rows` 表示每页...

    .net 使用easyUI_DataGrid分页

    在EasyUI的DataGrid中,分页功能可以通过设置`pagination`属性为`true`来开启。 下面是一段基本的HTML和JavaScript代码示例,展示了如何创建一个具有分页功能的DataGrid: ```html &lt;table id="dg" class="easyui-...

    EasyUI的DataGrid显示ASP.NET内容

    pagination: true, // 开启分页 fitColumns: true, // 自动调整列宽 columns: [[ { field: 'id', title: 'ID', width: 50 }, { field: 'name', title: '姓名', width: 100 }, // ... 其他列定义 ]] }); }); ...

    JqueryEasyUI DataGrid例子

    在网页开发中,jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了丰富的用户界面组件,如 DataGrid,用于创建交互式、数据...此外,还可以通过扩展 EasyUI 的功能,实现更多自定义功能,如自定义过滤、排序等。

    easyui Datagrid 数据列表比较上一个上传的增加了超链接并传值、条件清空、日期控件清空和数据修改功能

    分页是Datagrid的标准特性,通过设置`pagination`属性启用。可以配置每页显示的记录数,以及通过`onPageChange`事件处理分页操作。 7. **数据修改**: Datagrid支持行内编辑,用户可以直接在表格中修改数据。通过...

    easyui帮助手册datagrid

    10. **pagination**:分页功能的开关,开启后会在底部显示分页工具栏。 11. **rowNumbers**:显示行号的选项,开启后每行前面会有编号。 12. **singleSelect**:如果设置为 `true`,用户只能选择一行。 13. **...

    easyUidataGrid

    `easyUidataGrid`是一个基于`EasyUI`框架的数据网格组件的使用示例,适合初学者学习和使用。`EasyUI`是一个轻量级的前端JavaScript库,它基于jQuery,提供了丰富的用户界面组件,包括数据网格、下拉框、表单、窗口等...

    SSh结合Easyui实现Datagrid的分页显示(多个实例)

    使用Easyui的Datagrid组件创建表格,设置分页属性如`pagination`、`pageSize`等。同时,配置请求参数,如`url`指向Action的处理方法。 8. **Ajax请求与JSON响应**: Datagrid通过Ajax请求获取服务器端数据,...

    解决easyui datagrid控件的日期显示问题1

    在这个例子中,`url`属性指定了请求的路径,`fitColumns`、`singleSelect`、`pagination`等其他属性则是datagrid的配置项,用于控制列宽、单选、分页等功能。 5. **数据格式化**: `formatterdate`函数展示了如何...

    jQuery-easyUI pagination分页与普通table结合例子

    在本文中,我们将深入探讨如何将jQuery EasyUI的pagination分页功能与普通的HTML表格结合使用。jQuery EasyUI是一个基于jQuery的轻量级框架,它提供了一系列的UI组件,包括分页,这对于处理大量数据的展示非常有用。...

    easyui DataGrid 数据表格 属性

    6. **pagination**:是否启用分页功能,如果为 true,则会在 DataGrid 底部显示分页控件。 7. **pageList**:定义分页控件显示的页码列表,例如 [10, 20, 50]。 8. **pageSize**:每页显示的数据条数,默认值通常为 ...

    jquery_easyui_DataGrid分页操作

    EasyUI 提供了内置的分页样式,你可以自定义分页工具栏的显示,例如,你可以决定是否显示“跳到第 X 页”的输入框,是否显示每页显示条数的下拉框,以及是否显示“总计”、“上一页”、“下一页”等按钮。...

Global site tag (gtag.js) - Google Analytics