EasyUI - DataGrid 组建 - [ 搜索功能 ]
效果:
html代码:
- 使用css加载的方式,所以要在写html代码,也可以使用js操作。
<div>
<!--使用JS加载方式-->
<table id="tab"></table> <!--按钮--->
<div id="tb">
<div style ="padding:5px;">
<a id ="add" href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add',">添加</a>
<a id ="edit" href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit',">修改</a>
<a id ="remove" href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove',">删除</a>
</div>
<div style ="padding-left:10px;padding-bottom:10px;">
搜索姓名(可以模糊查询):<input id ="name" name ="name" type ="text" class="textbox" style ="width:130px;" />
查询时间 从:<input id ="time_from" name ="time_from" type ="text" class ="easyui-datebox" style ="width:130px;"/>
到:<input id ="time_to" name ="time_to" type ="text" class ="easyui-datebox" style ="width:130px;"/>
<a id ="search" href ="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'," style ="margin-left:20px; padding:0 10px 0 10px;">搜索</a>
</div>
</div>
</div>
JS代码:
- toolbar使用css加载。其余看代码,看注释。
$(function () { //格式化日期输出样式
$('#time_from, #time_to').datebox({
formatter: function (date) { return date.getFullYear() + '/' + (date.getMonth() + ) + '/' + date.getDate(); },
}); //Datagrid设置
$('#tab').datagrid({ //===================================== 样式 ===============================================//
width: ,//宽度
title: '信息列表',//标题名
iconCls: 'icon-search',//图标
singleSelect: true,//是否单选
striped: true,//是否开启斑马线
fitColumns: false,//是否自适应宽度(出现滚动条)
loadMsg: '正在努力加载,请稍后………………',//显示加载提示信息
rownumbers: true,//显示行号
//showHeader: false,//是否显示行头(标题)
//showFooter:false,//显示行尾,默认情况下不显示,要在后台使用json数据传递
//==========================================================================================// //============================= 加载数据,要显示的字段 =========================================//
//要加载的数据
url: "../Json/datagridjson.ashx",
//要显示的列
columns: [[
{
field: 'id',
title: '编号',
align: 'center',//标题和内容居中
resizable: false,//不允许改变大小
//hidden:true,//隐藏该列
width: ,//所有字段设置成100,起到自动平均分配大小的作用
},
{
field: 'name',
title: '姓名',
width: ,//所有字段设置成100,起到自动平均分配大小的作用
halign: 'center',//仅标题居中 //显示数据的时候,格式化数据
formatter: function (value, row, index) {
return '[ ' + value + ' ]';
},
},
{
field: 'sex',
title: '性别',
width: ,//所有字段设置成100,起到自动平均分配大小的作用
},
//在字段中使用排序,每点击一次,都会向后台POST要排序的字段和正序还是倒序排列。
{
field: 'createtime',
title: '创建时间',
width:,//所有字段设置成100,起到自动平均分配大小的作用
sortable: true,//允许排序
}
]],
//==========================================================================================// //===================================== 分页 ===============================================//
//显示分页控件栏
pagination: true,
pageNumber: ,//初始化的时候在第几页
pageSize: ,//,每页显示的条数
pageList: [, , ],//每页显示的条数
//==========================================================================================// //===================================== 排序 ===============================================//
//通过POST传递到后台,然后进行排序。
sortName: 'createtime',
sortOrder: 'desc',
//==========================================================================================// //===================================== 按钮 ===============================================//
toolbar: '#tb',
//==========================================================================================// }); //添加
$('#add').click(function () {
alert('添加按钮');
}); //修改
$('#edit').click(function () {
alert('编辑按钮');
}); //删除
$('#remove').click(function () {
alert('删除按钮');
}); //查询
$('#search').click(function () {
$('#tab').datagrid('load', {
searchvalue: $.trim($('input[name="name"]').val()),
time_from: $.trim($('input[name="time_from"]').val()),
time_to: $.trim($('input[name="time_to"]').val()),
});
}); })
后台一般处理程序接收:
- 查询代码。
- 底部统计总条数代码。
-
rom Tb_person "+connect+" order by
-
time from Tb_person " + connect + " ) as a where a.
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json"; //接受前台传递来的页数和每页显示的条数
//前台开启分页之后,传递来的参数
int pageIndex = Convert.ToInt32(context.Request["page"]);
int pagenumber = Convert.ToInt32(context.Request["rows"]); //接收排序字段
string sortfield = context.Request["sort"];
string sortDescOrasc = context.Request["order"]; //------------------------------------------搜索-----------------------------------------
string connect = "";
string searchvalue = "";
string time_from = "";
string time_to = ""; if (context.Request["searchvalue"] != null && context.Request["searchvalue"] != "")
{
searchvalue = "name like '%" + context.Request["searchvalue"] + "%' and ";
connect += searchvalue;
} if (context.Request["time_from"] != null && context.Request["time_from"] != "")
{
time_from = "createtime>='" + context.Request["time_from"].Replace('/','-') + "' and ";
connect += time_from;
} if (context.Request["time_to"] != null && context.Request["time_to"] != "")
{
time_to = "createtime<='" + context.Request["time_to"].Replace('/', '-') + "' and ";
connect += time_to;
} if (connect != "")
{
connect = " where " + connect.Substring(, connect.Length - );
}
//-------------------------------------------------------------------------------------------- //存储数据
DataTable dt = new DataTable(); if (pageIndex == )
{
//加载第一页
string pageIndexOne = "select top " + pagenumber + " id, name, sex, createtime from Tb_person "+connect+" order by " + sortfield + " " + sortDescOrasc + "";
//获取并转换为JSON数据
dt = SQLHelper.ExecuteTable(pageIndexOne, CommandType.Text);
}
else if (pageIndex != )
{
//加载非第一页
string pageIndexNotOne = @"select id, name, sex, createtime from (select ROW_NUMBER() over(order by " + sortfield + " " + sortDescOrasc + ") as rownum, id, name, sex, createtime from Tb_person " + connect + " ) as a where a.rownum > " + (pageIndex - ) * pagenumber + " and a.rownum <= " + pageIndex * pagenumber + "";
//获取并转换为JSON数据
dt = SQLHelper.ExecuteTable(pageIndexNotOne, CommandType.Text);
}
else { } //将datatable转换为json
//在返回的JSON数据中,加入total属性(总记录数)
//那么他就会在加载的时候,显示总记录数。
//显示的格式是【 {"total":12, "rows":"[{},{},{}]"} 】,rows内为JSON数据。
//计算总条数(同时可以统计,使用关键字查询之后的条数)
int totalnumber = (int)SQLHelper.ExcuteScalar("select count(*) from Tb_person " + connect + "", CommandType.Text);
//返回数据
string strjson = "{\"total\":" + totalnumber + ", \"rows\":" + DatatableToJson.ToJson(dt) + "}"; context.Response.Write(strjson);
}
EasyUI - DataGrid 组建 - [ 搜索功能 ]的更多相关文章
- EasyUI - DataGrid 组建 - [ 新增功能 ]
效果: html代码: <div> <!--使用JS加载方式--> <table id="tab"></table> <!-- ...
- EasyUI - DataGrid 组建 - [ 样式功能 ]
效果显示: 同上次博文效果. html代码: 同上次博文代码. js代码: align: 'center',//标题和内容居中 resizable: false,//不允许改变大小 //hidden: ...
- EasyUI - DataGrid 组建 - [ 排序功能 ]
效果: 红框的字段看,为设置了,列排序,向后台Post数据sort/order. 原理:向后台POST数据,sort/post数据. html代码: <table id="tab&qu ...
- easyui datagrid client搜索、分页、排序
easyui datagrid的排序默认是server端排序.能够用sorter实现client排序[2].client分页可用filter实现[3].client搜索相同能够用filter实现. 不 ...
- EasyUI - DataGrid 组建 - [ 删除,修改 ]
效果: html代码: <div style="padding-top: 50px; width: 800px; margin: 0 auto;"> <!--使用 ...
- EasyUI - DataGrid 组建 - [ 组件加载和分页 ]
效果: 原理:通过POST传递到数据后台字段. 此时上传的参数,page:当前页数,rows:每页显示的页数. 有此两项参数,计算取出数据条数. 通过后台接受参数,进行处理并返回抽取的数据. html ...
- 【第十一篇】这一篇来说说MVC+EF+easyui datagrid的查询功能
老规矩 直接上代码 <form class="form-horizontal"> <div class="box-body"> < ...
- easyui datagrid 行编辑功能
datagrid现在具有行编辑能力了,使用时只须在columns中为需要编辑的列添加一个editor属性,编辑保存时同时具有数据校验能力. 看一个例子效果图: 代码如下: $('#tt').datag ...
- easyui combobox开启搜索自动完成功能
combo.json [{ "id":-1, "text":" ", "spell":"" },{ ...
随机推荐
- 爬虫框架Scrapy
前面十章爬虫笔记陆陆续续记录了一些简单的Python爬虫知识, 用来解决简单的贴吧下载,绩点运算自然不在话下. 不过要想批量下载大量的内容,比如知乎的所有的问答,那便显得游刃不有余了点. 于是乎,爬虫 ...
- 「JAVA」:Berkeley DB的JAVA连接
Berkeley DB是一个嵌入式的数据库,它适合于管理海量的.简单的数据.关键字/数据(key/value)是Berkeley DB用来进行数据管理的基础.每个key/value构成了一条记录,而整 ...
- javascript使用消息框
之前很多地方都用过alert,它的作用是弹出一个警告框,我们调用的方法是alert("输入的内容");其实更正确的写法是 window.alert("输入的内容" ...
- QT 入门 -QApplication QPushButton QDialog Ui类型的手工使用
QT 1.工具 assistant 帮助文档 qtconfig QT配置工具 qmake QT的make与项目文件智能创建工具 uic UI界面的设计文件的编译工具 mo ...
- 将其它图片格式转为.eps格式
假设是用origin的话就不存在这个问题. 倘若你是用excel绘图的话. 1.先将excel导出为.pdf文件 2.用Adobe Acrobat Pro 打开pdf,用其它的pdf软件貌似不行 3. ...
- 设计模式 - 单例模式mysql数据库操作类
待续... index.php 调用方法: <?php header('Content-Type:text/html; charset=utf8'); require 'instance.php ...
- 关于方法中的形参out
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Android 应用内HttpClient 与 WebView 共享 Cookie
DefaultHttpClient httpclient=....; String toUrl="https://cap.cityu.edu.hk/studentlan/details.as ...
- Ural 1313 - Some Words about Sport
Ural doctors worry about the health of their youth very much. Special investigations showed that a l ...
- DW8051调试终结
都不记得自己到底揪心了多久 —— 归根结底还是自己太菜了.终于找到了DW8051移植的bug. 这么大的一个图居然没有看到,真是气煞老夫也. 在原来移植的基础之上加两个反相器就OK 了