當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

easyui 通用的datagrid中如何带有查询条件分页

發布時間：2023/12/19 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 easyui 通用的datagrid中如何带有查询条件分页小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

html 代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1"><title></title><script type="text/javascript" language="javascript" src="../Scripts/My97DatePicker/WdatePicker.js"></script><link rel="stylesheet" type="text/css" href="../Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" /><link rel="stylesheet" type="text/css" href="../Scripts/jquery-easyui-1.3.2/themes/icon.css" /><script type="text/javascript" src="../Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script><script type="text/javascript" src="../Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script><link rel="stylesheet" type="text/css" href="../Resource/Css/base.css" /> </head> <body><form method="post" action="orders.aspx" id="form1"> <div class="aspNetHidden"> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTExNjk2ODg0NDRkZCOLvqGWle7VDdkjq2dhN5yAxw6yEAPsgqeeG/+Wi49/" /> </div><div class="aspNetHidden"><input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBALt0qRkApehh7YHAq/J98ULAvDVkOYC1D/zVz5bLUZLledrbR3qxiF16rmEfvZBJPE413rxsnU=" /> </div><script type="text/javascript">$(function () {$('#dataList').datagrid({title: '訂單查詢',iconCls: 'icon-save',width: 2000,height: window.screen.height * 0.8,fit: false,nowrap: false,striped: true,url: '../jsonData/orders.ashx',sortName: 'ids',sortOrder: 'ids',remoteSort: false,idField: 'ids',frozenColumns: [[{ field: 'ck', checkbox: true },{ title: '訂單號', field: 'order_no', width: 100, sortable: true },{ title: '訂單狀態', field: 'order_status', width: 80, sortable: true }]],columns: [[{ title: '產品總額', field: 'product_total_cost', width: 60, sortable: true },{title: '訂單備注', field: 'remark', width: 100, sortable: true }]],onHeaderContextMenu: function (e, field) {e.preventDefault();if (!$('#tmenu').length) {createColumnMenu();}$('#tmenu').menu('show', {left: e.pageX,top: e.pageY});},pagination: true,rownumbers: true,toolbar: [{id: 'btnadd',text: '添加',iconCls: 'icon-add',handler: function () {$('#btnsave').linkbutton('enable');alert('add')}}, {id: 'btncut',text: '刪除',iconCls: 'icon-cut',handler: function () {$('#btnsave').linkbutton('enable');alert('cut')}}, '-', {id: 'btnsave',text: '保存',disabled: true,iconCls: 'icon-save',handler: function () {$('#btnsave').linkbutton('disable');alert('save')}}]});var p = $('#dataList').datagrid('getPager');if (p) {$(p).pagination({pageSize: 10, //每頁顯示的記錄條數，默認為10 pageList: [5, 10, 15], //可以設置每頁記錄條數的列表 beforePageText: '第', //頁數文本框前顯示的漢字 afterPageText: '頁共 {pages} 頁',displayMsg: '當前顯示 {from} - {to} 條記錄共 {total} 條記錄',onBeforeRefresh: function (pageNumber, pageSize) {alert('pageNumber:' + pageNumber + ',pageSize:' + pageSize);alert('before refresh');}});}});function createColumnMenu() {var tmenu = $('<div id="tmenu" style="width:100px;"></div>').appendTo('body');var fields = $('#dataList').datagrid('getColumnFields');for (var i = 0; i < fields.length; i++) {$('<div iconCls="icon-ok"/>').html(fields[i]).appendTo(tmenu);}tmenu.menu({onClick: function (item) {if (item.iconCls == 'icon-ok') {$('#dataList').datagrid('hideColumn', item.text);tmenu.menu('setIcon', {target: item.target,iconCls: 'icon-empty'});} else {$('#dataList').datagrid('showColumn', item.text);tmenu.menu('setIcon', {target: item.target,iconCls: 'icon-ok'});}}});}function resize() {$('#dataList').datagrid('resize', {width: 700,height: 400});}function showDate(val) {if (val != null) {val = val.replace("\/Date(", "");val = val.replace(")/", "");dt = new Date(Number(val));return dt.toLocaleString();} else {return "";}}function getProduct(val) {var start = val.indexOf("產品屬性");if (start > 8) {start = start - 8;}return val.substr(start);}function FindData() {$('#dataList').datagrid('load', {order_no: $('#order_no').val()});} </script><div id="searchtool" style="padding: 5px"><span>訂單號:</span><input name="ctl00$ContentPlaceHolder1$order_no" type="text" id="order_no" /><a href="javascript:FindData()" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查詢</a></div><table id="dataList"></table></form> </body> </html>

后臺代碼

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.IO; using System.Text; using ySmtHelper.Common; using System.Data.Linq; using System.Web.Script.Serialization;namespace ySmtHelper.jsonData {/// <summary>/// Summary description for orders/// </summary>public class orders : IHttpHandler{public void ProcessRequest(HttpContext context){int page = 0;if (context.Request.QueryString["page"] != null){page = Convert.ToInt32(context.Request.QueryString["page"].ToString());}if (context.Request.Form["page"] != null){page =Convert.ToInt32( context.Request.Form["page"].ToString());}int rows = 0;if (context.Request.QueryString["rows"] != null){rows =Convert.ToInt32( context.Request.QueryString["rows"].ToString());}if (context.Request.Form["rows"] != null){rows = Convert.ToInt32(context.Request.Form["rows"].ToString());}context.Response.ContentType = "text/plain";//tb_order entry = new tb_order();//entry.buyer_name = "buyer_name";//entry.order_no = "order_no";//entry.order_time = DateTime.Now;JavaScriptSerializer serializer = new JavaScriptSerializer();//序列化//string json = serializer.Serialize(entry);//反序列化//tb_order tb_order = serializer.Deserialize<tb_order>(json);// context.Response.Write(json);context.Response.Write(BindGrid( context, page, rows));}public string BindGrid(HttpContext context,int pageIndex, int pageSize){ if (pageIndex < 1){pageIndex = 1;}int totalcount = 0;string out_s = "";using (SmtDataContext db = new SmtDataContext()){using (var writer = File.AppendText(Log.getLogFile())){db.Log = writer;var loadOptions = new DataLoadOptions();db.LoadOptions = loadOptions;string orderby = "order_no";var q_count = from c in db.tb_orders select c;if (context.Request.Form["order_no"] != null && context.Request.Form["order_no"].Length>0){q_count = q_count.Where(p => p.order_no.Contains(context.Request.Form["order_no"].ToString()));}totalcount = q_count.Count();//Skip(100)代表跳過100行后.從第101行開始分頁;//take(10)表示多少行分頁;// 第一種 var aClass = q_count.OrderBy(p => GetPropertyValue(p, orderBy.SelectedValue.Trim())).Skip((pageIndex - 1) * pageSize).Take(pageSize);// 第2種var aClass = LinqOrderBy.OrderByDescending(q_count, orderby).Skip((pageIndex - 1) * pageSize).Take(pageSize);JavaScriptSerializer serializer = new JavaScriptSerializer();string json = serializer.Serialize(aClass);//easyui 格式 { "total":239, "rows":[ {"code":"010","name":"Name 10"} ]} StringBuilder sb = new StringBuilder();sb.Append("{ \"total\":" + totalcount + ", \"rows\":" + json + "}");out_s = sb.ToString();writer.Close();}}return out_s;}public bool IsReusable{get{return false;}}} }

轉載于:https://www.cnblogs.com/xinyaoxp/p/3205025.html

總結

以上是生活随笔為你收集整理的easyui 通用的datagrid中如何带有查询条件分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。