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(搜索框)组件的使用方法,这个组 ...
随机推荐
- Docker入门简记
Docker的容器环境实际上是借助类Linux命名空间,将各种系统资源按照容器不同划分了不同的命名空间进行隔离,为各个进程提供独立的运行环境关键概念:容器,镜像两个概念一起看,镜像好比平常系统中的各个 ...
- 集合(从本部分开始涉及API)
集合(从本部分开始涉及API) 集合是指一个对象容纳了多个对象,这个集合对象主要用来管理维护一系列相似的对象. 数组就是一种对象.(练习:如何编写一个数组程序,并进行遍历.) java.util.*定 ...
- Netty WebSocket 开发
代码: Server package netty.protocol.websocket.server; import io.netty.bootstrap.ServerBootstrap; impor ...
- Houdini技术体系 过程化地形系统(一):Far Cry5的植被系统分析
背景 在大世界游戏里,植被(biome)是自然环境非常重要的组成部分,虽然UE4里的也有比较不错的地形+植被系统,但相比国外AAA级游戏的效果,还是有不少的差距,简介如下: UE4的植被分为( ...
- 内存(RAM或ROM)和FLASH存储的真正区别总结
转载自:http://blog.csdn.net/liangkaiyang/article/details/59556531.什么是内存 什么是内存呢?在计算机的组成结构中,有一个很重要的部分 ...
- 自己动手为Spark 2.x添加ALTER TABLE ADD COLUMNS语法支持
SparkSQL从2.0开始已经不再支持ALTER TABLE table_name ADD COLUMNS (col_name data_type [COMMENT col_comment], .. ...
- Qt编写自定义控件2-进度条标尺
前言 进度条标尺控件的应用场景一般是需要手动拉动进度,上面有标尺可以看到当前进度,类似于qslider控件,其实就是qslider+qprogressbar的杂交版本,不过我才用的是纯qpainter ...
- MySQL 分页数据错乱重复
select xx from table_name wheere xxx order by 字段A limit offset;, 表数据总共 48 条,分页数量正常,但出现了结果混杂的情况,第一页的数 ...
- YApi 部署记录
YApi 是一个可本地部署的.打通前后端及QA的.可视化的接口管理平台. Step1:准备Mongo数据库 services: mongo: image: mongo restart: always ...
- pytest 3.9在python 2.7下的一个bug
最在在使用pytest,用的是pytest 3.9.3,python版本为2.7.10,但一直在使用时发现总提示 File "c:\python27\Lib\json\__init__.py ...