jquery Easy UI Datagrid(数据网格)学习心德，附API

第一步，引入主要的css样式和js文件

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title></title>
     <meta charset="utf-8" />
     <link href="../../Script/jquery-easyui-1.7.0/themes/icon.css" rel="stylesheet" />
     <!--引入图标css样式-->
     <link href="../../Script/jquery-easyui-1.7.0/themes/material/easyui.css" rel="stylesheet" />
     <!--引入总的css样式-->
 </head>

引入主要CSS

     <script src="../../Script/jquery.min.js"></script>
     <!--引入默认jquery ui支持的jquery文件-->
     <script src="../../Script/jquery.easyui.min.js"></script>
     <!--引入jquery ui文件-->
     <script src="../../Script/easyui-lang-zh_CN.js"></script>
     <!--引入中文字体库-->
     <script src="../../Script/datapattern.js"></script>
     <!--引入扩展日期js文件，格式化日期类型-->

引入主要js文件

 /**
  * 对Date的扩展，将 Date 转化为指定格式的String
  * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符
  * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
  * eg:
  * (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
  * (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
  * (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
  * (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
  * (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
  */
 Date.prototype.pattern = function (fmt) {
     var o = {
         "M+": this.getMonth() + 1, //月份
         "d+": this.getDate(), //日
         "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
         "H+": this.getHours(), //小时
         "m+": this.getMinutes(), //分
         "s+": this.getSeconds(), //秒
         "q+": Math.floor((this.getMonth() + 3) / 3), //季度
         "S": this.getMilliseconds() //毫秒
     };
     var week = {
         "0": "/u65e5",
         "1": "/u4e00",
         "2": "/u4e8c",
         "3": "/u4e09",
         "4": "/u56db",
         "5": "/u4e94",
         "6": "/u516d"
     };
     if (/(y+)/.test(fmt)) {
         fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
     }
     if (/(E+)/.test(fmt)) {
         fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468") : "") + week[this.getDay() + ""]);
     }
     for (var k in o) {
         if (new RegExp("(" + k + ")").test(fmt)) {
             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
         }
     }
     return fmt;
 }

扩展日期js文件源码

如需下载jquery文件，百度云盘地址：https://pan.baidu.com/s/17RTAyaY9oFAeRgfjlW0Mew

提取码：uknd

第二步，创建table用于存放数据网格

     <table id="tt" style="width:700px" title="标题" iconcls="icon-edit">

     </table>

创建table

第三步，写js脚本，并异步请求后台数据返回JSON格式

     <script type="text/javascript">
         initTable();

         //初始化表格
         function initTable() {
             $("#tt").datagrid({
                 url: "LoadNews4EasyTable.ashx", //从远程站点请求数据的 URL;rows:10;page:请求当前页；要求返回的数据:{total:200,rows:[{},{}]}
                 title: "新闻列表",
                 width: 700, //宽度
                 height: 400, //高度
                 fitColumns: true, //设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。
                 idField: "id", //后台返回数据行中的主键列，注意大小写
                 loadMsg: "正在加载用户数据", //从远程站点加载数据时，显示的提示消息
                 pagination: true, //设置为true，则在数据网络(datagrid)底部显示分页工具栏
                 singleSelect: false, //是否允许选中多行
                 rownumbers: true, //显示带有行号的列
                 striped:true, //奇偶行不同颜色
                 pageSize: 10, //初始化页面尺寸，一页多少条
                 pageNumber: 1, //初始化页码
                 pageList: [5,10, 20, 30,50,100], //允许，一页多少条的数据
                 queryParams: {}, //发送异步请求，额外传递的数据
                 columns: [[
                     { field: 'ck', checkbox: true, align: 'left', width: 50 }, //CheckBox列
                     { field: 'id', title: '编号', width: 80 },
                     { field: 'title', title: '新闻标题', width: 120 },
                     {
                         field: 'date', title: '提交时间', width: 80, align: 'center',
                         formatter: function (value,row,index) {
                             return (eval(value.replace(/\/Date\((\d+)\)\//gi,"new Date($1)"))).pattern("yyyy-M-d");
                         }
                     }
                 ]],
                 toolbar: [{
                     id: 'btnDownShelf',
                     text: '添加新闻',
                     iconCls: 'icon-add',
                     handler: function () {
                         alert("添加按钮");
                     }
                 }]
             });
         };
     </script>

js脚本

第四步，后台关键代码

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using Model;
 using Dll;
 using Common;
 using System.Web.Script.Serialization;
 using System.Data;

 namespace ThreeLayerWebDemo._2019_7_11.EasyCRUD
 {
     /// <summary>
     /// LoadNews4EasyTable 的摘要说明
     /// </summary>
     public class LoadNews4EasyTable : IHttpHandler
     {

         public void ProcessRequest(HttpContext context)
         {
             context.Response.ContentType = "text/plain";
             //注：异步请求，默认会传入后台2个参数，分别为：page；rows
             int pageSize = int.Parse(context.Request["rows"]??""); //拿到前台传入的一页的个数
             int pageIndex = int.Parse(context.Request["page"] ?? ""); //拿到前台传入的当前页
             int total = ; //总的行数
             Model.Main m = new Main(); //实体类
             string sql = m.GetDataPaging(pageSize, pageIndex); //获取分页sql语句
             List<Main> newsList = Common.ToEntity.DtConvertToModel<Main>(SqlHelper.GetList(sql)); //返回分页数据list集合
             DataTable dt =SqlHelper.GetList(m.GetAllRowsCount()); //获取数据库中所有的记录数
             total = Convert.ToInt32(dt.Rows[][]); //总的行数
             var data = new {total=total,rows=newsList }; //匿名类
             JavaScriptSerializer js = new JavaScriptSerializer();
             string jsonStr = js.Serialize(data); //转换成json格式，发送给前台
             context.Response.Write(jsonStr); //发送前台
         }

         public bool IsReusable
         {
             get
             {
                 return false;
             }
         }
     }
 }

后台关键代码

后台传前台json格式

第六步，效果图

以下jquery ui数据网格完整api截图