zoukankan      html  css  js  c++  java
  • JQuery easyui Datagrid 分页事件

    easyui是Jquery中的一个轻量级UI插件,提供了一些诸如window、datagrid、button等控件。现在主要说说Datagrid中分页控件的使用。

    easyui中可以单独添加分页pagination控件,也可以在datagrid中添加paginatio控件。

    如在datagrid中添加分页控件:

    view plaincopy to clipboardprint? $('#tt').datagrid({        title:'Load Data',        iconCls:'icon-save',        600,        height:250,         url:'/demo3/data/getItems' ,        columns:[[            {field:'itemid',title:'Item ID',80},            {field:'productid',title:'Product ID',80},            {field:'listprice',title:'List Price',80,align:'right'},            {field:'unitcost',title:'Unit Cost',80,align:'right'},            {field:'attr1',title:'Attribute',100},            {field:'status',title:'Status',60}        ]],        pagination:true //这里添加分页控件    });   $('#tt').datagrid({     title:'Load Data',     iconCls:'icon-save',     600,     height:250,      url:'/demo3/data/getItems' ,     columns:[[         {field:'itemid',title:'Item ID',80},         {field:'productid',title:'Product ID',80},         {field:'listprice',title:'List Price',80,align:'right'},         {field:'unitcost',title:'Unit Cost',80,align:'right'},         {field:'attr1',title:'Attribute',100},         {field:'status',title:'Status',60}     ]],     pagination:true //这里添加分页控件 });
    

    可以扑捉分页的触发事件,方法如下:

    view plaincopy to clipboardprint? var pg = $("#tt").datagrid("getPager");    if(pg)    {       $(pg).pagination({           onBeforeRefresh:function(){               alert('before refresh');        },           onRefresh:function(pageNumber,pageSize){               alert(pageNumber);               alert(pageSize);            },           onChangePageSize:function(){               alert('pagesize changed');            },           onSelectPage:function(pageNumber,pageSize){               alert(pageNumber);               alert(pageSize);            }       });    }   var pg = $("#tt").datagrid("getPager"); if(pg) {    $(pg).pagination({        onBeforeRefresh:function(){            alert('before refresh');  },        onRefresh:function(pageNumber,pageSize){            alert(pageNumber);            alert(pageSize);         },        onChangePageSize:function(){            alert('pagesize changed');         },        onSelectPage:function(pageNumber,pageSize){            alert(pageNumber);            alert(pageSize);         }    }); }

    在触发onChangePageSize事件时,会同时触发onSelectPage事件。onSelectPage事件会传递2个参数pageNumber、pageSize.

    pageSize是页大小,pageNumber为下一次显示的页号,默认从第一页开始。

  • 相关阅读:
    金色酒类企业dedecms模板
    hdu 1533 最小费用最大流
    计算几何算法
    博弈总结
    图搜索总结
    一般图匹配题集 转自夏天的风
    极大极小过程题集 转自夏天的风
    dancing links 题集转自夏天的风
    网络流题集转自夏天的风
    nyoj 547 优先队列
  • 原文地址:https://www.cnblogs.com/Brainpan/p/5282907.html
Copyright © 2011-2022 走看看