第一步,引入主要的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 ...

  10. Jquery easy UI 上中下三栏布局 分类: ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏

    效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

随机推荐

  1. css(一)

    CSS CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一 css的四种引入方式 1.行内式          ...

  2. FireBug提示:本页面不包含 JavaScript,明明是包含js的。

    本页面不包含 JavaScript 如果 <script> 标签有 "type" 属性, 其值应为 "text/javascript" 或者 &qu ...

  3. cxf webservice简单应用

    Server端 server部署到一个端口号为80的tomcat中 CXFController.java package com.lwj.controller; import java.io.IOEx ...

  4. hadoop2.2.0伪分布式搭建2--安装JDK

    2.1上传FileZilla 上传 https://filezilla-project.org/ 2.2解压jdk #创建文件夹 mkdir /usr/java #解压 tar -zxvf jdk-7 ...

  5. 移动端公共css样式

    @media screen and ( min-width: 319px){html{ font-size: 100px;}}@media screen and ( min-width: 359px) ...

  6. Spring MVC数组绑定

    需求:商品批量删除,用户在页面选择多个商品,批量删除. 关键:将页面选择(多选)的商品id,传到controller方法的形参,方法形参使用数组接收页面请求的多个商品id // 批量删除 商品信息 @ ...

  7. JS中如何判断null、undefined与NaN

    1.判断undefined: <span style="font-size: small;">var tmp = undefined; if (typeof(tmp)  ...

  8. Eclipse使用技巧及个性化设计

    以下除特殊说明均在 Windows->Preferences里面操作 如何把Eclipse关闭提示调出来? General->Startup and Shutdown,在 Confirm ...

  9. FileZilla Server下载以及安装使用

    新版本filezilla server已经不能在windows xp和windows20003下使用了 下面是可以在xp和2003下使用的最后版本下载地址 http://pan.baidu.com/s ...

  10. struts2 ActionSupport关联源码