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

最新推荐文章于 2020-02-22 14:30:09 发布

Claire_ljy

最新推荐文章于 2020-02-22 14:30:09 发布

阅读量221

点赞数

文章标签： javascript json xhtml ViewUI

原文链接：http://www.cnblogs.com/xinyaoxp/p/3205025.html

版权

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

Claire_ljy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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">&lt...
复制链接

扫一扫