EasyUI datagrid简单运用

jquery的前端框架挺多的，有easyUI ,bootstrap...,对于做系统软件或许easyUI比较好，因为里面控件很丰富，而bootstrap非常简洁大方，但是控件相
对比较少，特别是复杂的网格控件，几乎要自己来写！

介绍一下的easyUI 的datagrid,感觉写法还是比较简单易懂，重用性比较强！
主要实现了显示数据，查询数据（序列化传参），datagrid分页样式选用。

页面如下：

例子依赖：
1、asp.net mvc
2、easyui文件依赖包
下载地址：http://www.jeasyui.com/download/index.php
3、jquery.serialize-object.js
下载地址：https://github.com/macek/jquery-serialize-object

后端代码：
1、依赖的类：
1）Pager 兼容EasyUi 分页(用于查询条件实体继承)

     /// <summary>

     /// 兼容EasyUi 分页(用于查询条件实体继承)

     /// </summary>

     public class Pager

     {

         /// <summary>

         /// 兼容EasyUi 分页参数，当前页

         /// </summary>

         public Int32 Page { get; set; }

         /// <summary>

         /// 兼容EasyUi 分页参数，每页记录数

         /// </summary>

         public Int32 Rows { get; set; }

     }

2）PersonConditions 查询条件实体类，继承Pager

     /// <summary>

     /// 查询条件实体类

     /// </summary>

     public class PersonConditions:Pager

     {

         public String Code { get; set; }

         public String Name { get; set; }

         public String Sex { get; set; }

         public String Addr { get; set; }

         public String Phone { get; set; }

         public Double? Price { get; set; }

     }

3）Person Person实体

     /// <summary>

     /// Person实体

     /// </summary>

     public class Person

     {

         public String Code { get; set; }

         public String Name { get; set; }

         public String Sex { get; set; }

         public String Addr { get; set; }

         public String Phone { get; set; }

         public Double? Price { get; set; }

     }

4）DataGridObj 兼容EasyUi DataGrid分页数据结构

     /// <summary>

     /// 兼容EasyUi DataGrid分页数据结构

     /// </summary>

     public class DataGridObj

     {

         /// <summary>

         /// 总数量

         /// </summary>

         public Int32 total { get; set; }

         /// <summary>

         /// 数据

         /// </summary>

         public Object rows { get; set; }

     }

2、Home控制器
1）Index() 加载页面的方法
2）GetJson() DataGrid 获取数据的方法

     public class HomeController : Controller

     {

         public ActionResult Index()

         {

             return View();

         }

         [HttpPost]

         public JsonResult GetJson(PersonConditions personWhere)

         {

             DataGridObj dgObj = new DataGridObj();

             #region 产生List<Person>数据

             List<Person> list = new List<Person>();

             for (int i = ; i < ; i++)

             {

                 Person person = new Person()

                 {

                     Code = "code" + i.ToString(),

                     Name = "name" + i.ToString(),

                     Sex=i%==?"男":"女",

                     Addr="Addr"+i.ToString(),

                     Phone=""+i.ToString(),

                     Price = i

                 };

                 list.Add(person);

             }

             #endregion

             IQueryable<Person> iqPerson = list.AsQueryable();

             #region 查询条件

             if (String.IsNullOrEmpty(personWhere.Code) == false)

                 iqPerson = iqPerson.Where(a => a.Code == personWhere.Code);

             if (String.IsNullOrEmpty(personWhere.Name) == false)

                 iqPerson = iqPerson.Where(a => a.Name == personWhere.Name);

             if (personWhere.Price != null)

                 iqPerson = iqPerson.Where(a => a.Price == personWhere.Price);

             #endregion

             list = iqPerson.ToList();

             dgObj.rows = list.Skip((personWhere.Page - ) * personWhere.Rows).Take(personWhere.Rows);

             dgObj.total = list.Count();

             return Json(dgObj, JsonRequestBehavior.AllowGet);

         }

     }

前端代码：
1、脚本
1）Common：通用类
SerializeObject：序列化form为对象
2）EasyUIHelper： EasyUI的帮助类
InitTextBox：设置textbox共同的初始属性，统一风格
InitDgPagination：设置datagrid的分页样式（放在datagrid初始化后）,dgId为datagrid的id
3）myDgObj：进行对本页面datagrid的初始化，各种方法定义、调用
4）$(function () { });别忘了在里面调用初始化控件方法
2、HTML
1）form 查询条件
2）id为dg的div为用于绑定datagrid

3、页面代码

 @{

     Layout = null;

 }

 <link rel="stylesheet" type="text/css" href="~/easyui/themes/default/easyui.css">

 <link rel="stylesheet" type="text/css" href="~/easyui/themes/icon.css">

 <script type="text/javascript" src="~/easyui/jquery.min.js"></script>

 <script type="text/javascript" src="~/easyui/jquery.easyui.min.js"></script>

 <script type="text/javascript" src="~/Scripts/jquery.serialize-object.min.js"></script>

 <style>

     body {font-family: "Microsoft YaHei",sans-serif;}

     .from_box {padding: 10px 10px 0px 0px;overflow: hidden;}

     .from_box .item {width:280px;float:left; margin:5px;}

     .from_box .item label:first-child { width:85px;text-align:right;display:inline-block;}

     .from_box .item input{ padding-left:5px;}

   /*.from_box .item_row {width:100%;float:left; margin:5px;display:inline-block;}

     .from_box .item_row label:first-child { width:85px;text-align:right;display:inline-block;}

   */

 </style>

 <form class="from_box">

     <div class="item"><label>编码编码：</label><input name="Code" class="easyui-textbox" data-options="iconCls:'icon-man'" /></div>

     <div class="item"><label>Name：</label><input name="Name" class="easyui-textbox" /></div>

     <div class="item"><label>Sex：</label><input name="Sex" class="easyui-textbox" /></div>

     <div class="item"><label>Addr：</label><input name="Addr" class="easyui-textbox" /></div>

     <div class="item"><label>Phone：</label><input name="Phone" class="easyui-textbox" /></div>

     <div class="item"><label>Price：</label><input name="Price" class="easyui-textbox" /></div>

 </form>

 <div id="dg"></div>

 <script>

     /*通用类*/

     var Common = {

         SerializeObject: function (fromClass) {    /*序列化成对象,fromClass为html元素为form的class,默认为.from_box*/

             if (fromClass == null)

                 fromClass = ".from_box";

             return $(fromClass).serializeObject();

         }

     }

     /*EasyUI的帮助类*/

     var EasyUIHelper = {

         /****************** textbox的帮助方法 Begin ********************/

         InitTextBox: function () {                          /*设置textbox的初始属性，统一风格*/

             var tbOptions = $(".item .easyui-textbox").textbox({

                 height: 30,

                 width: 190

             });

         },

         /****************** textbox的帮助方法 End **********************/

         /****************** datagrid的帮助方法 Begin ******************/

         InitDgPagination: function (dgId) {                 /*设置datagrid的分页样式（放在datagrid初始化后）,dgId为datagrid的id*/

             $(dgId).datagrid("getPager").pagination({

                 layout: ["list", "sep", "first", "prev", "links", "next", "last", "sep", "refresh"],

                 displayMsg: "显示 {from} 到 {to}  共 {total} 项"

             });

         }

         /****************** datagrid的帮助方法 End ********************/

     }

     var myDgObj = {

         Search: function () {

             $("#dg").datagrid("load", Common.SerializeObject());

         },

         Edit: function () {

             alert("edit");

         },

         Load: function () {

             $("#dg").datagrid("load", Common.SerializeObject());

         },

         InitDataGrid: function () {

             $("#dg").datagrid({

                 url: '@Url.Action("GetJson", "Home")',

                 method: "post",

                 pagination: "true",

                 rownumbers: "true",

                 fitColumns: "true",

                 singleSelect: "true",

                 frozenColumns: [[

                     { field: "Code", title: "Code", width: 100 },

                     { field: "Name", title: "Name" }

                 ]],

                 columns: [[

                     { field: "Sex", title: "Sex" },

                     { field: "Addr", title: "Addr" },

                     { field: "Phone", title: "Phone" },

                     { field: "Price", title: "Price", align: "right" }

                 ]],

                 toolbar: [

                     { text: "查询", iconCls: "icon-search", handler: "myDgObj.Search" }, '-',

                     { text: "编辑", iconCls: "icon-edit", handler: "myDgObj.Edit" }

                 ]

             });

             EasyUIHelper.InitDgPagination("#dg"); //datagrid初始化同时，初始页脚（分页）样式

         }

     }

     $(function () {

         EasyUIHelper.InitTextBox();  //easyui-textbox统一初始化属性

         myDgObj.InitDataGrid();      //datagrid初始化

     });

 </script>

注意：
$("#dg").datagrid("load", Common.SerializeObject());
查询时，通过序列化form为对象post到GetJson()作为入参

巴特西

EasyUI datagrid简单运用

最新文章

热门文章