easyui datagrid 后台分页,前端如何处理
module.exports = {
queryMethod(){
let params = checkQueryParams.call(this);
if (!params) {
return;
}
//ajax请求,$UPost,$UConfApi是我在项目中封装好的方法,其实就是调取后台接口,$UPost是一个promise对象,所以可以用then()方法,params是传给后台的参数
return $UPost($UConfApi('H_Log_Operate'), params).then(result => { //es6箭头函数的写法
if (!result || result.rows < 1) {
return alert(“无查询结构!”);
}
let pager = $('#grid').datagrid('getPager');
pager.pagination('refresh', {
total:result.results
});
pager.pagination({
onSelectPage: function (pageNum, pageSize) {
let start = parseInt(pageNum-1)*parseInt(pageSize);
let limit = parseInt(pageSize);
//再次调用接口,取到新数据
$UPost($UConfApi('H_Log_Operate'), {start:start,limit:limit}).then(result => {
let data = result.rows;
$('#grid').datagrid('loadData',data);
pager.pagination('refresh', {
total:result.results,
pageNumber: pageNum,
pageSize: pageSize
});
})
}
});
})
},
}
//获取参数
function checkQueryParams() {
let {
LangCommon: lang,
LangUser
} = $ULanguage();
let {
starttime,
endtime,
accountid,
start = 0,
limit
} = this;
accountid = $('#accountid').textbox('getText');
starttime = $("#range-time-start").val();
endtime = $("#range-time-end").val();
let shortName = $("#shortname").combobox('getText');
if(!shortName){
return $UToolAlert(LangUser.shortname_null);
}
if (!accountid) {
return $UToolAlert(lang.exist);
}
if (!starttime || !endtime) {
return $UToolAlert(lang.dateHint)
}
//分页相关内容start
let opts = $('#grid').datagrid('options');
let pager = $('#grid').datagrid('getPager');
pager.pagination({
onSelectPage: function (pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
}
});
start = parseInt(opts.pageNumber-1)*parseInt(opts.pageSize);
limit = parseInt(opts.pageSize);
//分页相关内容end
return {
starttime,
endtime,
accountid,
start,
limit
};
}
easyui datagrid 后台分页,前端如何处理的更多相关文章
- easyUI datagrid 前端真分页
前文再续,书接上一回.easyUI datagrid 前端假分页 http://blog.csdn.net/leftfist/article/details/43164977 真分页是easyUI d ...
- easyUI datagrid 时间格式化
从后台传过来的数据,其中含有日期字段,那么在前端的easyUI这里显示的话,会显得比较怪异,一大串,中间是个T,后面一大堆零,不知道是什么意思. 看来要进行格式化. 问题是,在哪里格式化? 如果在后端 ...
- easyui datagrid中datetime字段的显示和增删改查问题
datagrid中datetime字段的异常显示: 使用过easyui datagrid的应该都知道,如果数据库中的字段是datetime类型,绑定在datagrid显式的时候会不正常显示,一般需要借 ...
- easyui datagrid标题列宽度自适应
最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ...
- jQuery EasyUI datagrid实现本地分页的方法
http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...
- [转载]再次谈谈easyui datagrid 的数据加载
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
- 反射实体自动生成EasyUi DataGrid模板
用EasyUi Datagrid展示数据的时候总是要一下这样一段代码 <table id="dt" class="easyui-datagrid"> ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(7)-MVC与EasyUI DataGrid
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(7)-MVC与EasyUI DataGrid 没有源码的同学跳到第六讲下载源码再来. 我们需要漂亮的UI, ...
- 解决easyui datagrid加载数据时,checkbox列没有根据checkbox的值来确定是否选中
背景: 昨天帮朋友做一个easyui datagrid的小实例时,才发现easyui datagrid的checkbox列,没有根据值为true或false来选中checkbox,当时感觉太让人失 ...
随机推荐
- 查看 linux 目录大小
查看 linux 目录大小 du -sm * | sort -n # 以m显示并按小到大排序
- 20165306 Exp6 信息搜集与漏洞扫描
Exp6 信息搜集与漏洞扫描 一.实践内容概述 1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应用 搜索网址目录结构 搜索特定类型的文件 搜索E-Ma ...
- 剑指offer 15:反转链表
题目描述 输入一个链表,反转链表后,输出新链表的表头. 法一:迭代法 /* public class ListNode { int val; ListNode next = null; ListNod ...
- js清除childNodes中的#text(选项卡中会用到获取第一级子元素)
我们一般为了代码整洁代码都会换行,如上面所述. 获取div1节点下的childNodes var div = document.getElementById('div1') var child = d ...
- 开发者中心没有勾选 ipad却需要传宣传图片的解决方法
1.通过模拟器 运行一个ipad 把ipad的比例调到100% 然后保存图片,如果没有适配ipad会出现上下左右黑色边框,这些不必在意,把保存的图片拖到开发者中心即可,勾选右侧 ,都使用12.9英寸图 ...
- Python进行JSON格式化输出,以及汉字显示问题
格式化输出 转载地址 https://blog.csdn.net/real_tino/article/details/76422634 问题分析: Python下json手法的json在打印查看时, ...
- linux shell实战之知识体系
1.认识GUN/bash shell 梳理清楚硬件,内核及模块,shell之间的关系:熟悉GUN的bash以及bash shell的功能:学习shell的通配符 2.shell 的变量 变量的设置,取 ...
- android -------- 沉浸式状态栏和沉浸式导航栏(ImmersionBar)
android 4.4以上沉浸式状态栏和沉浸式导航栏管理,包括状态栏字体颜色,适用于Activity.Fragment.DialogFragment.Dialog,并且适配刘海屏,适配软键盘弹出等问题 ...
- mongodb+express+nodejs(登陆退出)
1.安装expressnpm i -g express(新版本4.X以上要安装express-generator)npm i -g express-generator 2.安装mongodb下载地址h ...
- React文档(十九)不使用ES6
通常你会将一个React组件定义成一个普通的js类: class Greeting extends React.Component { render() { return <h1>Hell ...