Easyui-DataGrid 查询，类序列化（构造匿名对象）

最新推荐文章于 2023-01-06 17:24:34 发布
最新推荐文章于 2023-01-06 17:24:34 发布
阅读量2k 收藏
点赞数
分类专栏： EasyUI AJAX | JSON 序列化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fanbin168/article/details/50439028
版权
AJAX | JSON 同时被 3 个专栏收录
30 篇文章 0 订阅
订阅专栏
EasyUI
11 篇文章 0 订阅
订阅专栏
序列化
5 篇文章 0 订阅
订阅专栏

视图

Index视图

 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="UTF-8">
    <title>DataGrid的使用示例</title>
    <link href="~/Easyui/jquery-easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Easyui/jquery-easyui/themes/icon.css" rel="stylesheet" />
    <link href="~/Easyui/jquery-easyui/demo/demo.css" rel="stylesheet" />
    <script src="~/Easyui/jquery-easyui/jquery.min.js"></script>
    <script src="~/Easyui/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="dg" title="MyUsers" class="easyui-datagrid" spellcheck="" style="width:700px;height:320px"
           url="/Home/GetData"
           toolbar="#toolbar"
           pagination="true" @*在datagrid 组件底部显示分页工具栏。默认为false*@
           pagelist="[2,5,8,10]" @*设置每页可以选择显示2条数据，或5条数据，或8条数据，或10条数据*@
           pagenumber="1" @*设置初始页为第一页*@
           pagesize="8" @*设置每页显示8条数据*@
           rowstyler="setRowStyler" @*对某一行设置样式*@
           rownumbers="true" @*显示行号*@
           fitcolumns="true" @*是否自动展开或收缩，以达到自适应。默认为false。*@
           singleselect="true" @*设置true，只能选定一行。默认为false。*@>
        <thead>
            <tr>
                <!--<th data-options="field:'Name'"  data-options="width:50">姓名</th>  这是完整的写法，以下是简写-->

                <th field="Name" width="50" styler="setColuStyler">姓名 </th>
                <th field="Age" width="50" sortable="true" formatter="formatAge">年龄</th>  <!--formatter="formatAge"是调用formatAge函数对这一列的值进行格式化-->
                <th field="Phone" width="50">电话</th>
                <th field="Email" width="50">邮箱</th>
            </tr>
        </thead>

    </table>
    
    <div id="toolbar" style="padding:3px">
        <div>
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true">增加</a>
            <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true">编辑</a>
            <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true">删除</a>
        </div>

        <div>
            <span>姓名</span>
            <input id="searchName" style="line-height:20px;border:1px solid #ccc">
            <a href="#" class="easyui-linkbutton" plain="true" iconcls="icon-search" onclick="doSearch()">查询</a>
        </div>
    </div>
      

</body>
</html>
 <script type="text/javascript">
     function doSearch() {
         $('#dg').datagrid('load', {             
             searchName: $('#searchName').val() //根据姓名来查询数据。这里将搜索框的内容作为查询条件           
         });
     }

     //value：当前列对应字段值。row：当前的行记录数据。index：当前的行下标
     function formatAge(value, row,index)
     {
         if (value >= 26) {
             return '<span style="color:red;">' + value + '</span>';
         }
         else {
             return value;
         }
     }

     //给名字为周晶的那一行添加样式   
     function setRowStyler(index, row) //参数： index 索引，row 对象
     {
         //console.log(row);
         if (row.Name == '周晶')
         {
             return "background-color:Orange";
         }
     }

     //给名字为黄雪辉的那一列添加样式  
     function setColuStyler(value, row, index) //参数： value 值,row对象,index 索引。
     {
         if (row.Name == "黄雪辉")
         {
             return "background-color:Violet";
         }
     }
 </script>

 

Demo视图 

 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>DataGrid的使用示例</title>
    <link href="~/Easyui/jquery-easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Easyui/jquery-easyui/themes/icon.css" rel="stylesheet" />
    <link href="~/Easyui/jquery-easyui/demo/demo.css" rel="stylesheet" />
    <script src="~/Easyui/jquery-easyui/jquery.min.js"></script>
    <script src="~/Easyui/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="dg"></table>

    <div id="toolbar" style="padding:3px">
        <div>
            <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true">增加</a>
            <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true">编辑</a>
            <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true">删除</a>
            <span>姓名</span>
            <input id="searchName" style="line-height:20px;border:1px solid #ccc">
            <a href="#" class="easyui-linkbutton" plain="true" iconcls="icon-search" onclick="doSearch()">查询</a>
        </div>
    </div>
</body>
</html>
<!--DataGrid 是扩展自Panel面板，所有Panel的属性DataGrid是可以使用的-->
<script type="text/javascript">
    $(function () {
        $("#dg").datagrid({
            title: "MyUsers",
            width: 800,
            height: 320,
            iconCls: 'icon-search', //在标题前面加一个搜索图标
            pagination: true,
            pageList: [2, 5, 8, 10],
            pageNumber: 1,
            url: "/Home/GetData",
            sortName: 'Age',
            sortOrder: 'ASC',
            toolbar: "#toolbar",
            //toolbar:
            //    [
            //        { text: "新增", iconCls: 'icon-add', handler: function () { alert("新增") } },
            //        { text: "编辑", iconCls: 'icon-edit', handler: function () { alert("编辑") } },
            //        { text: "新增", iconCls: 'icon-remove', handler: function () { alert("删除") } },
            //    ],
            columns: [[
                { title: '姓名', field: 'Name', width: 200, sortable: true },
                { title: '年龄', field: 'Age', width: 200 },
                { title: '电话', field: 'Phone', width: 200 },
                { title: '邮箱', field: 'Email', width: 200 },
            ]]

        })
    })

    function doSearch() {
        $("#dg").datagrid("load", {
            searchName: $("#searchName").val()
        })
    }
</script>

 

 

Home控制器

 

using MVC.Easyui.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;

namespace MVC.Easyui.Controllers
{
    public class HomeController : Controller
    {
        //进入视图-->HTML的写法
        public ActionResult Index()
        {
            return View();
        }

        //进入视图-->JS的写法
        public ActionResult Demo()
        {
            return View();
        }

        public ActionResult Test()
        {
            return View();
        }

        //视图页面的Easyui-DataGrid通过异步请求数据
        public string GetData(FromData fd)
        {
            salesEntities1 db = new salesEntities1();

            int count = db.T_UserInfo.Count();

            //根据指定的字段来进行排序
            //var list = db.T_UserInfo.AsEnumerable().OrderBy(p => GetPropertyValue(p, fd.sort)).Skip((fd.page - 1) * (fd.rows)).Take(fd.rows).ToList();

            var list = db.T_UserInfo.AsEnumerable();

            //如果用户设置了排序（即：传递了sort和order参数过来）sort表示要排序的字段，order表示升序还是降序排序
            if (!string.IsNullOrEmpty(fd.sort) && !string.IsNullOrEmpty(fd.order))
            {
                //根据指定字段来排序并分页
                if (fd.order == "DESC")
                {
                    list = list.OrderByDescending(r => r.GetType().GetProperty(fd.sort).GetValue(r)).Skip((fd.page - 1) * fd.rows).Take(fd.rows).AsQueryable();
                }
                else
                {
                    list = list.OrderBy(r => r.GetType().GetProperty(fd.sort).GetValue(r)).Skip((fd.page - 1) * fd.rows).Take(fd.rows).AsQueryable();
                }
            }
            else
            { 
                list=list.OrderBy(r=>r.Id).Skip((fd.page - 1) * fd.rows).Take(fd.rows).AsQueryable();
            }



            //如果搜索框的内容不为空，就进行搜索查询
            if (!string.IsNullOrEmpty(fd.searchName))
            {
                list = list.Where(r => r.Name.Contains(fd.searchName));//模糊查询
            }
            var x = new
            {
                total = count,
                rows = list.Select(r => new   //在这里来构建匿名类对象
                {
                    Name = r.Name,
                    Age = r.Age,
                    Phone = r.Mobile,
                    Email = r.Email
                })
            };
            //使用Jil.JSON.Serialize()来对对象序列化需要通过安装插件 PM> Install-Package Jil -version 2.10.0
            var strJson = Jil.JSON.Serialize(x);
            return strJson;
        }

        /*
        /// <summary>
        /// 根据传递进来的对象+对象的某个属性来返回指定对象的该属性值
        /// </summary>
        /// <param name="obj">传入类型对象</param>
        /// <param name="property">对象的某个属性</param>
        /// <returns>返回指定对象的该属性值</returns>
        private object GetPropertyValue(object obj, string property)
        {
            System.Reflection.PropertyInfo propertyInfo = obj.GetType().GetProperty(property);
            return propertyInfo.GetValue(obj, null);
        }*/
    }



    //用于接收从视图传递过来的表单参数
    public class FromData
    {
        //当前页
        public int page { get; set; }
        //页大小
        public int rows { get; set; }
        //搜索的姓名
        public string searchName { get; set; }

        //按哪个字段进行排序
        public string sort { get; set; }

        //排序方式（DESC ,ASC）
        public string order { get; set; }
    }
}

 

 

 

特别注意：

 

 

 

Easyui-DataGrid 接收的是一下格式的Json对象，或字符串。所有我们需要将对象序列化成下面格式的Json字符串，或者Json对象

 

{"total":28,"rows":[
	{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
	{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
	{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
	{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
	{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
	{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
	{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
	{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
	{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
	{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}

 

 

 

 

 

 

 

 

 

 

无盐海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui-datagrid之间拖拽效果demo
03-18
easyui-datagrid之间拖拽效果demo
Java多种方式自定义序列化
Genge
06-14 3737
我们知道，通过实现java.io.Serializable接口可以使得该类的实例能够被序列化。例如如下的Person类， import java.io.Serializable; public class Person implements Serializable { private String name; private int age; public P
自定义easyui-datagid的表格数据序列号
liubowin的专栏
03-25 1万+
一、使用datagrid时有时需要显示行号，虽然rownumbers="true"属性可以设置，但是当表格有横向滚动条时，就和序列号不协调了，所以需要自定义，解决如下： columns: [[ {field:'index',title:'序号',width:38, align: 'center',formatter:function(val,row,index){ var ...
38.EasyUI的DataGrid能读懂的JSON格式
01-31 233
{"total":6,"rows":[{"id":1,"stuid":"4318001","stuname":"小王","stupwd":"123"},{"id":2,"stuid":"4318002","stuname":"小李","stupwd":"123"}]} 获得方式: 特别注意：datagrid在使用url引用的时候，引入的产生json字符串的页面只能有函数，不能有html标签...
EasyUi的datagrid数据加载
mole的专栏
07-10 1368
今天用easyui的datagrid来加载数据，不是很顺利，根据捕捉的HTTP通信记录以及对easyui的跟踪发现加载数据需要满足下列几个要求： 1、datagrid通过url获取的必须是json格式的对象，不能是json字符串。 通过Fidder工具截获的数据必须是如下格式： {"total":1,"rows":[{"CouponSupplyId":280002,"MaxLimit":10
EsayUI DataGrid 动态列生成
single209的专栏
01-06 1826
VS2013+Web MVC + EasyUI 控件库，动态列动态数据生成
easyui-datagrid特殊字符不能显示的处理方法
11-28
在easyui中datagrid、combobox、tree等组件都不能显示含有html标签的特殊字符，因为这些字符会被当作html标签被解析掉。这里给出了一个处理方案，希望对大家有帮助。 以datagrid为例： 找到jquery.datagrid.js文件，...
Easyui-DataGrid表头拖动效果
09-14
UI设计在一个系统中的重要性是不容忽视的，我们开发人员要做到：让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
easyUI-datagrid数据表格导出功能后台代码
05-28
项目工具代码,中间包含了service和controller两层,model可以自己定义
dms.rar_easyui java_easyui-datagrid_jeasyui ibatis_jquery-easyui
09-24
ibatis+easyui+etmv,实现了用户管理,权限管理数据在ACCES.条码打印 自动分页 .打印数据来源于oracle数据库使用ETMV访问,需要自建
Easyui之Datagrid(数据表格)
月亮投递员的博客
06-24 2971
Datagrid前言1、概念2、常见使用案例3、datagrid属性4、datagrid事件5、datagrid方法6、案例演示7、为什么使用datagrid总结 前言 今天为大家分享的内容是datagrid,数据表格，用来展示表格中的数据！ 1、概念 Datagrid是用来展示表格数据的一种组件！ 2、常见使用案例 没错，我今天要讲的案例效果就和下面这张图差不多： 根据使用的不同情况和创建DataGrid的方式，分为以下三种： 1、如果从现有的表格元素去创建DataGrid，在HTML中定义列、行和数据
玩转Web之Json（三）-----easy ui怎么把前台显示的dataGird中的所有数据序列化为json，返回到后台并解析...
iteye_8029的博客
04-14 139
最近做一个项目时，需要在dataGird中插入&lt;input&gt;,即文本输入框，当点击提交时，需要把文本框里填的数据返以及其他列的一些信息以json数组的格式返回到后台，虽然我实现了该功能，但一直没找到简便的方法，今天终于在一位版主的点拨下找到了非常简单的方法。 var all = $("#dg").datagrid("getData"); ...
Easyui Datagrid的Rownumber行号显示问题
itmyhome的专栏
05-06 1万+
在Oracle中使用order by进行查询排序时，如果排序字段中有空值(null)，排序结果可能会达不到我们想要的结果。如： select * from test order by age desc; 按照age字段降序排序，结果如下： 将sql语句改为 select * from test order by age desc nulls last; 即可将null值排到
easyui自定义扩展，序号列宽度
yy910308的专栏
09-01 7771
easyui的datagrid，当数据量过大时（接近万条），
easyui序号实现累加
qq_24057133的博客
02-29 3891
由于页面展示的需要，所以序号翻页需要实现累加。field: 'rowNumbers', title: '序号', align: 'center', width: 5, formatter: function(val,rec,index){ var op = $('#certificateGrid').datagrid('options');
easyui(datagrid数据查询)
weixin_66202611的博客
05-07 885
简介： DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。 《案例演示》 从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。 <table class="easyui-datagrid"> <thead> <tr&.
easyui datagrid 搜索框
u013421749的专栏
06-17 1924
引入页     import="java.util.*" pageEncoding="UTF-8"%>     String path = request.getContextPath();     String root = request.getScheme() + "://" + request.getServerName()             + ":" +
EasyUI之datagrid展示数据列表
热门推荐
张翠山的博客
05-04 4万+
写在最前： 如果你用惯了Web Mvc框架的视图跳转方式来开发后台系统，第一次接触到EasyUI的时候，往往会有一个大大的疑问，这EasyUI是如何做跳转的啊？增删改查都不知道如何下手了！但是当你知道有RestFul编程的时候。你会恍然大悟：我靠，RestFul+EasyUI简直就是绝配呀！博主就是如此：在写完一个增删改查之后，才发现EasyUI越学越有意思，页面都是靠局部刷新来动态展示数据，这...
easyui datagrid加载数据的两种方式
三五月儿的专栏
01-15 3万+
1、加载本地数据var obj = {'total':2,'rows':[{id:'1',name:'一'},{id:'2',name:'二'}]}; $('#dg').datagrid('loadData',obj);注意：这里的数据必须是json对象，要是json字符串，必须先转换成json对象才能作为datagrid的数据源。var str = '{'total':2,'rows':[{
easyui-datagrid 放大镜模糊查询
最新发布
11-07
放大镜模糊查询是easyui-datagrid的一种查询方式，它可以在datagrid的工具栏中添加一个放大镜图标，用户可以在输入框中输入关键字，点击放大镜图标进行模糊查询。查询结果会在datagrid中显示出来，方便用户快速定位...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值