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(搜索框)组件的使用方法,这个组 ...
随机推荐
- vue2 枚举类型转换
vue2页面上要把数字0,1,2...之类的数值转换成对应的枚举文本,解决如下: 方案一: 如果是是否的问题,直接: {{enable == 1 ? '是' : '否'}} 即可. 方案二: 通过定义 ...
- What’s new for Spark SQL in Apache Spark 1.3（中英双语）
文章标题 What’s new for Spark SQL in Apache Spark 1.3 作者介绍 Michael Armbrust 文章正文 The Apache Spark 1.3 re ...
- 微表面分布函数（Microfacet Distribution Function）确切含义
<Physically-Based Shading Models in Film and Game Production>中说:“D()的值不局限于0到1,可以任意大”,这句话使我比较好奇 ...
- Shell 实现多线程（多任务）
实现方案: 1.命令结尾添加:& #/bin/bash all_num= a=$(date +%H%M%S) ${all_num}` do { echo ${num} } & done ...
- comake2
http://blog.csdn.net/lsjseu/article/details/23395565 comake允许用户通过编写COMAKE文件,来帮助用户管理编译依赖以及编译环境的开发工具: ...
- .NET Core 2.0 获取完整的URL
在之前的ASP.NET中,可以通过 Request.Url.AbsoluteUri 获取,但在ASP.NET Core没有这个实现,请问如何获取呢? 方法一:先引用“using Microsoft.A ...
- 链路追踪工具之Zipkin学习小记
(接触了Zipkin,权将所了解或理解的记于此,以备忘) 分布式追踪系统 随着业务发展,系统拆分多个微服务.此时对于一个前端请求可能需要调用多个后端端服务才能完成,当整个请求变慢或不可用时,我们是无法 ...
- laravel5.8笔记八：数据库（单库和多库）
数据库配置:根目录下/.env, 单个数据库 .env配置 DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT= DB_DATABASE=shop DB_USE ...
- SpringBoot------整合MyBatis
1.添加pom.xml需要的依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="htt ...
- Spark SQL configuration
# export by: spark.sql("SET -v").show(n=200, truncate=False) key value meaning spark.sql.a ...