jQuery EasyUI是什么？

　　jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

说白了就是为我们后端开发者打造的前端神器，我们不用去写复杂的javascript代码，也不用对CSS有深入的了解，只要能看懂和修改html就可以做出漂亮的页面，是不是感觉很爽。

　　定义：基于Jquery的UI插件集合

　　功能：打造功能丰富并且美观的UI界面

jQuery EasyUI有哪些好处呢？

　　1、基于Jquery用户界面插件的集合

　　2、为一些当前用于交互的js应用提供必要的功能

　　3、EasyUI支持两种渲染方式分别为javascript方式和html标记的方式（如：class="easyui-textbox"）

　　4、支持HTML5（通过data-option属性）

　　5、开发者可以节省大量的时间

　　6、支持扩展，可以根据自己的需要来进行扩展控件

　吐槽：　刚刚毕业的时候我记得当年那家公司让我做样式，写CSS，我当时就蒙了，这尼玛我应聘的是.Net开发，你这是闹哪样让我写CSS脑子让驴给亲了，毕竟刚刚毕业，让干啥干啥呗，嫁鸡随鸡，嫁狗随狗呗。别提有多痛苦。。都是泪~~幸好我对面是个美女，我就成天对着她以泪洗面~~~~~~~~~~~~

　　

　　JquerEasyUI英文网站：http://www.jeasyui.com/

　　JquerEasyUI中文网站：http://www.jeasyui.net/

　　本人整理jQuery EasyUI 1.4.1 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示：http://pan.baidu.com/s/1bn6SKZ9

　　接下来我们实践一个dataGridView的数据控件

　　1：导入需要的文件包到项目里面，一个是themes里的内容，和js文件

　　　　

2：引入文件（路径复制完了之后改成自己的，千万别忘了改路径）

<link href="~/Content/EasyUI/themes/default/easyui.css" rel="stylesheet" />

    <link href="~/Content/EasyUI/themes/icon.css" rel="stylesheet" />

    <script src="~/Scripts/jquery.min.js"></script>

    <script src="~/Scripts/jquery.easyui.min.js"></script>

3：添加script代码（handler）

<script type="text/javascript">

        $(function(){

            var pager = $('#dg').datagrid().datagrid('getPager');    // get the pager of datagrid

            pager.pagination({

                buttons:[{

                    iconCls:'icon-search',

                    handler:function(){

                        alert('search');

                    }

                },{

                    iconCls:'icon-add',

                    handler:function(){

                        alert('add');

                    }

                },{

                    iconCls:'icon-edit',

                    handler:function(){

                        alert('edit');

                    }

                }]

            });

        })

    </script>

4：然后呢修改body代码（这里要说的就是url那里，加载当前页面之后Easyui会异步加载json数据，url地址就是异步加载数据的地址）

<body>

    <!------------------------------dataGrid Start id=dg---------------------------------------------->

    <div>

        <table id="dg" title="用户管理" style="width: 700px; height: 250px"

            data-options="rownumbers:true,singleSelect:true,pagination:true,url:'/Home/GetListData',method:'get'">

            <thead>

                <tr>

                    <th data-options="field:'ID',width:80">ID</th>

                    <th data-options="field:'UName',width:100">用户名</th>

                    <th data-options="field:'UPwd',width:80,align:'right'">密码</th>

                    <th data-options="field:'Remark',width:80,align:'right'">备注</th>

                </tr>

            </thead>

        </table>

    </div>

  </body>

5：页面就显示了，接下来我们根据自己的需求再对代码按照自己的需求进行更改；

如果有错误的地方请大家指出，希望能与大家多多交流，有什么问题也可以与我联系，谢谢；

jQueryEasyUI 学习笔记的更多相关文章

  1. jQueryEasyUI学习笔记

    data-options 是jQuery Easyui的一个特殊属性.通过这个属性,我们可以对easyui组件的实例化可以完全写入到html中 data-options="region:'w ...

  2. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  4. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  5. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  6. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  7. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  8. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  9. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

随机推荐

  1. hadoop 2.7.3伪分布式安装

    hadoop 2.7.3伪分布式安装 hadoop集群的伪分布式部署由于只需要一台服务器,在测试,开发过程中还是很方便实用的,有必要将搭建伪分布式的过程记录下来,好记性不如烂笔头. hadoop 2. ...

  2. django drf Token验证

    https://www.django-rest-framework.org/api-guide/authentication/#basicauthentication 1.INSTALLED_APPS ...

  3. Kafka与.net core（一）安装

    1.安装JDK 目前官网不能直接下载,在网上找到1.8.0版本安装包下载到本地. 1.1.下载jdk并解压 [root@iz2zei2y693gtrgwlibzlwz java]# ls jdk1.. ...

  4. CTF之信息泄漏

    web源码泄漏 .hg源码泄漏: 漏洞成因:hg  init的时候会生成.hg,http://www.xx.com/.hg/, 工具:dvcs-ripper,(rip-hg.pl -v -u http ...

  5. 【vim】正常模式下的一般操作

    正常模式一般用于浏览文本,其实也就是通过键盘命令让光标在文本中跳来跳去,在任何模式下按一次或两次<Esc>会进入正常模式. 基本思想 vim对光标的定位操作非常精确和高效,这是它的一个非常 ...

  6. Android-获取手机已经安装的程序

    有时候我们会查询手机里面是否安装了某个程序,或者获取已经安装软件名称的集合. android这边提供了相应的接口. [java] view plaincopy final PackageManager ...

  7. react onclick传递参数

    最近在做react项目的时候,被一个小问题绊了一脚,记录一下 onClick 传入参数 onClick={e=>{this.Mallclose(e,index)} onClick={this.M ...

  8. 编译原理（一）绪论概念&文法与语言

    绪论概念&文法与语言 以老师PPT为标准,借鉴部分教材内容,AlvinZH学习笔记. 绪论基本概念 1. 低级语言:字位码.机器语言.汇编语言.与特定的机器有关,功效高,但使用复杂.繁琐.费时 ...

  9. 能够放在文档的 <head> 中的各种配置元素

    一份关于任何可以写入到你的文档中 <head> 部分的清单 最小推荐 <meta charset="utf-8"> <meta http-equiv= ...

  10. PCA简单实现

    ''' 总结一下PCA的算法步骤: 设有m条n维数据. 1)将原始数据按列组成n行m列矩阵X 2)将X的每一行(代表一个属性字段)进行零均值化,即减去这一行的均值 3)求出协方差矩阵C=1/m*(XX ...