`
Franciswmf
  • 浏览: 777230 次
  • 性别: 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');
				}
	   
   }


分享到:
评论

相关推荐

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

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

    EasyUI DataGrid及Pagination(源码)

    介绍EasyUI的DataGrid数据表格以及Pagination分页 按照说明可直接运行代码. .

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

    EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用。 一、使用 datagrid 默认机制 后台: public JsonResult GetQuestionUnit() { //...

    EasyUI tutorial 中文版 chm

    easyUI自定义DataGrid分页栏 启用DataGrid行内编辑器 继承扩展DataGrid的editors easyUI在可编辑的datagrid中计算两列的值 easyUI合并DataGrid单元格 easyUI为datagrid创建自定义视图 easyUI datagrid...

    EasyUI Pagination 分页的两种做法小结

    EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,一种是datagrid默认机制,另一种是利用 Ajax 获取数据并填充 Datagrid,可根据情况具体使用。...

    easyui帮助手册datagrid

    pagination(分页) boolean(布尔型) 设置true将在数据表格底部显示分页工具栏。 false rownumbers(行数) boolean(布尔型) 设置为true将显示行数。 false singleSelect(单选模式) boolean(布尔型) 设置为...

    jQuery EasyUI开发指南 ,王波编

    在本书中,读者不但可以学到搜索框(searchbox)、进度条(progressbar)、提示框(tooltip)等功能性插件,还可以掌握布局(layout),以及强大的数据网格(datagrid)和分页(pagination)等插件。

    jQuery_EasyUI_中文教程 pdf

    在DataGrid上的复选框 本教程显示了你如何放置checkbox列。...自定义DataGrid分页 DataGrid内建分页能力是强大的,它比自定义相对容易。在这个教程,我们将要创建DataGrid并且在页面工具栏中添加一些自定义按钮。

    jQuery EasyUI 1.2.4 API 中文文档.chm

    Pagination 分页 SearchBox 搜索框 ProgressBar 进度条 Layout 布局 Panel 面板 Tabs 标签页/选项卡 Accordion 手风琴 Layout 布局 Menu and Button 菜单和按钮 Menu 菜单 LinkButton 链接按钮 MenuButton ...

    jQuery easyUI的教程

    8 Pagination(分页) 20 8.1 实例 20 8.2 参数 22 8.3 事件 23 9 Window(窗口) 23 9.1 实例 23 9.2 参数 25 9.3 事件 26 9.4 方法 26 10 Panel(面板) 26 10.1 实例 26 10.2 参数 28 10.3 事件 29 10.4 方法 29 ...

    jquery_datagrid

    myJqueryUI目前包括linkbutton(超链接按钮)、pagination(分页工具栏)、datagrid(数据表格)三个组件。是参考JqueryEasyUI的样式和布局结构,继承JqueryUI_widget实现的。

    jquery-easyui-EDT-1.5.5.7z

    pagination:修复在'displayMsg'属性设置为false的时候会缩小分页组件高度的问题; tabs:修复tab组件面板对象的'onLoad'事件中传递了错误的'data'参数的问题。 Improvement(改进) draggable:添加'onEndDrag'...

    jQuery+EasyUI+1.2.4+API+中文文档(标记).rar

    Pagination 分页 SearchBox 搜索框 ProgressBar 进度条 Layout 布局 Panel 面板 Tabs 标签页/选项卡 Accordion 手风琴 Layout 布局 Menu and Button 菜单和按钮 Menu 菜单 LinkButton 链接...

    jquery_easyui_cn文档

    8 Pagination(分页) 20 8.1 实例 20 8.2 参数 22 8.3 事件 23 9 Window(窗口) 23 9.1 实例 23 9.2 参数 25 9.3 事件 26 9.4 方法 26 10 Panel(面板) 26 10.1 实例 26 10.2 参数 28 10.3 事件 29 10.4 方法 29 ...

    jquery_easyui_cn 中文例子 和详解

    8 Pagination(分页) 20 8.1 实例 20 8.2 参数 22 8.3 事件 23 9 Window(窗口) 23 9.1 实例 23 9.2 参数 25 9.3 事件 26 9.4 方法 26 10 Panel(面板) 26 10.1 实例 26 10.2 参数 28 10.3 事件 29 10.4 方法 29 ...

    myJqueryUI_1.3.3

    myJqueryUI目前包括linkbutton(超链接按钮)、pagination(分页工具栏)、datagrid(数据表格)三个组件。是参考JqueryEasyUI的样式和布局结构,继承JqueryUI_widget实现的。

    myJqueryUI

    myJqueryUI目前包括linkbutton(超链接按钮)、pagination(分页工具栏)、datagrid(数据表格)三个组件。是参考JqueryEasyUI的样式和布局结构,继承JqueryUI_widget实现的。

    Web应用前端技术的探索与实践

    6.5.2.18 分页组件Pagination 151 6.5.2.18.1 效果 151 6.5.2.18.2 参数说明 152 6.5.2.19 文件上传组件 153 6.5.2.19.1 uploadify 153 6.5.2.19.2 swfUpload 159 6.5.2.20 消息提示、弹出广告组件 162 6.5.2.20.1 ...

Global site tag (gtag.js) - Google Analytics