第一步,引入主要的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
             "); //拿到前台传入的一页的个数
             "); //拿到前台传入的当前页
             ; //总的行数
             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截图

jquery Easy UI Datagrid(数据网格)学习心德,附API的更多相关文章

  1. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  2. JQuery Easy Ui dataGrid 数据表格

    数据表格 - DataGrid 英文文档:http://www.jeasyui.com/documentation/index.php# 继承$.fn.panel.defaults,使用$.fn.da ...

  3. JQuery Easy Ui dataGrid 数据表格 --&gt;转

    转至: http://www.cnblogs.com/cnjava/archive/2013/01/21/2869876.html#events 数据表格 - DataGrid 内容 概况 使用方法 ...

  4. Jquery Easy UI Datagrid 上下移动批量保存数据

    DataGrid with 上下移动批量保存数据 通过前端变量保存修改数据集合,一次性提交后台执行 本想结合easyui 自带的$('#dg').datagrid('getChanges'); 方法来 ...

  5. easy ui datagrid 数据分页

    参照easyui官方网站提供的demo写了个datagrid数据分页的demo, 具体参数我就不一一罗列了,详细见官方网站, 这里只介绍一下具体的注意事项和常乃用到的几项, $('#test').da ...

  6. Jquery easy ui datagrid動態加載列問題

    1.如下图效果是当选择不同的日期范围时datagrid则会加载出对应的列数

  7. JQuery Easy Ui DataGrid

    Extend from $.fn.panel.defaults. Override defaults with $.fn.datagrid.defaults. The datagrid display ...

  8. jquery easy ui datagrid中遇到的坑爹的問題。。。

    ; //修改 function Update() { //獲取選中行 var selected = $("#dg1").datagrid('getSelected'); //判斷是 ...

  9. JQuery Easy Ui (Tree树)详解(转)

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

随机推荐

  1. 前端之jquery

    前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的 ...

  2. git clone google代码库

    git clone  https://chromium.googlesource.com/chromium/src 发现有将近7G,但是速度太慢,老是失败,提示信息先后是"The remot ...

  3. Android 更改字体

    1. 将字体ttf文件放在assets目录下 2. 使用: Typeface mTypeFaceLight = Typeface.createFromAsset(context.getAssets() ...

  4. c++ 在windows下建立目录

    #include <direct.h> #include <stdlib.h> #include <stdio.h> int main( void ) { ) { ...

  5. LeetCode-Data Stream as Disjoint Intervals

    Given a data stream input of non-negative integers a1, a2, ..., an, ..., summarize the numbers seen ...

  6. 《Linux系统free命令的使用》学习笔记

    free命令用于显示当前系统的内存空闲和使用情况,其中包括物理内存,交换分区内存,内核缓冲区内存以及高速缓存,free的参数报错一下: -b ——字节的方式显示内存使用情况 [root@redhat ...

  7. what does Html.HiddenFor () for ?

    When I want to pass some value that won't be seen by users, I find it useful to use this. It can hel ...

  8. 洛谷 [P2420] 让我们异或吧

    某两点之间的路径上所有边权的异或值即dis1^dis2--^disn. 由于x^y^y=x,所以dfs预处理出每一点到根节点的异或值,对于每次询问,直接输出 disu^disv. #include & ...

  9. [BZOJ1003] [ZJOI2006] 物流运输trans (最短路 &amp; dp)

    Description 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线,以便对整个运输过程实施严格 ...

  10. python用ftplib上传下载中文报错解决

    python中的中文编码一直以来都是一个极为头大的问题,经常抛出编码转换的异常,python中的str和unicode到底是一个什么东西呢?在python中提到unicode,一般指的是unicode ...