详解jQuery中的easyui

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

一，easyui---datagrid绑定数据的简单测试：

1.数据库中的UserInfo表及数据测试：

2.DAL层：

//分页，模糊查询（pageNum-1)*pageSize+1----从第几条数据开始，pageNum*pageSize----查询到那一条结束

//查询总的条数

3.一般处理程序（UserInfoHander.ashx）：

4.datagrid绑定数据：

<script type="text/javascript">
 $(function () {
 loadUser();
 $("#datagrid").datagrid({
 url: "UserInfoHander.ashx",//请求一般处理程序
type: "post",
 title: "用户信息表",
remoteSort: false,//默认为true 如果对本地数据排序必须设置为false
 height: 500,//设置表格的高度
pageSize: 5,//每页显示的数据
pageList: [1, 2, 3, 4, 5, 6],
 pagination: true,//是否开启分页
rownumbers: true,//是否显示行号
singleSelect: true,//是否只能单行选中
queryParams: getQueryParams(),//返回参数
columns: [[
 { field: "ck", checkbox: true },
 { field: "id", title: "编号", width: 100, sortable: true },//sortable: true 指定字段进行数据排序
{ field: "name", title: "用户名", width: 150 },
 { field: "phone", title: "电话", width: 150 },
 { field: "address", title: "地址", width: 300 }
//此处的id,name,phone,address字段与实体类中提供get,set属性一 一 对 应
]],
<script />

5.效果图：

总结

以上所述是小编给大家介绍的jQuery中的easyui，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言小编会及时回复大家的！

赞 (0)

相关推荐

  • jQuery Easyui Treegrid实现显示checkbox功能

    jQuery Easyui Treegrid实现显示checkbox功能

    下面通过本文给大家介绍下图中的treegrid如何实现? 要求:动态加载:级联勾选:通关类型判断显示包库/还是镜像(列有所不同,镜像共4列),勾选一个复选框,后面的复选框变为不可勾选状态. 下面是具体代码: 1,初始化treegrid,(其中有几个type列,是由后台人员提供的字段名,虽然我也不想弄一堆type...汗) var root = 20543; //初始化产品树 function InitProductTreeGrid(rootid) { var type = '<%=Control

  • JQuery EasyUI的一些常用组件

    jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一.表单 form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等.当提交表单的时候可以调用validate方法检查表单是否有效. 用法: 使用form标签创建 <form id="ff" method="post"> <

  • 基于jQuery Easyui实现登陆框界面

    基于jQuery Easyui实现登陆框界面

    效果图 CSS a{ text-decoration:none; } body{ margin:0px; } #header{ width:100%; height:30px; background-color:#E0EFFF; padding-top: 5px; padding-bottom: 10px; } #header .logo{ margin-left: 50px; font-size: 24px; font-family: 微软雅黑; } #picture{ width:100%;

  • jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数

    jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数

    功能需求如下: 1) 使用 datetimebox 日期控件, 选择开始日期 startdate, 结束日期 leavedate ,然后求两日期间相隔天数 numdays ; 2) 天数 x 补助 = 包干费用; (numdays * allowance = def11 ) 下面是效果图: 一. form 表单:开始时间,结束时间两个都使用 onChange 事件; <td>派遣时间:</td> <td><input class="easyui-date

  • Jquery EasyUI $.Parser

    Jquery EasyUI $.Parser

    Parser(解析器) 对象的属性和方法: 使用: <link href="~/jquery-easyui-1.5.2/themes/bootstrap/easyui.css" rel="external nofollow" rel="stylesheet" /> <script src="~/jquery-easyui-1.5.2/jquery.min.js"></script> <

  • jQuery EasyUI的TreeGrid查询功能实现方法

    jQuery EasyUI的TreeGrid查询功能实现方法

    最近需要实现对treeGrid的查询功能,具体查询界面如下: 可以查询根节点和具体子节点的信息,开始使用EasyUI的TreeGrid的loadData 加载url的方式不能实现查询功能,于是利用异步AJAX查询了一下数据返回后,赋值给变量,然后利用 TreeGrid的loadData加载这个json格式的返回结果实现了对TreeGrid的查询功能,代码如下: function searchROM() { var product = $('#Product').combobox('getValu

  • 详解jQuery中的easyui

    jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签. 一,easyui---datagrid绑定数据的简单测试: 1.数据库中的UserInfo表及数据测试: 2.DAL层: //分页,模糊查询(pageNum-1)*pageSize+1----从第几条数据开始,pa

  • 详解jQuery中ajax.load()方法

    jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector).load(URL,data,callback); load()函数用于从服务器加载数据,并使用返回的html内容替换当前匹配元素的内容. load()函数默认使用GET方式,如果提供了对象形式的数据,则自动转为POST方式. 因为默认使用的是Get请求方式,所以我们也可以在url加数据进行提交. 例

  • 详解jQuery中的DOM操作

    详解jQuery中的DOM操作

    大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. jQuery中的DOM操作 看看DOM操作都有哪些 逐一来看 先写一份HTML代码,后面的代码将操作这份HTML代码 <p title="选择你最喜欢的水果">你最喜欢的水果?</p> <ul> <li title="苹果">苹果</li> <li title=

  • 详解jQuery中的元素的属性和相关操作

    元素属性 元素的属性中可以包含很多有用的信息,所以如何设置或得到属性中的值,就显得非常重要. jQuery 的 $.fn.attr 方法可以作为 setter 和 getter 使用,用来设置或获取属性的值.和 $.fn.css 用法类似,$.fn.attr 既可一次性接受单个属性,也可以接受多个属性(对象) : $('a').attr('href', 'allMyHrefsAreTheSameNow.html'); $('a').attr({ 'title' : 'all titles are

  • 详解jQuery中的事件

    详解jQuery中的事件

    大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 jQuery中的事件 加载DOM 在jQuery中是用$(document).ready()方法来替代JavaScript中的window.onload方法的,但是他们也有一些不同点 1.执行时机 例如我们有一个有很多图片的网页 $(document).ready()方法是在这个网页的DOM树加载完就可以执行的,而window.onload方法必须在DOM树加载完和图片都加载完

  • 详解jQuery中的deferred对象的使用（一）

    deferred对象是jQuery对Promises接口的实现.它是非同步操作的通用接口,可以被看作是一个等待完成的任务,开发者通过一些通过的接口对其进行设置.事实上,它扮演代理人(proxy)的角色,将那些非同步操作包装成具有某些统一特性的对象,典型例子就是Ajax操作.网页动画.web worker等等. jQuery的所有Ajax操作函数,默认返回的就是一个deferred对象. 在jquery1.5之后的版本中,加入了一个deferred对象,也就是延迟对象,用来处理未来某一时间点发生的

  • 详解jQuery中的empty、remove和detach

    详解jQuery中的empty、remove和detach

    通过一张对比表来解释几个方法之间的不同 三者都有把元素移除的作用,但细微的差别,造就了它们的使命不同. 最权威的解释当然是jQuery_API咯,下面是API中关于他三儿的部分截取. 一.empty: This method removes not only child (and other descendant) elements, but also any text within the set of matched elements. This is because, according

  • 详解jQuery中关于Ajax的几个常用的函数

    一: AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 有很多使用 AJAX 的应用程序案例:新浪微博.Google 地图.开心网等等. 二:传

  • 详解jQuery中基本的动画方法

    详解jQuery中基本的动画方法

    大致介绍 通过jQuery中基本的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验 jQuery中的动画 show()和hide()方法 1.show()方法和hide()方法是jQuery中最基本的方法,hide()方法会将一个元素的display设置为"none": 2.show()方法和hide()方法会同时改变元素的宽度.高度和透明度 3.在一个元素使用hide()方法时会记录原先的display属性,当调用show()方法的时候会根据hide()方法记住

  • 详解jQuery中的getAll()和cleanData()

    前言: 看 jQuery 源码的一个痛点就是调用一个函数时,里面会调用 N 个其他函数,然后这 N 个函数里面又会调用 M 个其他其他函数.. 本篇文章主要是对detach()/empty()/remove()/unwrap()]() 中两个函数 getAll和cleanData() 进行解析. 一.getAll(context, tag) 作用: 用来获取 context 上的 tag 标签,或者是将 context 和 context 里的 tag 标签的元素合并 源码: //一般是传的no

随机推荐