EasyUI实现分页、搜索、行按钮功能
1、html+js代码:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" type="text/css" href="~/jquery-easyui-1.5.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="~/jquery-easyui-1.5.3/themes/icon.css">
<script src="~/jquery-easyui-1.5.3/jquery.min.js"></script>
<script src="~/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
</head>
<body>
<div style="margin-bottom:20px">
姓名:<input class="easyui-textbox" id="btnSearchName" style="width:150px;height:32px;">
<input type="button" value="搜索" onclick="search()" />
</div> <table id="dg" title="列表" class="easyui-datagrid" style="width:100%;">
</table> <script>
var params = {};
$(function () {
loadData(params);
}); function loadData(params) {
$('#dg').datagrid({
url: '/Page/GetPageData',//数据请求地址
method: 'post',
pagination: true,//分页显示
fitColumns: true,//自动适应宽度
autoRowHeight: true,//自动行高度
loadMsg: '正在加载...',
nowrap: true,//设置为true 有利于提高性能
idField: 'Number',//字段标识
rownumbers: true,//显示行号
singleSelect: true,//只允许选择一行
pageNumber: 1,//初始化页面数量
pageSize: 10,//初始化显示条数
pageList: [10, 20, 30, 40, 60],//分页列表
columns: [[
{ field: 'Name', title: '姓名', width: 50 },
{ field: 'Number', title: '工号', width: 50 },
{
field: 'action', title: '操作', width: 10, align: 'center',
formatter: function (value, row, index) {
//row.ID,数据id(主键)
var a = '<a href="#" onclick="edit(' + row.ID + ')">Edit</a> ';
var b = ' <a href="#" onclick="del(' + row.ID + ')">Delete</a>';
return a + b;
}
}
]],
queryParams: params //参数
});
} function search() {
var name = $("#btnSearchName").val();
params.name = name;
loadData(params);
} function edit(id) {
alert(id);
} function del(id) {
alert(id);
} </script>
</body>
</html>
html+js代码
点击分页,会往后台传两个默认的参数,page表示当前页索引,rows表示当前页大小(即每页多少行数据),其他参数在easyui的datagrid控件的queryParams属性中
2、后台代码,这里用的asp.net,如下:
public class PageController : Controller
{
public ActionResult Index()
{
return View();
} [HttpPost]
public ActionResult GetPageData()
{
int pageIndex = Convert.ToInt32(HttpContext.Request.Form["page"]);
int pageSize = Convert.ToInt32(HttpContext.Request.Form["rows"]);
var name = HttpContext.Request.Form["name"];
Dictionary<string, string> dic = new Dictionary<string, string>();
if(!string.IsNullOrEmpty(name))
{
dic.Add("Name",name);
} int totalCount = ;
List<UserInfo> list = GetData(dic,pageIndex, pageSize, out totalCount); return Json(new { total = totalCount, rows = list }, JsonRequestBehavior.AllowGet);
} private List<UserInfo> GetData(Dictionary<string, string> dic,int pageIndex,int pageSize,out int totalCount)
{
List<UserInfo> list = new List<UserInfo>();
UserInfo u = null;
for (int i = ; i < ; i++)
{
u = new UserInfo();
u.ID = + (i + );
u.Number = "ZH" + (i + ).ToString();
u.Name = "Name" + (i + ).ToString();
list.Add(u);
} if (dic != null && dic.Count > )
{
list = list.Where(x => x.Name.Contains(dic["Name"])).ToList();
} totalCount = list.Count;
list = list.Take(pageSize * pageIndex).Skip(pageSize * (pageIndex - )).ToList();
return list;
} public class UserInfo
{
public int ID { get; set; }
public string Number { get; set; }
public string Name { get; set; }
}
}
后台代码
后台会传json到前台,json中有两个参数,total表示数据源总数量,rows表示当前页的数据。
3、先看效果图:
EasyUI实现分页、搜索、行按钮功能的更多相关文章
- easyui combobox开启搜索自动完成功能
combo.json [{ "id":-1, "text":" ", "spell":"" },{ ...
- easyUI的datebox添加清空按钮功能
需要修改源码: 第一步:按下图修改 第二步:按下两图修改(*zh_CN.js)
- 给Jquery easyui 的datagrid 每行增加操作链接(转)
http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的EasyU ...
- EasyUI Datagrid 分页显示(客户端)
转自:https://blog.csdn.net/metal1/article/details/17536185 EasyUI Datagrid 分页显示(客户端) By ZYZ 在使用JQuery ...
- 【extjs】 ext5 Ext.grid.Panel 分页,搜索
带有分页,搜索的grid. <%@page language="java" contentType="text/html; charset=UTF-8" ...
- EasyUI DataGrid分页数据绑定
记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 启用行内编辑
jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...
- iOS 如何改变搜索取消按钮的值和颜色
在初始化的时候加上下面两句就行了,试了无数方法,什么遍历查找子元素啊什么的都白搭,也不知道为啥还说可以,下面代码测试是有效果的: //改变搜索取消按钮的文字颜色 [[UIBarButtonItem a ...
- 第二百一十节,jQuery EasyUI,SearchBox(搜索框)组件
jQuery EasyUI,SearchBox(搜索框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SearchBox(搜索框)组件的使用方法,这个组 ...
随机推荐
- POSTMAN发送WebService接口
WebService是一种跨编程语言和跨操作系统平台的远程调用技术 http://www.oorsprong.org/websamples.countryinfo/countryinfoservice ...
- AspectF写法
AspectF.Define .ProgressBar(caption) .Do(() => { if (!SpecialMenuClick(midForm, tag)) { DockBarSh ...
- [Linux性能调优] 磁盘I/O队列调度策略
这两天的一个小任务是MongoDB服务器的调优,恰好这段时间对Linux的各种性能诊断.调优感兴趣,就顺着这个任务多翻了些书和文章. 新学到的一个东西是 Linux磁盘的I/O队列调度策略,至少MyS ...
- prometheus杂碎
一个监控及告警的系统,内含一个TSDB(时序数据库).在我而言是一个数采程序 重要成员分三块 exploter:实际是外部接口,让各个程序实现这个接口,供普罗米修斯定时从此接口中取数 alert:告警 ...
- kernel事件通知userspace
https://stackoverflow.com/questions/31646466/how-to-send-signal-from-kernel-to-user-space
- 用反卷积(Deconvnet)可视化理解卷积神经网络还有使用tensorboard
『cs231n』卷积神经网络的可视化与进一步理解 深度学习小白——卷积神经网络可视化(二) TensorBoard--TensorFlow可视化 原文地址:http://blog.csdn.net/h ...
- iOS 之 HTTPS集成实战应用
临时想起来忘记把项目中用到的https集成整理收藏起来,以备后续不时之需.新手一般了解如下步骤即可: 1. HTTP 和 HTTPS 基本知识和学习 http://www.cnblogs.com/xi ...
- Windows下JDK多版本切换
根据需要,我们可以在一台电脑上安装多个不同的JDK版本,在使用的过程中,可能需要进行版本质检的切换.下面简单说明在切换过程中需要注意的问题.(个人本机是部署了1.8和1.7版本的,安装目录均在C:\P ...
- [原] MyBatis 整理
花了一上午的时间,先整理一个脑图.
- hibernate12--缓存
<!DOCTYPE hibernate-configuration PUBLIC "-//Hibernate/Hibernate Configuration DTD 3.0//EN&q ...