Jquery easyui从零单排之datagrid查询
2015-12-11 09:27
746 查看
这里开始学习datagrid查询功能的实现。
查询的关键代码在这里:
$('#dg').datagrid('reload'的作用是获取查询后的数据后,重新加载。
程序在这里先判断string test = context.Request.QueryString["test"]这个,若是查询的话,test在这里肯定等于search,那就执行SearchData(context, username, loginid)这个查询函数,然后返回Json数据。
一、前台代码:
<head> <meta charset="UTF-8"> <title>Start from zero</title> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/icon.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/demo/demo.css"> <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script> </head> <body> <form id="fm"> <table id="dg" title="Client Side Pagination" toolbar="#tb" fitcolumns="true" rownumbers="true" showfooter="true" style="width: 640px; height: 600px" data-options=" remoteSort:false, rownumbers:true, singleSelect:false, autoRowHeight:true, pagination:true, showFooter: true, fitColumns: true, pageSize:20"> <thead frozen="true"> <tr> <th data-options="field:'ck',checkbox:true,width:40"> </th> <th data-options="field:'LoginID',width:100" sortable="true"> LoginID </th> </tr> </thead> <thead> <tr> <th data-options="field:'UserName',width:120" sortable="true"> UserName </th> <th data-options="field:'Sex',align:'center',width:80" sortable="true"> Sex </th> <th data-options="field:'Department',width:140" sortable="true"> Department </th> <th data-options="field:'Age',width:80" sortable="true"> Age </th> <th data-options="field:'_operate',width:40,align:'center'"> 操作 </th> <th data-options="field:'_operate1',width:40,align:'center'"> 删除 </th> </tr> </thead> </table> <div id="tb" style="padding: 3px"> <span>UserName:</span> <input id="username" style="line-height: 26px; border: 1px solid #ccc"> <span>LoginID:</span> <input id="loginid" style="line-height: 26px; border: 1px solid #ccc"> <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a> </div> <script type="text/javascript"> function getData() { $('#dg').datagrid({ url: 'Handler.ashx', method: 'get', striped: true, title: "员工列表", onSortColumn: function (sort, order) { //alert("sort:" + sort + ",order:" + order + ""); $('#dg').datagrid('reload', { sort: sort, order: order }); } }) } function pagerFilter(data) { if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array data = { total: data.length, rows: data } } var dg = $(this); var opts = dg.datagrid('options'); var pager = dg.datagrid('getPager'); pager.pagination({ onSelectPage: function (pageNum, pageSize) { opts.pageNumber = pageNum; opts.pageSize = pageSize; pager.pagination('refresh', { pageNumber: pageNum, pageSize: pageSize }); dg.datagrid('loadData', data); } }); if (!data.originalRows) { data.originalRows = (data.rows); } var start = (opts.pageNumber - 1) * parseInt(opts.pageSize); var end = start + parseInt(opts.pageSize); data.rows = (data.originalRows.slice(start, end)); return data; } function doSearch() { $("#test").val("search"); $('#dg').datagrid('reload', { test: $('#test').val(), username: $('#username').val(), loginid: $('#loginid').val() }); } $(function () { $('#dg').datagrid({ loadFilter: pagerFilter }).datagrid('loadData', getData()); }); </script> <div id="dlg"> </div> <input name="Test" id="test" type="hidden" /> <input id="btn_select" type="button" value="SelectData" onclick="SelectData()" /> </form> </body> </html>
查询的关键代码在这里:
function doSearch() { $("#test").val("search"); $('#dg').datagrid('reload', { test: $('#test').val(), username: $('#username').val(), loginid: $('#loginid').val() }); }这里向处理页面传值,test是一个标识(表示该操作是查询,还是其他操作,比如删除,编辑等),,username是username文本框中的值,loginid是loginid文本框中的值,后两个值供查询函数使用。
$('#dg').datagrid('reload'的作用是获取查询后的数据后,重新加载。
二、处理代码:
<%@ WebHandler Language="C#" Class="Handler" %> using System; using System.Web; using System.Data; using System.Data.SqlClient; using System.IO; using System.Collections.Generic; using System.Text.RegularExpressions; using Newtonsoft.Json; using System.Text; public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { string test = context.Request.QueryString["test"];//前台传的标示值 string username = context.Request.QueryString["username"];//前台传的查询值 string loginid = context.Request.QueryString["loginid"];//前台传的查询值 string sort = !string.IsNullOrEmpty(context.Request.QueryString["sort"])?context.Request.QueryString["sort"]:"LoginID"; string order = !string.IsNullOrEmpty(context.Request.QueryString["order"])?context.Request.QueryString["order"]:"asc"; if (string.IsNullOrEmpty(test)) { Query(context,sort,order); } else if (test == "search") { SearchData(context, username, loginid); } } public void Query(HttpContext context,string sort,string order) { context.Response.ContentType = "text/plain"; SqlHelp sqla = new SqlHelp(); string stra = "select * from tTestTable order by "+sort+" "+order; DataTable dta = sqla.GetDataTable(stra); sqla.SqlClose(); string json = JsonConvert.SerializeObject(dta); context.Response.Write(json); } public void SearchData(HttpContext context, string username, string loginid) { context.Response.ContentType = "text/plain"; SqlHelp sqlb = new SqlHelp(); string strb = "select * from tTestTable where 1=1"; if (!string.IsNullOrEmpty(username)) { strb += " and " + "UserName" + " like '%" + username + "%'"; } if (!string.IsNullOrEmpty(loginid)) { strb += " and " + "LoginID" + " like '%" + loginid + "%'"; } strb += " order by LoginID desc"; DataTable dtb = sqlb.GetDataTable(strb); sqlb.SqlClose(); string jsonb = JsonConvert.SerializeObject(dtb); context.Response.Write(jsonb); } public bool IsReusable { get { return false; } } }
程序在这里先判断string test = context.Request.QueryString["test"]这个,若是查询的话,test在这里肯定等于search,那就执行SearchData(context, username, loginid)这个查询函数,然后返回Json数据。
三、运行结果截图:
相关文章推荐
- 【头条】移动设备是推动VR大发展的第一波浪潮
- cordova+jquery form上传里面的一些诡异坑
- 细数jQuery源码中那些解决内存泄漏问题
- jQuery点击改变class并toggle及toggleClass()方法定义用法
- jquery点击toggle并改变图片src源码
- jquery点击toggle并改变图片src
- Java Servlet生成JSON格式数据并用jQuery显示的方法
- jQuery点击改变class并toggle及toggleClass()方法定义用法
- jQuery弹簧插件编写基础之“又见弹窗”
- jQuery使用$.ajax进行即时验证实例详解
- jQuery使用$.ajax提交表单完整实例
- jQuery入门之层次选择器实例简析
- jquery点击改变class并toggle
- jquery中ajax请求全过程
- ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决
- jQuery学习
- jQuery $.each用法
- 锋利的JQuery —— 事件和动画
- jQuery实现slideRightShow()方法
- 20151210jquery进阶 代码备份