博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于easyui中datagrid分页问题--摘
阅读量:6116 次
发布时间:2019-06-21

本文共 4136 字,大约阅读时间需要 13 分钟。

首先datagrid中的pagination属性设置为true: 如

$('#dg1').datagrid({    url:"{:U('Rearlogin/ajaxNoticeAll')}",    //请求后台的地址    fitColumns:true,    scrollbarSize:0,    singleSelect:true,    pagination:true,     //分页开关    pageNumber:1,        //初始页    rownumbers: true,    nowrap: false,    pageSize: 10,     //每页显示条数    pageList: [10, 20, 50, 100, 150, 200],   //每页显示条数供选项    showFooter: true,    striped : true,    //设置表格奇偶行颜色是否不同    onSelect:function(rowIndex,rowData){        $(":radio[name='radio_res'][value='"+rowIndex+"']").prop("checked",true);    },    onUnselect:function(rowIndex,rowData){        $(":radio[name='radio_res'][value='"+rowIndex+"']").prop("checked",false);    },    columns:[[        {field:'ck',title:'',formatter:function(value,rowData,rowIndex){            return "";        }},        {field:'n_id',title:'ID',sortable:true,width:100},        {field:'n_title',title:'公告标题',sortable:true,width:100},        {field:'n_pubdate',title:'发布时间',sortable:true,width:100}    ]] ,    toolbar:"#btn"});

每次会自动传输 pageNum和pageSize到你写的那个URL地址      

后台接收的时候是 page // 当前页数  和 rows //每页显示数目   两个数

然后根据这两个数就可以用 MySQL 中的 limit 方法 控制输出条数    还要得到数据的总条数 total   

两个数转换成 json 格式 返回给前台 就可以了。

附上后台返回:

{"total":"11","rows":[{"ID":"1","dtNumber":"ADDFSSA","dtTitle":"00","dtTheme":"演艺秀","dtFitTime":"上午","AddTime":"2014/12/15 15:26:40","operateID":"1"},{"ID":"2","dtNumber":"ADDFSSA","dtTitle":"纽约市徒步游,发现原汁原味的百老汇","dtTheme":"城市之旅","dtFitTime":"全天(白+黑)","AddTime":"2014/12/15 16:05:56","operateID":"2"}.......]}

 

在后台返回的json中带上total这个字段,前台设计pageSize后就可以自动识别分页数据了

 

数据表格属性(DataGrid Properties)

属性继承控制面板,以下是数据表格独有的属性。

名称 类型 描述 默认值
columns array 数据表格列配置对象,查看列属性以获取更多细节。 undefined
frozenColumns array 跟列属性一样,但是这些列固定在左边,不会滚动。 undefined
fitColumns boolean 设置为true将自动使列适应表格宽度以防止出现水平滚动。 false
autoRowHeight boolean 定义设置行的高度,根据该行的内容。设置为false可以提高负载性能。 true
toolbar array,selector 数据表格顶部面板的工具栏。可能的值:
1)数组,每个工具选项和链接按钮相同。
2)选择显示的工具栏。
在一个<div>的标签定义工具栏:
$('#dg').datagrid({	toolbar: '#tb'});

通过数组定义工具栏:

$('#dg').datagrid({	toolbar: [{		iconCls: 'icon-edit',		handler: function(){alert('edit')}	},'-',{		iconCls: 'icon-help',		handler: function(){alert('help')}	}]});
null
striped boolean 设置为true将交替显示行背景。 false
method string 请求远程数据的方法类型。 post
nowrap boolean 设置为true,当数据长度超出列宽时将会自动截取。 true
idField string 表明该列是一个唯一列。 null
url string 一个用以从远程站点请求数据的超链接地址。 null
loadMsg string 当从远程站点载入数据时,显示的一条快捷信息。 Processing, please wait …
pagination boolean 设置true将在数据表格底部显示分页工具栏。 false
rownumbers boolean 设置为true将显示行数。 false
singleSelect boolean 设置为true将只允许选择一行。 false
checkOnSelect boolean 如果为true,该复选框被选中/取消选中,当用户点击某一行上。如果为false,该复选框仅检查/取消选中,当用户点击完全的复选框。
此属性是1.3版本。
true
selectOnCheck boolean 如果设置为true,单击一个复选框,将始终选择行。如果为false,不会选择行选中该复选框。
此属性是1.3版本。
true
pagePosition string  定义的分页栏的位置。可用的值有 'top','bottom','both'。
此属性是可自1.3版本。
bottom
pageNumber number 当设置分页属性时,初始化分页码。 1
pageSize number 当设置分页属性时,初始化每页记录数。 10
pageList array 当设置分页属性时,初始化每页记录数列表。 [10,20,30,40,50]
queryParams object 当请求远程数据时,发送的额外参数。

示例:

$('#dg').datagrid({	queryParams: {		name: 'easyui',		subject: 'datagrid'	}});
{}
sortName string 当数据表格初始化时以哪一列来排序。 null
sortOrder string 定义排序顺序,可以是'asc'或者'desc'(正序或者倒序)。 asc
remoteSort boolean 定义是否通过远程服务器对数据排序。 true
showFooter boolean 定义是否显示行底(如果是做统计表格,这里可以显示总计等)。 false
rowStyler function 返回样式,如:'background:red',function有2个参数:
index:行索引,从0开始.
row:对应于该行记录的对象。

示例:

$('#dg').datagrid({	rowStyler: function(index,row){		if (row.listprice>80){			return 'background-color:#6293BB;color:#fff;';		}	}});
 
loader function 定义如何从远程服务器加载数据。返回false可以取消该操作。这个函数接受以下参数:
param: 参数对象传递到远程服务器。
success(data): 回调函数将被调用成功检索的数据。
error():回调函数将被调用失败时检索数据。
json loader
loadFilter function 返回过滤的数据显示。该函数需要一个参数'data',表示原始数据。您可以更改源数据的标准数据格式。此函数必须返回标准数据对象中包含的“total”和“rows”的属性。

示例:

// removing 'd' object from asp.net web service json output$('#dg').datagrid({	loadFilter: function(data){		if (data.d){			return data.d;		} else {			return data;		}	}});
 
editors object 定义当编辑一行时的编辑模式。 predefined editors
view object 定义数据表格的视图。 default view

 

列属性(Column Properties)

数据表格的列是一个对象数组,即这个对象中的元素也是一个数组(js中数组是对象)。 对象数组中的每一个元素都是可配置的对象,每个可配置对象定义一个列。

转载于:https://www.cnblogs.com/luoyetl/p/9168396.html

你可能感兴趣的文章
HTML模块化:使用HTML5 Boilerplate模板
查看>>
登记申请汇总
查看>>
Google最新截屏案例详解
查看>>
2015第31周一
查看>>
2015第31周日
查看>>
在使用EF开发时候,遇到 using 语句中使用的类型必须可隐式转换为“System.IDisposable“ 这个问题。...
查看>>
PHP使用DES进行加密和解密
查看>>
Oracle 如何提交手册Cluster Table事务
查看>>
BeagleBone Black第八课板:建立Eclipse编程环境
查看>>
在服务器上用Fiddler抓取HTTPS流量
查看>>
文件类似的推理 -- 超级本征值(super feature)
查看>>
【XCode7+iOS9】http网路连接请求、MKPinAnnotationView自定义图片和BitCode相关错误--备用...
查看>>
各大公司容器云的技术栈对比
查看>>
记一次eclipse无法启动的排查过程
查看>>
【转】jmeter 进行java request测试
查看>>
读书笔记--MapReduce 适用场景 及 常见应用
查看>>
SignalR在Xamarin Android中的使用
查看>>
走过电竞之路的程序员
查看>>
Eclipse和MyEclipse使用技巧--Eclipse中使用Git-让版本管理更简单
查看>>
[转]响应式表格jQuery插件 – Responsive tables
查看>>