一、函数解释
jQuery.get()&：使用 HTTP GET 请求从服务器加载数据
jQuery.post()：使用 HTTP POST 请求从服务器加载数据
jQuery.getJSON()：使用 HTTP GET 请求从服务器加载 JSON 编码数据
jQuery.ajax()：执行异步 HTTP (Ajax) 请求
1.jQuery.get()
$(selector).get(url,data,success(response,status,xhr),dataType)
必需。规定将请求发送的哪个 URL。
可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)
可选。规定当请求成功时运行的函数。
额外的参数：
response - 包含来自请求的结果数据status - 包含请求的状态xhr - 包含 XMLHttpRequest 对象
可选。规定预计的服务器响应的数据类型。
默认地，jQuery 将智能判断。
可能的类型：
&xml&&html&&text&&script&&json&&jsonp&
简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
[javascript]&
该函数是简写的 Ajax 函数，等价于：
[javascript]&
2.jQuery.post()
post() 方法通过 HTTP POST 请求从服务器载入数据
这个方法和$.get()用法差不多，唯独多了一个type参数，那么这里就只介绍type参数吧，其他的参考上面$.get()的。
type：type为请求的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就和$.get()返回的格式一样，都是字符串的。
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
必需。规定把请求发送到哪个 URL。
可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)
可选。请求成功时执行的回调函数。
可选。规定预期的服务器响应的数据类型。
默认执行智能判断（xml、json、script 或 html）。
该函数是简写的 Ajax 函数，等价于：
[javascript]&
[javascript]&
3.jQuery.getJSON()
使用 AJAX 请求来获得 JSON 数据，并输出结果
函数没有type参数，返回的是json类型的，不需要转换。
jQuery.getJSON(url,data,success(data,status,xhr))
必需。规定将请求发送的哪个 URL。
可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)
可选。规定当请求成功时运行的函数。
额外的参数：
response&- 包含来自请求的结果数据status&- 包含请求的状态xhr&- 包含 XMLHttpRequest 对象
该函数是简写的 Ajax 函数，等价于：
[javascript]&
发送到服务器的数据可作为查询字符串附加到 URL 之后。如果&data&参数的值是对象（映射），那么在附加到 URL 之前将转换为字符串，并进行 URL 编码。
传递给&callback&的返回数据，可以是 JavaScript 对象，或以 JSON 结构定义的数组，并使用 $.parseJSON() 方法进行解析。
从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据：
[javascript]&
4.jQuery.ajax()
执行异步 HTTP (Ajax) 请求
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax() 可以不带任何参数直接使用。
注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。
jQuery.ajax([settings])
可选。用于配置 Ajax 请求的键值对集合。
可以通过 $.ajaxSetup() 设置任何选项的默认值。
通过 AJAX 加载一段文本：
[javascript]&
[javascript]&
$.ajax()是jquery中通用的一个ajax封装，其语法的格式为：
$.ajax(options)
其中options是一个object类型，它指明了本次ajax调用的具体参数，这里我把最常用的几个参数附上
&&&&&&&&url:'submit.aspx',
&&&&&&&&datatype:&json&,
&&&&&&&&type:'post',
&&&&&&&&success:function(e)
&&&&&&&&&&&&alert(e);
&&&&&&&&},
&&&&&&&&error:function(e){&&&
&&&&&&&&&&&&alert(e);
&&&&&&&&},
&&&&&&&&beforeSend:function(){&
/发送请求前调用，可以放一些&正在加载&之类额话
&&&&&&&&&&&&alert(&正在加载&);
GET&- 从指定的资源请求数据，发送至服务器的key/value数据会作为QueryString附加到请求URL中,服务器返回数据的格式其实是字符串形式，并不是我们想要的json数据格式POST&- 向指定的资源提交要处理的数据,这个函数跟$.get()参数差不多，多了一个type参数，type为返回的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就
和$.get()返回的格式一样，都是字符串的getJSON-使用 AJAX 请求来获得 JSON 数据,使用JSON相比传统的通过 GET、POST直接发送“裸体”数据，在结构上更为合理，也更为安全。至于jQuery的getJSON()函数，只是设置了JSON参数的 ajax()函数的一个简化版本。这个函数也是可以跨域使用的，相比get()、post()有一定优势。另外这个函数可以通过把请求url写
成&myurl?callback=X&这种格式，让程序执行回调函数X。
ajax()-$.ajax() 返回其创建的 XMLHttpRequest 对象
jquery的其他一些函数：
载入静态页面
load( url, [data], [callback] );
url (String) 请求的HTML页的URL地址
data (Map)(可选参数) 发送至服务器的 key/value 数据
callback (Callback) (可选参数) 请求完成时(不需要是success的)的回调函数
load()方法可以轻松载入静态页面内容到指定jQuery对象。
$('#ajax-div').load('data.html');
这样，data.html的内容将被载入到ID为ajax-div的DOM对象之内。你甚至可以通过制定ID来实现载入部分内容的Ajax操作，如：
$('#ajax-div').load('data.html#my-section');
实现GET和POST方法
get( url, [data], [callback] )
url (String) 发送请求的URL地址.
data (Map)(可选参数) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中
callback (Callback) (可选参数) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)
很显然这是一个专门实现GET方式的函数，使用起来也相当的简单
$.get('login.jsp', {
&& id&&&&& : 'Robin',
&& password: '123456',
&& gate&&& : 'index'
& }, function(data, status) {
&& //data为返回对象，status为请求的状态
&& alert(data);
&& //此时假设服务器脚本会返回一段文字&你好，Robin！&，
那么浏览器就会弹出对话框显示该段文字
&& alert(status);
&& //结果为success, error等等，但这里是成功时才能运行的函数
post( url, [data], [callback], [type] )
url (String) 发送请求的URL地址.
data (Map)(可选参数) 要发送给服务器的数据，以 Key/value 的键值对形式表示
callback (Callback) (可选参数) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)
type (String) (可选参数) 请求数据的类型，xml,text,json等
同样是jQuery提供的一个简便函数，其实用法
$.post('regsiter.jsp', {
&& id:'Robin',
&& password: '123456',
&& type:'user'
& },function(data, status) {
&& alert(data);
& }, &json&);
事件驱动的脚本载入函数：getScript()
getScript( url, [callback] )
url (String) 待载入 JS 文件地址
callback (Function) (可选) 成功载入后回调函数
getScript()函数可以远程载入JavaScript脚本并且执行。这个函数可以跨 域载入JS文件（神奇……？！）。这个函数的意义是巨大 的，它可以很大程度的缩减页面初次载入的代码量，因为你可以根据用户的交互来载入相应的JS文件，而不必在页面初始化的时候全部载入。
$.getScript('ajaxEvent.js', function() {
&& alert(&Scripts Loaded!&);
&& //载入ajaxEvent.js，并且在成功载入后显示对话框提示。
构建数据通讯的桥梁：getJSON()
getJSON(url,[data],[callback])
url (String) 发送请求地址
data (Map) (可选) 待发送 Key/value 参数
callback (Function) (可选) 载入成功时回调函数。
JSON是一种理想的数据传输格式，它能够很好的融合与JavaScript或其他宿主语 言，并且可以被JS直接使用。使用JSON相比传统的通过 GET、POST直接发送”裸体”数据，在结构上更为合理，也更为安全。至于jQuery的getJSON()函数，只是设置了JSON参数的 ajax()函数的一个简化版本。这个函数也是可以跨域使用的，相比get()、post()有一定优势。另外这个函数可以通过把请求url写 成”myurl?callback=X”这种格式，让程序执行回调函数X。
$.getJSON('feed.jsp',{
&& request: images,
&& id:&&&&& 001,
&& size:&&& large
&& }, function(json) {
&&& alert(json.images[0].link);
&&& //此处json就是远程传回的json对象，假设其格式如下：
&&& //{'images' : [
&&& // {link: images/001.jpg, x :100, y : 100},
&&& // {link: images/002.jpg, x : 200, y 200:}
更底层的ajax()函数
虽然get()和post()函数非常简洁易用，但是对于更复杂的一些设计需求还是无法实现，比如在ajax发送的不同时段做出不同的动作等。jQuery提供一个更为具体的函数：ajax()。
ajax( options )
ajax()提供了一大票参数，所以可以实现相当复杂的功能。
参数名 类型 描述&
url String (默认: 当前页地址) 发送请求的地址。&
type String (默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET”。
注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。&
timeout Number 设置请求超时时间（毫秒）。此设置将覆盖全局设置。&
async Boolean (默认: true) 默认设置下，所有请求均为异步请求。
如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。&
beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。
XMLHttpRequest 对象是唯一的参数。
function (XMLHttpRequest) {
// the options for this ajax request
cache Boolean (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。&
complete Function 请求完成后回调函数 (请求成功或失败时均调用)。
参数： XMLHttpRequest 对象，成功信息字符串。
function (XMLHttpRequest, textStatus) {
// the options for this ajax request
contentType String (默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data Object,
String 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。
如果为数组，jQuery 将自动为不同值对应同一个名称。
如 {foo:[&bar1&, &bar2&]} 转换为 ‘&foo=bar1&foo=bar2′。&
dataType String 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息
返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:
“xml”: 返回 XML 文档，可用 jQuery 处理。
“html”: 返回纯文本 HTML 信息；包含 script 元素。
“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。
“json”: 返回 JSON 数据 。
“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，
如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。
这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。
function (XMLHttpRequest, textStatus, errorThrown) {
// 通常情况下textStatus和errorThown只有其中一个有值
// the options for this ajax request
global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，
如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。
使用 HTTP 包 Last-Modified 头信息判断。
processData Boolean (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串)
以配合默认内容类型 “application/x-www-form-urlencoded”。
如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success Function 请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态
function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
&// the options for this ajax request
你 可以指定xml、script、html、json作为其数据类型，可以为beforeSend、error、sucess、complete等状态设置 处理函数，众多其它参数也可以订完完全全定义用户的Ajax体验。下面的例子中，我们用ajax()来调用一个XML文档：
&&& url: 'doc.xml',
&&& type: 'GET',
&&& dataType: 'xml',
&&& timeout: 1000,
&&& error: function(){
&&&&&&& alert('Error loading XML document');
&&& success: function(xml){
&&&&&&& alert(xml);
& //此处xml就是XML的jQuery对象了，你可以用find()、next()或XPath等方法在里面寻找节点，
和用jQuery操作HTML对象没有区别
进一步了解AJAX事件
前面讨论的一些方法都有自己的事件处理机制，从页面整体来说，都只能说是局部函数。jQuery提供了AJAX全局函数的定义，以满足特殊的需求。下面是jQuery提供的所有函数（按照触发顺序排列如下）：
(全局事件) 开始新的Ajax请求，并且此时没有其他ajax请求正在进行
beforeSend
(局部事件) 当一个Ajax请求开始时触发。如果需要，你可以在这里设置XMLHttpRequest对象
(全局事件) 请求开始前触发的全局事件
(局部事件) 请求成功时触发。即服务器没有返回错误，返回的数据也没有错误
ajaxSuccess
全局事件全局的请求成功
(局部事件) 仅当发生错误时触发。你无法同时执行success和error两个回调函数
全局事件全局的发生错误时触发
(局部事件) 不管你请求成功还是失败，即便是同步请求，你都能在请求完成时触发这个事件
ajaxComplete
全局事件全局的请求完成时触发
(全局事件) 当没有Ajax正在进行中的时候，触发
局部事件在之前的函数中都有介绍，我们主要来看看全局事件。对某个对象进行全局事件监听，那么全局中的AJAX动作，都会对其产生影响。比如，当页面在进行AJAX操作时，ID为”loading”的DIV就显示出来：
$(&#loading&).ajaxStart(function(){
&& $(this).show();
全局事件也可以帮助你编写全局的错误相应和成功相应，而不需要为每个AJAX请求独立设置。有必要指出，全局事件的参数是很有用的。除了 ajaxStart、ajaxOptions，其他事件均有event, XMLHttpRequest, ajaxOptions三个参数。第一个参数即事件本身；第二个是XHR对象；第三个是你传递的ajax参数对象。在一个对象里显示全局的AJAX情况：
$(&#msg&).beforeSend(function(e,xhr,o) {
&$(this).html(&正在请求&+o.url);
&}).ajaxSuccess(function(e,xhr,o) {
&$(this).html(o.url+&请求成功&);
&}).ajaxError(function(e,xhr,o) {
&$(this).html(o.url+&请求失败&);
很显然，第三个参数也可以帮助你传递你在AJAX事件里加入的自定义参数。 在单个AJAX请求时，你可以将global的值设为false，以将此请求独立于AJAX的全局事件。
&& url: &request.jsp&,
&& global: false,
&& // 禁用全局Ajax事件.
如果你想为全局AJAX设置参数，你会用上ajaxSetup()函数。例如，将所有AJAX请求都传递到request.php，；禁用全局方法；强制用POST方法传递：
$.ajaxSetup({
& url: &request.jsp&,
& global: false,
& type: &POST&
一些你不得不知道的方法
写AJAX肯定离不开从页面获取相应的值。在这里简单列举一些方法：
val()函数可以返回表单组建的值，例如任何种类input的值。配合选择符操作，你可以轻易获取选项组、输入框、按钮等元素的值。
$(&input[name='info']:text&).val();
//返回名字为info的文本框的值
$(&input[name='pass']:password&).val();
//返回名字为pass的密码框的值
$(&input[name='save']:radio&).val();
//返回名字为save的单选项的值
//以此类推
serialize()
serialize函数可以帮你把表单对象的所有值都转换为字符串序列。如果你要写GET格式的请求，这个就非常方便了。
serializeArray()
和serialize()类似，只不过它返回的是JSON对象。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：105409次
积分：1713
积分：1713
排名：第9800名
原创：19篇
转载：377篇
评论：13条
(10)(46)(100)(31)(65)(25)(21)(6)(3)(1)(1)(1)(22)(8)(6)(6)(5)(1)(4)(7)(6)(15)(2)(7)[转载]JQuery中serialize()、serializeArray()和param()方法
顶下面是服务器端的jsp代码：
&%@ page language="java" import="java.util.*"
pageEncoding="UTF-8"%&
& request.setCharacterEncoding("UTF-8");
& String username =
request.getParameter("username");
& String content =
request.getParameter("content");
& out.println("&div
class='comment'&&h6&
"+username+" :&/h6&&p
class='para'& "+content+"
&&&&&&&&&&&&&&
&/p&&/div&");
与JQuery中其他方法一样，serialize()方法也是作用于一个JQuery对象，它能够将DOM元素内容序列化为字符串，用于ajax请求。通过使用serialize()方法，可以提交本页面的所有域，代码如下：
$("#send").click(function(){
$.get("get1.jsp", $("#form1").serialize(), function(data,
textStatus)
&&&&&&&&&&&&&
$("#resText").html(data);
当单击“提交”按钮后，所有属于1gvddddform1的表单元素都能提交到后台，即使在表单中再增加字段，脚本仍然能够使用，并且不需要做其他多余工作。
用字符串方式时，需要注意对字符编码（中文问题），如果不希望编码带来麻烦，可以使用serialize()方法，它会自动编码。
因为serialize()方法作用于JQuery对象，所以不光只有表单能使用它，其他选择器选取的元素也都能使用它，如以下JQuery代码：
$(":checkbox,:radio").serialize();
把复选框和单选框的值序列化为字符串形式，只会将选中的值序列化。
在JQuery中还有一个与serialize()类似的方法--serializeArray()，该方法不是返回字符串，而是将DOM元素序列化后，返回JSON格式的数据。JQuery代码如下：
var fields = $(":checkbox,:radio").serializeArray();
console.log(fields);&&&
//用FireBug输出
$.param()方法是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。
比如将一个普通的对象序列化：
var obj = {a:1,b:2,c:3};
var k = $.param(obj);
alert(k);&&&
//输出a=1&b=2&c=3
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。（转）基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用 - 好代码编程网
（转）基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用
原文地址：/wuhuacong/p/3317223.html
在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔，本篇继续介绍其中界面部分的一些使用知识，包括控件的赋值、取值、清空，以及相关的使用。
我们知道，一般Web界面包括的界面控件有：单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选择、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示信息、列表控件等，这些界面控件的操作都有哪些不同，下面我们来逐一进行介绍。
1、单行文本框
使用easyui的控件，单行文本可以使用easyui-validatebox样式即可，类型为text的控件。
界面代码如下所示：
&input class="easyui-validatebox" type="text" id="Name" name="Name" /&
&input type="text" ID="txtLoginName" name="txtLoginName" style="width:100px"
赋值给界面控件代码如下：
$("#Name").val(info.Name);
获取界面控件的值代码如下：
var name = $("#Name").val();
如果是标签Lable控件，这需要把val 使用text替代即可，如下代码所示：
$("#Name").text(info.Name);
&对于easyui-validatebox样式的控件，一般来说，有几个常见属性可以设置他们的。
//必输项：
&input class="easyui-validatebox" type="text" name="name" data-options="required:true"&&/input&
//格式的验证：
&input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'"&&/input&
&input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'url'"&&/input&
//长度范围的验证：
&input class="easyui-validatebox" data-options="validType:'length[1,3]'"&
2、多行文本框
easyui的界面样式，可以使用easyui-validatebox，或者默认的textarea即可。
界面代码如下所示：
&textarea id="type_Remark" class="easyui-validatebox" required="true" style="height:100"&&/textarea&
&textarea style="height:60width:200px" id="type_Remark" name="Remark"&&/textarea&
赋值给界面控件代码如下：
$("#type_Remark").val(json.Remark);
获取界面控件的值代码如下：
var text = $("#type_Remark").val();
3、密码文本框
密码文本框和常规的文本框一样，只是输入字符的时候，系统做了屏蔽显示而已，把它作为一个来独立说明，也是因为它也是常见输入的一种。
界面代码如下所示：
&input type="password" name="password" style="width:260"&&/input&
赋值给界面控件代码如下：
var password = '123';
$("#Password").val(password)
获取界面控件的值代码如下：
$("#btnLogin").click(function () {
var postData = {
UserName: $("#UserName").val(),
Password: $("#Password").val(),
Code: $("#Code").val()
4、下拉列表Combobox
常见的EasyUI的ComboBox是可以输入，也可以从列表选择的内容的输入控件。
界面代码如下所示：
&input class="easyui-combobox" type="text" id="type_PID1" name="PID" /&
绑定下拉列表的数据源代码如下：
$('#type_PID1').combobox({
url: '/DictType/GetDictJson',
valueField: 'Value',
textField: 'Text'
设置控件的选择的内容代码如下：
$("#type_PID1").combobox('setValue', json.PID);
获取界面控件的值代码如下：
var systemType=
$("#txtSystemType_ID").combobox('getValue');
&而利用标准的Select控件虽然可以实现从列表选择，不过不够ComboBox控件那么灵活方便，Select控件的界面代码如下：
&select id="txtPID" style="width: 100%" & &/select&
5、日期输入控件
easyui使用class=&easyui-datebox&来标识日期控件，从弹出的层中选择正确的日期，是一种非常常见的界面输入控件，可以替代My97DatePicker日期输入控件。
弹出窗体界面效果如下。
它的界面代码如下所示：
&input class="easyui-datebox" type="text" ID="txtLastUpdated" name="txtLastUpdated" style="width:100px"
赋值给界面控件代码如下：
$("#LastUpdated").datebox('setValue', info.LastUpdated);
获取界面控件的值代码如下：
var lastupate = $("#txtLastUpdated").datebox('getValue');
6、数值输入控件
easyui使用样式easyui-numberbox标识为数值类型，其表现为文本框，但只能输入数值。
界面代码如下所示：
&input class="easyui-numberbox" data-options="min:10,max:90,precision:2,required:true"&
或者使用&easyui-numberspinner&样式来标识，可以上下调节数值。
&input class="easyui-numberspinner" data-options="min:10,max:100,required:true" style="width:80"&&/input&
赋值给界面控件代码如下：
$('#nn').numberbox('setValue', 206.12);
$('#ss').numberspinner('setValue', 8234725);
获取界面控件的值代码如下：
var v = $('#nn').numberbox('getValue');
var v = $('#ss').numberspinner('getValue');
7、单项选择Radio控件
单项选择Radio控件，是在多项内容里面选择一个选项进行保存或者显示。
界面代码如下所示：
&label&数据分开方式：&/label&
&input name="SplitType" type="radio" class="easyui-validatebox" checked="checked" required="true" value="Split"&分隔符方式，多个数据中英文逗号，分号，斜杠或顿号[, ， ; ； / 、]分开，或一行一个
&input name="SplitType" type="radio" class="easyui-validatebox" required="true" value="Line"&一行一个记录模式，忽略所有分隔符号
赋值给界面控件代码如下：
$('input:radio[name="SplitType"][value="Split"]').prop('checked', true);
获取界面控件的值代码如下：
$("input[name='SplitType']:checked").val()
或者使用Comobo控件作为单项选择的控件也是可以的，界面效果如下所示。
其界面代码如下所示：
&select id="cc" style="width:150px"&&/select&
&div id="sp"&
&div style="color:#99BBE8;background:#padding:5"&Select a language&/div&
&input type="radio" name="lang" value="01"&&span&Java&/span&&br/&
&input type="radio" name="lang" value="02"&&span&C#&/span&&br/&
&input type="radio" name="lang" value="03"&&span&Ruby&/span&&br/&
&input type="radio" name="lang" value="04"&&span&Basic&/span&&br/&
&input type="radio" name="lang" value="05"&&span&Fortran&/span&
&script type="text/javascript"&
$(function(){
$('#cc').combo({
required:true,
editable:false
$('#sp').appendTo($('#cc').combo('panel'));
$('#sp input').click(function(){
var v = $(this).val();
var s = $(this).next('span').text();
$('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
复选框是在一项或多项内容中，选择零项或者多项的一个输入界面控件。
界面代码如下所示：
&input id="chkIsExpire" type="checkbox" &帐号过期
由于复选框的一些特殊性质，在表单提交的时候，如果没有勾选的选型，使用serializeArray()方法构造的数据，复选框的值则不会被提交。
基于这个原因，我们可以使用Select控件进行替代，实现复选项的功能，而不影响
var postData = $("#ffEdit").serializeArray();
以上代码的使用。
使用Select控件的代码如下所示。
id="Visible1" name="Visible"&
&option value="true" selected&正常&/option&
&option value="false"&不可见&/option&
赋值给界面控件代码如下：
$("#Visible1").prop('checked', info.Visible);
获取界面控件的值代码如下：
var visible = $("#txtVisible").val();
9、表格控件DataGrid
easyui的列表控件，可以通过指定table的class属性为easyui-datagrid即可实现表格的定义，界面代码如下所示：
&table class="easyui-datagrid" title="Basic DataGrid" style="width:700height:250px"
data-options="singleSelect:true,collapsible:true,url:'../datagrid/datagrid_data1.json'"&
&th data-options="field:'itemid',width:80"&Item ID&/th&
&th data-options="field:'productid',width:100"&Product&/th&
&th data-options="field:'listprice',width:80,align:'right'"&List Price&/th&
&th data-options="field:'unitcost',width:80,align:'right'"&Unit Cost&/th&
&th data-options="field:'attr1',width:250"&Attribute&/th&
&th data-options="field:'status',width:60,align:'center'"&Status&/th&
不过为了避免使用脚本定义datagrid导致多次初始化的问题，我们一般只需要指定一个table代码即可，界面如下所示
&table id="grid" style="width: 1024px" title="用户操作" iconcls="icon-view"&
而表格控件的数据加载，我们使用javascript进行初始化，初始化后的表格界面显示效果如下所示。
Javascript代码如下所示，其中的width: function () { return document.body.clientWidth * 0.9 }是用来实现宽度自适应的一个操作。
//实现对DataGird控件的绑定操作
function InitGrid(queryData) {
$('#grid').datagrid({
//定位到Table标签，Table标签的ID是grid
url: '/Menu/FindWithPager',
//指向后台的Action来获取当前菜单的信息的Json格式的数据
title: '功能菜单',
iconCls: 'icon-view',
height: 650,
width: function () { return document.body.clientWidth * 0.9 },
nowrap: true,
autoRowHeight: false,
striped: true,
collapsible: true,
pagination: true,
pageSize: 100,
pageList: [50,100,200],
rownumbers: true,
//sortName: 'ID',
//根据某个字段给easyUI排序
sortOrder: 'asc',
remoteSort: false,
idField: 'ID',
queryParams: queryData,
//异步查询的参数
columns: [[
{ field: 'ck', checkbox: true },
{ title: '显示名称', field: 'Name', width: 200},
{ title: '图标', field: 'Icon', width: 150 },
{ title: '排序', field: 'Seq', width: 80 },
{ title: '功能ID', field: 'FunctionId', width: 80 },
{ title: '菜单可见', field: 'Visible', width: 80 },
{ title: 'Winform窗体类型', field: 'WinformType', width: 400 },
{ title: 'Web界面Url地址', field: 'Url', width: 200 },
{ title: 'Web界面的菜单图标', field: 'WebIcon', width: 120 },
{ title: '系统编号', field: 'SystemType_ID', width: 80 }
toolbar: [{
id: 'btnAdd',
text: '添加',
iconCls: 'icon-add',
handler: function () {
ShowAddDialog();//实现添加记录的页面
id: 'btnEdit',
text: '修改',
iconCls: 'icon-edit',
handler: function () {
ShowEditOrViewDialog();//实现修改记录的方法
id: 'btnDelete',
text: '删除',
iconCls: 'icon-remove',
handler: function () {
Delete();//实现直接删除数据的方法
id: 'btnView',
text: '查看',
iconCls: 'icon-table',
handler: function () {
ShowEditOrViewDialog("view");//实现查看记录详细信息的方法
id: 'btnReload',
text: '刷新',
iconCls: 'icon-reload',
handler: function () {
//实现刷新栏目中的数据
$("#grid").datagrid("reload");
onDblClickRow: function (rowIndex, rowData) {
$('#grid').datagrid('uncheckAll');
$('#grid').datagrid('checkRow', rowIndex);
ShowEditOrViewDialog();
对于查询按钮触发的数据后台查询及数据绑定操作，javascript代码如下所示：
//绑定查询按钮的的点击事件
function BindSearchEvent() {
//按条件进行查询数据，首先我们得到数据的值
$("#btnSearch").click(function () {
//得到用户输入的参数，取值有几种方式：$("#id").combobox('getValue'), $("#id").datebox('getValue'), $("#id").val()
//字段增加WHC_前缀字符，避免传递如URL这样的Request关键字冲突
var queryData = {
WHC_ID: $("#txtID").val(),
WHC_Name: $("#txtName").val(),
WHC_Icon: $("#txtIcon").val(),
WHC_Seq: $("#txtSeq").val(),
WHC_FunctionId: $("#txtFunctionId").val(),
WHC_Visible: $("#txtVisible").val(),
WHC_WinformType: $("#txtWinformType").val(),
WHC_Url: $("#txtUrl").val(),
WHC_WebIcon: $("#txtWebIcon").val(),
WHC_SystemType_ID: $("#txtSystemType_ID").val()
//将值传递给
InitGrid(queryData);
return false;
通过构造一些查询参数并传递相应的值，后台根据这些参数，从对应控制器的分页方法&FindWithPager&获取相应的分页数据，并绑定到grid控件中。
另外，如果需要在grid里面增加一些图片或者链接什么的，应该如何操作呢？
如下界面所示的效果：
首先需要在初始化代码里面增加列的formatter回调函数，如下所示。
columns: [[
{ field: 'ck', checkbox: true },
{ title: '显示名称', field: 'Name', width: 200},
{ title: '图标', field: 'Icon', width: 150 },
{ title: '排序', field: 'Seq', width: 80 },
{ title: '功能ID', field: 'FunctionId', width: 80 },
title: '菜单可见', field: 'Visible', width: 80, formatter: function (val, rowdata, index) {
if (val) {
return '&a class="grid_visible" href="javascript:void(0)" target="_blank" rel="nofollow">else {
return '&a class="grid_unvisible" href="javascript:void(0)" target="_blank" rel="nofollow">
在formatter回调函数里面添加逻辑代码，判断是否可见，其实就是增加两个图片按钮，但是图片按钮的样式设置，必须在加载数据完毕后才能操作，因此需要在函数里面处理。
onLoadSuccess: function () {
$(".grid_visible").linkbutton({ text: '可见', plain: true, iconCls: 'icon-ok' });
$(".grid_unvisible").linkbutton({ text: '不可见', plain: true, iconCls: 'icon-stop' });
如果显示的图片不完整，设置行的自动调整高度属性为true即可。
autoRowHeight: true
10、树形控件
虽然easyui也有Tree控件，不过我较喜欢使用zTree这个树形控件，这个是一个免费的Jquery树控件。
引用代码如下所示：
&link href="~/Content/JQueryTools/JQueryTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" /&
&script src="~/Content/JQueryTools/JQueryTree/js/jquery.ztree.core-3.5.min.js" type="text/javascript"&&/script&
初始化在Tree树控件的界面代码如下所示：
&script type="text/javascript"&
var setting = {
simpleData: {
enable: true
callback: {
onClick: onClick,
onDblClick: onDblClick
//重新加载树形结构（异步）
function reloadTree() {
$("#loading").show();
$.getJSON("/DictType/GetTreeJson?r=" + Math.random(), function (json) {
$.fn.zTree.init($("#treeDemo"), setting, json);
$.fn.zTree.getZTreeObj("treeDemo").expandAll(true);
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var treeNodes = treeObj.getNodes();
if (treeNodes != null) {
loadTypeData(treeNodes[0].id);
$("#loading").fadeOut(500);
//树单击节点操作
function onClick(event, treeId, treeNode, clickFlag) {
var id = treeNode.
loadTypeData(id);
//树双击节点操作
function onDblClick(event, treeId, treeNode) {
var id = treeNode.
loadTypeData(id);
ShowDictType('edit');
11、布局控件
EasyUI通过DIV层来控制布局的显示，DIV里面增加一个Region的属性用来区分属于哪个区域，如下图是我Web开发框架的界面布局效果图。
界面代码如下所示：
我们详细查看主工作区的代码，如下所示。
&!--主工作区--&
&div id="mainPanle" region="center" title="" style="overflow:"&
&div id="tabs" class="easyui-tabs"
fit="true" border="false" &
&其中字典管理里面还有子布局的展示，我们查看字典管理里面界面代码，如下所示。
&div class="easyui-layout" style="width:700height:700" fit="true"&
&div data-options="region:'west',split:true,title:'字典类别',iconCls:'icon-book'" style="width: 300 padding: 1"&
&div style="padding: 1 border: 1px solid #"&
.......................&/div&
&ul id="treeDemo" class="ztree"&
&div id="tb" data-options="region:'center',title:'字典数据',iconCls:'icon-book'" style="padding:5height:auto"&
&!-------------------------------详细信息展示表格-----------------------------------&
&table id="grid" style="width: 940px" title="用户操作" iconcls="icon-view"&&/table&
12、弹出式对话框
EasyUI弹出式对话框用的很多，对话框的界面代码放在DIV层里面，一般在界面整个界面加载后中已经初始化了，只是我们根据条件相似适当的层即可，这样就形成了弹出式对话框，弹出式对话框有一个遮罩的效果。
界面代码如下所示：
13、提示信息
在常规的Web界面提示里面，我们一般用纯粹的javascript的alert函数来进行信息的提示，如果在基于EasyUI的界面布局和演示里面，使用这个提示显然会和界面演示不够匹配，因此我们使用messager类来进行相应的提示信息处理，简单的脚本提示代码如下。
$.messager.alert("提示", "修改成功");
提示信息也可以更加丰富，添加图标等信息，界面代码如下所示。
function alert1(){
$.messager.alert('My Title','Here is a message!');
function alert2(){
$.messager.alert('My Title','Here is a error message!','error');
function alert3(){
$.messager.alert('My Title','Here is a info message!','info');
function alert4(){
$.messager.alert('My Title','Here is a question message!','question');
function alert5(){
$.messager.alert('My Title','Here is a warning message!','warning');
对于一般的删除操作，一般有一个提示确认的消息框，这个messager类也进行了封装处理，效果也不错。
界面代码如下所示。
$.messager.confirm("删除确认", "您确认删除选定的记录吗？", function (deleteAction) {
if (deleteAction) {
$.get("/DictData/DeletebyIds", postData, function (data) {
if (data == "true") {
$.messager.alert("提示", "删除选定的记录成功");
$("#grid").datagrid("reload");
//当删除完成之后，第二次删除的时候还记得上次的信息，这样是不可以的，所以我们需要清除第一次的信息
rows.length = "";//第一种方法
$("#grid").datagrid("clearSelections");//第二种方法
$.messager.alert("提示", data);
以上就是我Web开发框架里面常用到的一些界面控件展示以及相关的代码介绍，有一些不太常用的控件可能还没有在本文中介绍，欢迎大家进行补充和讨论，以后有时间继续完善这个文章，作为基于MVC+EasyUI的框架界面的一个很好的参考。
希望大家喜欢，多多提意见。
.Net 文章一周点击
.Net 文章一月点击
HaoGongJu.Net ( 好代码 ) All Rights Reserved