jquery_EasyUI的学习

1 Accordion（可折叠标签）

1.1 实例

1.1.1 代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script type="text/javascript">

$( function() {

$('#aa').accordion( {

width : 400,

height : 200,

fit : false

});

});

</script>

</head>

<body>

 

<div id="aa" border="true" >

<div title="Title1" icon="icon-save" style="overflow: auto; padding: 10px;">

<h3 style="color: #0099FF;">Accordion for jQuery</h3>

<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>

</div>

<div title="Title2" icon="icon-reload" selected="true"

style="padding: 10px;">content2</div>

<div title="Title3">content3</div>

</div>

 

</body>

</html>

 

1.1.2 效果图

 

 

1.1.3  扩展

实例html代码中

<div id="aa" border="true" >

此行也可写成

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" fit="false" border="false">

，并且将js代码全部去掉，效果图是一样的。

1.2 参数

1.2.1 容器参数

参数名称

参数类型

描述

默认值

width

数字

可折叠标签的宽度。

auto

height

数字

可折叠标签的高度。

auto

fit

布尔

是否使可折叠标签自动缩放以适应父容器的大小，当为true时width和height参数将失效。

false

border

布尔

是否显示边界线。

true

1.2.2 面板参数

可折叠标签面板继承自面板（panel）,许多属性定义在<div />标签里，下面的属性就是如此：

参数名称

参数类型

描述

默认值

selected

布尔

设置可折叠标签中默认展开的标签页

false

 

2 DateBox（日期框）

2.1 实例

2.1.1 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

function disable() {

$('#dd').datebox('disable');

}

function enable() {

$('#dd').datebox('enable');

}

 

/*  

 将Date/String类型,解析为String类型.  

 传入String类型,则先解析为Date类型  

 不正确的Date,返回 ''  

 如果时间部分为0,则忽略,只返回日期部分.  

 */

function formatDate(v) {

if (v instanceof Date) {

var y = v.getFullYear();

var m = v.getMonth() + 1;

var d = v.getDate();

var h = v.getHours();

var i = v.getMinutes();

var s = v.getSeconds();

var ms = v.getMilliseconds();

if (ms > 0)

return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s

+ '.' + ms;

if (h > 0 || i > 0 || s > 0)

return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;

return y + '-' + m + '-' + d;

}

return '';

}

 

$( function() {

$('#dd').datebox( {

currentText : '今天',

closeText : '关闭',

disabled : false,

required : true,

missingMessage : '必填',

formatter : formatDate

 

});

});

</script>

</head>

<body>

<h1>DateBox</h1>

<div style="margin-bottom: 10px;"><a href="#" onclick=

disable();

>disable</a>

<a href="#" onclick=

enable();

>enable</a></div>

<input id="dd"></input>

</body>

</html>

2.1.2 效果图

 

2.2 参数

属性名

类型

描述

默认值

currentText

字符串

为当前日期按钮显示的文本

Today

closeText

字符串

关闭按钮显示的文本

Close

disabled

布尔

如果为true则禁用输入框

false

required

布尔

定义输入框是否为必添

false

missingMessage

字符串

当输入框为空时提示的文本

必填

formatter

function

格式化日期的函数，这个函数以’date’为参数，并且返回一个字符串

——

parser

function

分析字符串的函数，这个函数以’date’为参数并返回一个日期

——

2.3 事件

事件名

参数

描述

  

onSelect

date

当选择一个日期时触发

  

2.4 方法

方法名

参数

描述

  

destroy

none

销毁组件

  

disable

none

禁用输入框.

  

enable

none

启用输入框

  

 

3 ComboBox(组合框)

3.1 实例

3.1.1 代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

function loadData(){

$('#cc').combobox({

url:'combobox_data.json',//该文件内容在下面

valueField:'id',

textField:'text'

});

}

function setValue(){

$('#cc').combobox('setValue','2');

}

function getValue(){

var val = $('#cc').combobox('getValue');

alert(val);

}

function disable(){

$('#cc').combobox('disable');

}

function enable(){

$('#cc').combobox('enable');

}

$( function() {

$('#cc').combobox( {

width:150,

listWidth:150,

listHeight:100,

//valuefield:'value',

//textField:'text',

//url:'combobox_data.json',

editable:false

});

});

</script>

</head>

<body>

<h1>ComboBox</h1>

<div style="margin-bottom: 10px;"><a href="#" onclick="loadData()">loadData</a>

<a href="#" onclick="setValue()">setValue</a> <a href="#"

onclick="getValue()">getValue</a> <a href="#" onclick="disable()">disable</a>

<a href="#" onclick="enable()">enable</a></div>

 

<span>Options: </span>

<select id="cc" name="dept" required="true">

<option value="">==请选择==</option>

<option value="0">苹果</option>

<option value="1">香蕉</option>

<option value="2">鸭梨</option>

<option value="3">西瓜</option>

<option value="4">芒果</option>

</select>

</body>

</html>

combobox_data.json内容：

[{

"id":1,

"text":"text1"

},{

"id":2,

"text":"text2"

},{

"id":3,

"text":"text3",

"selected":true

},{

"id":4,

"text":"text4"

},{

"id":5,

"text":"text5"

}]

3.1.2 效果图

 

3.2 参数

属性名

类型

描述

默认值

width

数字

组件的宽度

auto

listWidth

数字

下拉列表的宽度

null

listHeight

数字

下拉列表的高度

null

valueField

字符串

基础数据值名称绑定到这个组合框

value

textField

字符串

基础数据的字段的名称绑定到这个组合框

text

editable

布尔

定义是否可以直接到文本域中键入文本

true

url

字符串

加载列表数据的远程URL

null

3.3 事件

事件名

参数

描述

onLoadSuccess

none

当远程数据成功加载时触发

onLoadError

none

当远程数据加载失败时触发

onSelect

record

当用户选择了一个列表项时触发

onChange

newValue, oldValue

当文本域字段的值改变时触发

3.4 方法

方法名

参数

描述

select

value

选择下拉列表中的一项

setValue

param

设定指定值到文本域，参数可以是一个字符串，也可以是一个Javascript对象，如果是对象，必须包含两个属性各对应valueField和TextField属性。

getValue

none

获取字段值

reload

url

请求远程列表数据.

 

4 Dialog（对话框）

4.1 实例

4.1.1 代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

$(function(){

$('#dd').dialog({

title:'对话框',

collapsible:true,

minimizable:true,

maximizable:true,

resizable:true,

 

toolbar:[{

text:'Add',

iconCls:'icon-add',

handler:function(){

alert('add');

}

},'-',{

text:'Save',

iconCls:'icon-save',

handler:function(){

alert('save');

}

}],

buttons:[{

text:'Ok',

iconCls:'icon-ok',

handler:function(){

alert('ok');

}

},{

text:'Cancel',

handler:function(){

$('#dd').dialog('close');

}

}]

});

});

function open1(){

$('#dd').dialog('open');

}

function close1(){

$('#dd').dialog('close');

}

</script>

</head>

<body>

<h1>Dialog</h1>

<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open1</a>

<a href="#" onclick="close1()">close1</a></div>

<div id="dd" icon="icon-save"

style="padding: 5px; width: 400px; height: 200px;">

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

</div>

</body>

</html>

4.1.2 效果图

 

4.2 参数

属性名

类型

描述

默认值

title

字符串

对话框的标题文本

New Dialog

collapsible

布尔

定义是否显示可折叠按钮

false

minimizable

布尔

定义是否显示最小化按钮

false

maximizable

布尔

定义是否显示最大化按钮

false

resizable

布尔

定义对话框是否可编辑大小

false

toolbar

数组

对话框上的工具条，每个工具条包括:

text,

iconCls,

disabled,

handler

etc.

null

buttons

数组

对话框底部的按钮，每个按钮包括:

text,

iconCls,

handler

etc.

null

4.3 事件

Dialog的事件和窗口(Window)的事件相同。

4.4 方法

Dialog的函数方法和窗口(Window)的相同。

 

5 Messager（提示框）

5.1 实例

5.1.1 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

function show1(){

$.messager.show({

title:'My Title',

msg:'Message will be closed after 4 seconds.',

showType:'show'

});

}

function show2(){

$.messager.show({

title:'My Title',

msg:'Message will be closed after 5 seconds.',

timeout:5000,

showType:'slide'

});

}

function show3(){

$.messager.show({

title:'My Title',

msg:'Message never be closed.',

timeout:0,

showType:'fade'

});

}

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');

}

function confirm1(){

$.messager.confirm('My Title', 'Are you confirm this?', function(r){

if (r){

alert('confirmed:'+r);

location.href = 'http://www.google.com';

}

});

}

function prompt1(){

$.messager.prompt('My Title', 'Please type something', function(r){

if (r){

alert('you type:'+r);

}

});

}

$(function(){

$.messager.defaults={ok:"确定",cancel:"取消"};   

});

</script>

</head>

<body>

<h1>Messager</h1>

<div><a href="javascript:void(0)" onclick="show1()">show</a> | <a

href="#" onclick="show2()">slide</a> | <a href="#" onclick="show3()">fade</a>

|</div>

 

<div><a href="#" onclick="alert1()">alert</a> | <a href="#"

onclick="alert2()">alert(error)</a> | <a href="#" onclick="alert3()">alert(info)</a>

| <a href="#" onclick="alert4()">alert(question)</a> | <a href="#"

onclick="alert5()">alert(warning)</a></div>

<div><a href="#" onclick="confirm1();">confirm</a></div>

<div><a href="#" onclick="prompt1()">prompt</a></div>

<div style="height: 600px;"></div>

</body>

</html>

5.1.2 效果图

5.2 方法

方法名

参数

描述

$.messager.show

options

在屏幕的右下角显示一个消息窗口。这些选项的参数可以是一下的一个配置对象：
showType：定义如何将显示消息窗口。可用的值是：null,slide,fade,show。默认值是slide。
showSpeed：定义消息窗口完成的时间（以毫秒为单位）， 默认值600。
width：定义消息窗口的宽度。 默认值250。
height：定义消息窗口的高度。 默认值100。
msg：定义显示的消息文本。
title：定义显示在标题面板显示的标题文本。
timeout：如果定义为0，消息窗口将不会关闭，除非用户关闭它。如果定义为非0值，当超时后消息窗口将自动关闭。

$.messager.alert

title, msg, icon, fn

显示一个警告窗口。参数如下：
title：显示在标题面板的标题文本。
msg：提示框显示的消息文本。
icon：提示框显示的图标。可用的值是：error,question,info,warning.
fn：当窗口关闭时触发的回调函数。

$.messager.confirm

title, msg, fn

显示一个含有确定和取消按钮的确认消息窗口。参数如下：
title：显示在标题面板的标题文本。
msg：确认消息窗口显示的消息文本。
fn(b)：当用户点击按钮后触发的回调函数，如果点击OK则给回调函数传true,如果点击cancel则传false。

$.messager.prompt

title, msg, fn

显示一个确定和取消按钮的信息提示窗口，提示用户输入一些文本。参数如下：
title：显示在标题面板的标题文本。
msg：提示窗口显示的消息文本。
fn(val)：用户点击按钮后的回调函，参数是用户输入的内容。

5.3 扩展

可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。

名字

类型

描述

默认值

    

ok

字符串

Ok

按钮上的文本

Ok

  

cancel

字符串

Cancel

按钮上的文本

Cancel

  

 

6 NumberBox（数字框）

6.1 实例

6.1.1 代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

function disable(){

$('#nn').numberbox('disable');

}

function enable(){

$('#nn').numberbox('enable');

}

$(function(){

$('#nn').numberbox({min:5.5,max:20,precision:2});

});

</script>

</head>

<body>

<h1>NumberBox</h1>

<p>The Box can only input number.</p>

<div style="margin-bottom: 10px;"><a href="#" onclick="disable()">disable</a>

<a href="#" onclick="enable()">enable</a></div>

<input id="nn" required="true" />

</body>

</html>

6.1.2 效果图

 

6.2 参数

选项名

类型

描述

默认值

  

min

数字

文本框中可允许的最小值

null

  

max

数字

文本框中可允许的最大值

null

  

precision

数字

最高可精确到小数点后几位

0

  

 

7 ValidateBox（验证框）

7.1 实例

7.1.1 代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<style type="text/css">

input,textarea {

width: 200px;

border: 1px solid #ccc;

padding: 2px;

}

</style>

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

function valid(){

alert($('#dfe').validatebox('isValid'));

}

$(function(){

$.extend($.fn.validatebox.defaults.rules, { 

    minLength: { 

        validator: function(value, param){ 

            return value.length >= param[0]; 

        }, 

        message: 'Please enter at least {0} characters.' 

    } 

});

 

});

</script>

</head>

<body>

<h1>ValidateBox <a href="#0" onclick="valid();">EmailisValid</a></h1>

<div>

<table>

<tr>

<td>Name:</td>

<td><input class="easyui-validatebox" required="true"

validType="length[1,3]"></td>

</tr>

<tr>

<td>Email:</td>

<td><input id="dfe" class="easyui-validatebox"

invalidMessage="email格式错误" validType="email"></td>

</tr>

<tr>

<td>URL:</td>

<td><input class="easyui-validatebox" required="true"

validType="url"></td>

</tr>

<tr>

<td>testr:</td>

<td><input class="easyui-validatebox" validType="minLength[5]"

invalidMessage="至少5个字符"></td>

</tr>

<tr>

<td>Note:</td>

<td><textarea class="easyui-validatebox" required="true"

missingMessage="必填" style="height: 100px;"></textarea></td>

</tr>

</table>

</div>

</body>

</html>

7.1.2 效果图

 

7.2 参数

属性名

类型

描述

默认值

required

布尔

定义文本域是否为必填项

false

validType

字符串

定义字段的验证类型

url（匹配电子邮件正则表达式规则）, email（匹配URL正则表达式规则），length[0,100]（允许字符串长度的范围）etc.null

missingMessage

字符串

当文本框为空时提示的文本信息

This field is required.

invalidMessage

字符串

当文本框内容不合法时提示的文本信息

null

7.3 方法

方法名

参数

描述

destroy

none

删除并且销毁组件

validate

none

做验证以确定文本框的内容是否是有效的。

isValid

none

调用验证方法并返回验证结果，true或者false

7.4 扩展

当然也可以自定义验证规则，重写$.fn.validatebox.defaults.rules 可以定义一个校验器的功能和无效的显示消息。例如，要定义一个minLength有效的类型：

$.extend($.fn.validatebox.defaults.rules, { 

minLength: { 

validator: function(value, param){ 

return value.length >= param[0]; 

}, 

message: 'Please enter at least {0} characters.' 

} 

});定义好以后我们就可以使用了，下面的代码表示输入的最小长度是5个字符：

<input class="easyui-validatebox" validType="minLength[5]">

 

8 Pagination（分页）

8.1 实例

8.1.1 代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

$(function(){

$('#pp').pagination({

total:114,

pageSize:15,

pageNumber:2,

pageList:[10,15,20,30,50,100],

loading:false,

showPageList:true,

showRefresh:true,

beforePageText:'第',

afterPageText:'页，共{pages}页',

displayMsg:'{from}-{to}/{total}',

buttons:[{

iconCls:'icon-add',

handler:function(){

alert('add');

}

},{

iconCls:'icon-cut',

handler:function(){

alert('cut');

}

},{

iconCls:'icon-save',

handler:function(){

alert('save');

}

}],

onSelectPage:function(pageNumber, pageSize){

$(this).pagination('loading');

alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);

$(this).pagination('loaded');

}

});

});

</script>

</head>

<body>

<h1>Pagination</h1>

<div style="margin: 10px 0;"><a href="#"

onclick="javascript:$('#pp').pagination({loading:false})">loaded</a> <a

href="#" onclick="javascript:$('#pp').pagination({loading:true})">loading</a>

</div>

 

<div id="pp"

style="width: 500px; background: #efefef; border: 1px solid #ccc;"></div>

</body>

</html>

8.1.2 效果图

 

8.2 参数

属性名

类型

描述

默认值

total

数字

当分页建立时设置记录的总数量

1

pageSize

数字

每一页显示的数量

10

pageNumber

数字

当分页建立时，显示的页数

1

pageList

数组

用户可以修改每一页的大小，pageList属性定义了多少种大小可以改变.

[10,20,30,50]

loading

布尔

定义数据是否正在加载

false

buttons

数组

定义自定义按钮，每个按钮包含两个属性：iconCls: 显示背景图像的CSS类

handler: 当一个按钮被点击时的处理函数

null

showPageList

布尔

定义是否显示页面列表

true

showRefresh

布尔

定义是否显示刷新按钮

true

beforePageText

字符串

在输入框组件前显示的标签

Page

afterPageText

字符串

在输入框组件后显示的标签

Of  {pages}

displayMsg

字符串

显示一个页面的信息。

Displaying {from} {to} of {total} items

8.3 事件

事件名

参数

描述 

onSelectPage

pageNumber, pageSize

当用户选择一个新页时触发，回调函数包含两个参数：pageNumber: 新页面的页数pageSize: 新页面的大小 

onBeforeRefresh

ageNumber, pageSize

刷新按钮被点击之前触发，如果返回false则取消刷新操作 

onRefresh

ageNumber, pageSize

刷新以后触发 

onChangePageSize

ageSize

改变页面大小时触发

 

9 Window（窗口）

窗口的主要用法和面板（panel）用法差不多

9.1 实例

9.1.1 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

 

"http://www.w3.org/TR/html4/loose.dtd">

<html style="height:100%;width:100%;">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css"

href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

function resize(){

$('#w').window({

title: 'yewen2',

width: 600,

collapsible:false,

minimizable:false,

maximizable:false,

closable:false,

closed: false,

height: 300,

draggable:false,

resizable:false,

shadow:false,

modal:true

});

}

function open1(){

$('#w').window('open');

}

function close1(){

$('#w').window('close');

}

function test(){

$('#test').window('open');

}

</script>

</head>

<body style="height: 100%; width: 100%; overflow: hidden; border: none;">

<h1>Window</h1>

<div><a href="javascript:void(0)" onclick="resize()">resize</a> <a

href="javascript:void(0)" onclick="open1()">open</a> <a

href="javascript:void(0)" onclick="close1()">close</a></div>

<div id="w" class="easyui-window" title="My Window" icon="icon-save"

style="width: 500px; height: 200px; padding: 5px; background: #fafafa;">

<div class="easyui-layout" fit="true">

<div region="center" border="false"

style="padding: 10px; background: #fff; border: 1px solid #ccc;">

jQuery EasyUI framework help you build your web page easily. <br />

<br />

click <a href="#" onclick="test()">here</a> to popup another window.</div>

<div region="south" border="false"

style="text- align: right; height: 30px; line-height: 30px;"><a

class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)"

onclick="resize()">Ok</a> <a class="easyui-linkbutton"

icon="icon-cancel" href="javascript:void(0)" onclick="resize()">Cancel</a>

</div>

</div>

</div>

<div id="test" class="easyui-window" closed="true" modal="true"

title="Test Window" style="width: 300px; height: 100px;"></div>

</body>

</html>

9.1.2 效果图

 

 

9.2 参数

大多数的属性和面板(panel)的属性是相同的，下面列出一些Window私有的属性：

属性名

类型

描述

默认值

zIndex

数字

窗口的z-index属性，可以通过这个属性来增加

9000

draggable

布尔

定义窗口是否可被拖动

true

resizable

布尔

定义窗口是否可以被改变大小

true

shadow

布尔

如果设置为true，窗口的阴影也将显示。

true

modal

布尔

定义窗口是否是一个模式窗口。

false

Window也重写了Panel里的一些属性

属性名

类型

描述

默认值

title

字符串

窗口的标题文本

New Window

collapsible

布尔

定义是否显示可折叠定义按钮

true

minimizable

布尔

定义是否显示最小化按钮

true

maximizable

布尔

定义是否显示最大化按钮

true

closable

布尔

定义是否显示关闭按钮

true

 

9.3 事件

Window的事件和面板(panel)的事件相同

9.4 方法

除了”header”和”body”以外，Window的函数方法和面板(panel)的相同

 

10 Panel（面板）

10.1 实例

10.1.1 代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

function open1(){

$('#p').panel('open');

}

function close1(){

$('#p').panel('close');

}

function load1(){

$('#p').panel({

href:'tabs_href_test.html'

});

$('#p').panel('open');

}

</script>

</head>

<body style="background: #fafafa;">

<h1>Panel</h1>

<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open</a>

<a href="#" onclick="close1()">close</a> <a href="#" onclick="load1()">load</a>

</div>

<div

style="width: 600px; height: 300px; border: 1px solid red; padding: 5px;">

<div id="p" class="easyui-panel" title="My Title" icon="icon-save"

collapsible="true" minimizable="true" maximizable=true closable="true"

style="width: 500px; height: 150px; padding: 10px; background: #fafafa;">

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

<p>panel</p>

</div>

</div>

 

</body>

</html>

10.1.2 效果图

 

10.2 参数

名字

类型

描述

默认值

title

字符串

在面板头部显示的标题文本

null

iconCls

字符串

一个CSS类来显示在面板中的16x16图标

null

width

数字

设置面板的宽度

auto

height

数字

设置面板的高度

auto

left

数字

设置面板左侧位置

null

top

数字

设置面板的顶部位置

null

cls

字符串

给面板添加一个CSS类

null

headerCls

字符串

给面板头部添加一个CSS类

null

bodyCls

字符串

给面板主体添加一个CSS类

null

style

对象

给面板自定义样式

{}

fit

布尔

当设置为true，面板尺寸将适合它的父容器。

false

border

布尔

定义面板的边框

true

doSize

布尔

当设置为true，面板载创建的时候将被调整和重新布局

true

collapsible

布尔

定义是否显示可折叠定义按钮

false

minimizable

布尔

定义是否显示最小化按钮

false

maximizable

布尔

定义是否显示最大化按钮

false

closable

布尔

定义是否显示关闭按钮

false

tools

数组

自定义工具，每个工具可以包含两个属性：iconCls and handler

[]

collapsed

布尔

定义在初始化的时候折叠面板

false

minimized

布尔

定义在初始化的时候最小化面板

false

maximized

布尔

定义在初始化的时候最大化面板

false

closed

布尔

定义在初始化的时候关闭面板

false

href

字符串

一个远程的URL加载数据，然后显示在面板中

null

loadingMessage

字符串

当加载远程数据时，在面板中显示的信息

Loading…

10.3 事件

名字

参数

描述

onLoad

none

当远程数据加载时触发

onBeforeOpen

none

当面板打开之前触发

onOpen

none

当面板打开之后触发

onBeforeClose

none

当面板关闭之前触发

onClose

none

当面板关闭之后触发

onBeforeDestroy

none

当面板销毁之前触发

onDestroy

none

当面板关闭之后触发

onBeforeCollpase

none

当面板折叠之前触发

onCollapse

none

当面板折叠之后触发

onBeforeExpand

none

当面板展开之前触发

onExpand

none

当面板展开之后触发

onResize

width, height

当面板调整大小之后触发width: 新的宽度;height: 新的高度

onMove

left,top

当面板移动之后触发left: 新的左侧位置top: 新的顶部位置

onMaximize

none

当窗口最大化的时候被触发

onRestore

none

当窗口恢复到原来的大小时被触发

onMinimize

none

当窗口最小化的时候被触发

10.4 方法

名字

参数

描述

options

none

返回设置的属性值

panel

none

返回面板对象

header

none

返回面板头部对象

body

none

返回面板主体对象

setTitle

title

设置面板头部标题

open

forceOpen

当forceOpen设置为true，面板被打开的时候忽略onBeforeOpen回调函数

close

forceClose

当forceClose设置为true，面板被关闭的时候忽略onBeforeClose回调函数

destroy

forceDestroy

当forceDestroy设置为true，面板被销毁的时候忽略onBeforeDestroy回调函数

refresh

none

当设置了href值时，刷新面板来加载远程数据

resize

options

设置面板的大小和布局，这些选项包含以下的属性：width: 新面板的宽度; height: 新面板的高度; left: 新面板的左侧位置; top: 新面板的顶部位置

move

options

移动面板到一个新的位置，这些选项包含以下属性: left: 新面板的左侧位置;top: 新面板的顶部位置

 

11 Tabs（标签）

11.1 实例

11.1.1 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

var index = 0;

function addTab(){

index++;

$('#tt').tabs('add',{

title:'New Tab ' + index,

content:'Tab Body ' + index,

closable:true

});

}

</script>

</head>

<body>

<h1>Tabs</h1>

<div>

<a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add tab</a>

</div>

<br/>

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">

<div title="Tab1" style="padding:20px;display:none;">

</div>

<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;" cache="false" href="tabs_href_test.html"> This is Tab2 width close 

button.</div>

<div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;">

<table id="test" class="easyui-datagrid" fit="true">

<thead>

<tr>

<th field="f1" width="60">field1</th>

<th field="f2" width="60">field2</th>

<th field="f3" width="60">field3</th>

</tr>

</thead>

<tbody>

<tr>

<td>d1</td>

<td>d2</td>

<td>d3</td>

</tr>

<tr>

<td>d11</td>

<td>d21</td>

<td>d31</td>

</tr>

</tbody>

</table>

</div>

<div title="Tab4 with iframe" closable="true" style="width:100%;height:100%;display:none;">

<iframe scrolling="yes" frameborder="0"  src="http://www.google.com" style="width:100%;height:100%;"></iframe>

</div>

<div title="Tab5 with sub tabs" closable="true" icon="icon-cut" style="padding:10px;display:none;">

<div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">

<div title="Title1">Content 1</div>

<div title="Title2">Content 2</div>

<div title="Title3">Content 3</div>

</div>

</div>

</div>

</body>

</html>

11.1.2 效果图

 

11.2 参数

参数名

参数

描述

默认值 

width

数字

标签容器的宽度

auto 

height

数字

标签容器的高度

auto 

idSeed

数字

The base id seed to generate tab panel’s DOM id attribute.

0 

plain

布尔

如果为ture标签没有背景图片

false 

fit

布尔

如果为ture则设置标签的大小以适应它的容器的父容器

false 

border

布尔

如果为true则显示标签容器的边框

true 

scrollIncrement

数字

滚动按钮每次被按下时滚动的像素值

100 

scrollDuration

数字

每次滚动持续的毫秒数

400

11.3 事件

事件名

参数

描述

onLoad

arguments

当一个AJAX标签加载远程数据完成时被触发，参数和jQuery.ajax成功返回的回调函数相同

onSelect

title

当用户选择一个标签面板时被触发

onClose

title

当用户关闭一个标签面板时被触发

11.4 方法

方法名

参数

描述

resize

none

调整标签容器的大小和布局

add

options

添加新标签面板，可选参数是一个配置对象，详细信息可以查看下面的标签面板属性

close

title

关闭一个标签面板，标题参数表明被关闭的面板

select

title

选择一个标签面板

exists

title

指示特定的标签是否存在

11.5 标签面板属性

属性名

类型

描述

默认值

id

字符串

标签面板的ID属性

null

title

字符串

标签面板的文本标题

  

content

字符串

标签面板的主体内容

  

href

字符串

填充标签内容的远程URL地址

null

cache

布尔

如果为true，当设置href时，对标签面板进行缓存

true

icon

字符串

标签面板上标题的图标CSS类

null

closable

布尔

如果为true，标签面板会显示出关闭按钮，点击可以关闭选项卡面板。

false

selected

布尔

如果为true，标签标签面板将被选中

false

width

数字

标签面板的宽度

auto

height

数字

标签面板的高度

auto

 

12 Tree（树）

12.1 实例

12.1.1 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script type="text/javascript">

$(function(){

$('#tt1').tree({

animate:true,

onClick:function(node){

alert('you click '+node.text);

}

});

$('#tt2').tree({

checkbox: true,

url: 'tree_data.json',

onClick:function(node){

alert('you click '+node.text);

}

});

});

function reload(){

$('#tt2').tree('reload');

}

function getChecked(){

var nodes = $('#tt2').tree('getChecked');

var s = '';

for(var i=0; i<nodes.length; i++){

if (s != '') s += ',';

s += nodes[i].text;

}

alert(s);

}

function getSelected(){

var node = $('#tt2').tree('getSelected');

alert(node.text);

}

function collapse(){

var node = $('#tt2').tree('getSelected');

$('#tt2').tree('collapse',node.target);

}

function expand(){

var node = $('#tt2').tree('getSelected');

$('#tt2').tree('expand',node.target);

}

function append(){

var node = $('#tt2').tree('getSelected');

$('#tt2').tree('append',{

parent: node.target,

data:[{

text:'new1'

},{

text:'new2',

state:'closed',

children:[{

text:'subnew1'

},{

text:'subnew2'

}]

}]

});

}

function remove(){

var node = $('#tt2').tree('getSelected');

$('#tt2').tree('remove', node.target);

}

function isLeaf(){

var node = $('#tt2').tree('getSelected');

var b = $('#tt2').tree('isLeaf', node.target);

alert(b)

}

</script>

</head>

<body>

<h1>Tree</h1>

<p>Create from HTML markup</p>

<ul id="tt1" class="easyui-tree">

<li><span>Folder</span>

<ul>

<li><span>Sub Folder 1</span>

<ul>

<li><span><a href="#">File 11</a></span></li>

<li><span>File 12</span></li>

<li><span>File 13</span></li>

</ul>

</li>

<li><span>File 2</span></li>

<li><span>File 3</span></li>

</ul>

</li>

<li><span>File21</span></li>

</ul>

<hr></hr>

<p>Create from JSON data</p>

<div style="margin: 10px;"><a href="#" onclick="reload()">reload</a>

<a href="#" onclick="getChecked()">getChecked</a> <a href="#"

onclick="getSelected()">getSelected</a> <a href="#"

onclick="collapse()">collapse</a> <a href="#" onclick="expand()">expand</a>

<a href="#" onclick="append()">append</a> <a href="#" onclick="remove()">remove</a>

<a href="#" onclick="isLeaf()">isLeaf</a></div>

 

<ul id="tt2"></ul>

</body>

</html>

12.1.2 效果图

 

12.2 参数

选项名

类型

描述

默认值

  

url

字符串

一个网址retrive远程数据。

null

  

animate

布尔

当节点展开或折叠是否显示动画效果。

false

  

checkbox

布尔

是否带复选框

False

  

 

12.3 事件

事件名

参数

描述 

onClick

node

用户点击一个节点时触发。，该节点参数包含以下属性：

id:节点ID 

text:节点的文本

attributes:节点自定义属性

target:点击DOM对象的目标

onDblClick

node

用户双击一个节点时触发，参数同onclick事件

onLoadSuccess

arguments

加载数据成功时触发，参数arguments类似jQuery.ajax.的success函数

onLoadError

arguments

加载数据成功时触发，参数arguments类似jQuery.ajax.的error函数

 

12.4 方法

方法名

参数

描述

options

none

返回树的所有参数对象

loadData

data

加载树的数据

reload

none

重新加载树的数据

getRoot

none

返回树的root节点

getRoots

none

返回树的所有root节点

getParent

target

返回某个节点的父节点

getChildren

target

返回某个节点的孩子节点

getChecked

none

获取被勾选的节点

getSelected

none

获取选中的节点，并返回它，如果没有节点选择返回null。

isLeaf

target

判断某个节点是否叶子节点

select

target

选择一个节点，目标参数表明该节点的DOM对象。

collapse

target

折叠节点，目标参数表明该节点的DOM对象。

expand

target

展开一个节点，目标参数表明该节点的DOM对象。

collapseAll

none

折叠所有节点

expandAll

none

展开所有节点

append

param

一些子节点追加到父节点。参数有两个属性：

parent: DOM对象，父节点追加。

data:数组，节点数据。

toggle

target

绑定某个节点的展开或者折叠状态，使之不能再改变。

remove

target

删除一个节点和它的子节点，目标参数表明该节点的DOM对象。

update

param

更新指定的节点，参数param包含如下属性：

Target：目标节点；

id,text,iconCls,checked,etc.

 

13 Layout（布局）

13.1 实例

此例最外层写在了body上，也可以写在某个div上。

13.1.1 代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

$(function(){

var p = $('body').layout('panel','west').panel({

onCollapse:function(){

alert('collapse');

}

});

setTimeout(function(){

$('body').layout('collapse','east');

},0);

});

</script>

</head>

<body class="easyui-layout">

<div region="north"  border="false" style="height:60px;background:#B3DFDA;">north region</div>

<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>

<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>

<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>

<div region="center" title="Main Title">

</div>

</body>

</html>

13.1.2 效果图

 

13.2 参数

所有属性都必须定义在布局面板创建的<div/>标记上。

名称

类型

描述

默认值

title

字符串

布局面板的标题文本

null

region

字符串

定义布局面板的位置，该值是下列之一: north, south,  east, west, center.

  

border

布尔

如果为ture则显示布局面板的边框

true

split

布尔

如果为ture则显示分隔栏，用户可以用它来改变布局面板的大小

false

icon

字符串

在面板头部显示图标的CSS

null

href

字符串

从远程地址加载数据的URL

null

 

13.3 方法

方法名

参数

描述

panel

region

返回某个方位的面板，参数region取值可以是：north,south,east,west,center

collapse

region

收缩某个方位的面板，参数region取值可以是：north,south,east,west

expand

region

展开某个方位的面板，参数region取值可以是：north,south,east,west
     

 

14 Datagrid（数据表）

14.1 实例

14.1.1 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

$(function(){

$('#test').datagrid({

title:'My Title',

iconCls:'icon-save',

width:800,

height:450,

nowrap: true,

striped: true,

url:'datagrid_data.json',

sortName: 'code',

sortOrder: 'desc',

idField:'code',

frozenColumns:[[

                {field:'ck',checkbox:true},

                {title:'code',field:'code',width:80,sortable:true}

]],

columns:[[

        {title:'Base Information',colspan:3},

{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,

formatter:function(value,rec){

return '<span style="color:red">Edit Delete</span>';

}

}

],[

{field:'name',title:'Name',width:120},

{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},

{field:'col4',title:'Col41',width:150,rowspan:2}

]],

pagination:true,

rownumbers:true,

singleSelect:true,

toolbar:[{

text:'Add',

iconCls:'icon-add',

handler:function(){

alert('add')

}

},{

text:'Cut',

iconCls:'icon-cut',

disabled:true,

handler:function(){

alert('cut')

}

},'-',{

text:'Save',

iconCls:'icon-save',

handler:function(){

alert('save')

}

}]

});

var p = $('#test').datagrid('getPager');

if (p){

$(p).pagination({

onBeforeRefresh:function(){

alert('before refresh');

}

});

}

});

function resize(){

$('#test').datagrid({

title: 'New Title',

striped: true,

width: 650,

queryParams:{

p:'param test',

name:'My Name'

}

});

}

function getSelected(){

var selected = $('#test').datagrid('getSelected');

alert(selected.code+":"+selected.name);

}

function getSelections(){

var ids = [];

var rows = $('#test').datagrid('getSelections');

for(var i=0;i<rows.length;i++){

ids.push(rows[i].code);

}

alert(ids.join(':'))

}

function clearSelections(){

$('#test').datagrid('clearSelections');

}

function selectRow(){

$('#test').datagrid('selectRow',2);

}

function selectRecord(){

$('#test').datagrid('selectRecord','002');

}

function unselectRow(){

$('#test').datagrid('unselectRow',2);

}

</script>

</head>

<body>

<h1>DataGrid</h1>

<div style="margin-bottom: 10px;"><a href="#" onclick="resize()">resize</a>

<a href="#" onclick="getSelected()">getSelected</a> <a href="#"

onclick="getSelections()">getSelections</a> <a href="#"

onclick="clearSelections()">clearSelections</a> <a href="#"

onclick="selectRow()">selectRow</a> <a href="#"

onclick="selectRecord()">selectRecord</a> <a href="#"

onclick="unselectRow()">unselectRow</a></div>

 

<table id="test"></table>

 

</body>

</html>

14.1.2 效果图

 

14.2 参数

Name

Type

Description

Default

title

字符串

标题文字

null

iconCls

字符串

一个css类，将提供一个背景图片作为标题图标

null

border

布尔

是否显示面板的边界。

true

width

数字

表格的宽度

auto

height

数字

表格的高度

auto

columns

数组

表格的列的配置对象，详见下面column属性介绍。

null

frozenColumns

数组

与columns属性相通，但这些列将固定在左侧，不得变动。

null

striped

布尔

是否显示斑马线

false

method

字符串

远程数据的获取类型，可取值为post或get

post

nowrap

布尔

是否在一行显示数据

true

idField

字符串

指定哪些字段时标识字段

null

url

字符串

从远程请求数据的地址

null

loadMsg

字符串

当远程加载数据时，现实的等待信息提示

Processing, please wait …

pagination

布尔

是否显示底部分页工具栏

false

rownumbers

布尔

是否显示行号列

false

singleSelect

布尔

是否允许只选择一行

false

fit

布尔

是否允许表格自动缩放，以适应父容器

false

pageNumber

数字

初始化页码

1

pageSize

数字

初始化页面大小

10

pageList

数组

初始化页面大小选择清单

[10,20,30,40,50]

queryParams

对象

当请求远程数据时，发送的额外的参数

{}

sortName

字符串

定义哪一列可以排序

null

sortOrder

字符串

定义列排序的方式，递增（asc）或递减（desc）

asc

editors

对象

定义当编辑某行数据时的编辑器

predefined editors

 

14.3 Column参数

Name

Type

Description

Default

title

字符串

列标题文字

undefined

field

字符串

列字段名称

undefined

width

数字

列宽度

undefined

rowspan

数字

该列占几行单元格

undefined

colspan

数字

该列占几列单元格

undefined

align

字符串

数据对其方式，可选值有left,right,center

undefined

sortable

布尔

是否允许该列排序

undefined

checkbox

布尔

是否显示选择框

undefined

formatter

函数

包含三个参数：

value: the field value.

rowData: the row record data

rowIndex: the row index.

undefined

editor

string,object

Indicate the edit type. When string indicates the edit type, when object contains two properties:
type: string, the edit type, possible type is: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.
options: object, the editor options corresponding to the edit type.

undefined

 

14.4 事件

Name

Parameters

Description

onLoadSuccess

data

远程数据加载成功时触发

onLoadError

none

远程数据加载失败时触发

onBeforeLoad

data

请求发出去，加载数据前触发。如果返回false，加载数据动作则退出

onClickRow

rowIndex, rowData

当用户点击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row

onDblClickRow

rowIndex, rowData

当用户双击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row

onSortColumn

sort, order

当用户排序某列时触发, the parameters contains:
sort: the sort column field name
order: the sort column order

onSelect

rowIndex, rowData

当用户选择某行时触发, the parameters contains:
rowIndex: the selected row index, start with 0
rowData: the record corresponding to the selected row

onUnselect

rowIndex, rowData

当用户取消选择某行时触发, the parameters contains:
rowIndex: the unselected row index, start with 0
rowData: the record corresponding to the unselected row

onBeforeEdit

rowIndex, rowData

当用户开始编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row

onAfterEdit

rowIndex, rowData, changes

当用户完成编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
changes: the changed field/value pairs

onCancelEdit

rowIndex, rowData

当用户退出编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row

 

14.5 方法

Name

Parameter

Description

options

none

返回所有参数的对象

getPager

none

返回分页对象

resize

none

调整表格大小

reload

param

重新加载行

fixColumnSize

none

固定列的大小

loadData

param

加载本地数据，旧行将被删除

getData

none

返回已加载的数据

getRows

none

返回当前页的行数

getSelected

none

返回第一次选择的行记录

getSelections

none

返回所有选定行，如果没选择记录，则返回空数组

clearSelections

none

取消所有选择

selectAll

none

选择当前页所有行

selectRow

index

选择某行，行索引以0开始

selectRecord

idValue

通过id值选择一行

unselectRow

index

取消选择某行

beginEdit

index

开始编辑某行

endEdit

index

结束编辑某行

cancelEdit

index

退出编辑某行

refreshRow

index

刷新一行的数据

appendRow

row

添加新行

deleteRow

index

删除一行

getChanges

type

Get changed rows since the last commit. The type parameter indicate which type changed rows, possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows.

acceptChanges

none

Commits all the changes data since it was loaded or since the last time acceptChanges was called.

rejectChanges

none

Rolls back all the changes data since it was created, or since the last time acceptChanges was called.

 

 

你可能感兴趣的:(jquery)

  • C# 开发教程-入门基础 天马3798 教程系列整理c#开发语言
    1.C#简介、环境，程序结构2.C#基本语法，变量，控制局域，数据类型，类型转换3.C#数组、循环，Linq4.C#类，封装，方法5.C#枚举、字符串6.C#面相对象，继承，封装，多态7.C#特性、属性、反射、索引器8.C#委托，事件，集合，泛型9.C#匿名方法10.C#多线程更多：JQuery开发教程入门基础Vue开发基础入门教程Vue开发高级学习教程
  • html 删除事件,html 事件的添加和删除 列蒂齐亚 html删除事件
    jQuery在jQuery1.7版本中bind()unbind(),live()die(),on()off(),delegate()下面我们给li元素添加事件bind()旧版写法:事件不能适用脚本创建的新元素live()旧版写法:适用脚本创建的新元素写法，但性能极不好on()新版写法，事件不能适用脚本创建的新元素(接收多个函数绑定)这三种方法都是基于要给添加事件的元素本身。$("ulli").bi
  • 动态生成的html元素绑定click事件 .NET跨平台 Jquery及其组件htmljquery
    第一篇博客，开启技术博客的生涯，欢迎大家批评指教（坚信妹子也可以做好程序猿）今天想说帮公司做项目的时候遇到的一个小问题，动态添加html元素以后再去事件监听出问题。在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况。就是上面的一张表格要动态实现添加行，然后序列号还要随着增加，当删除的时候序列号依旧是按顺序排列。刚开始使用jQuery的on方法来解决，但是发现一个问题会出现事件绑定很多次
  • 前端页面实现table可拖动改变列宽 牧 码 人 jsjQueryjs表格拖动csscolResizable
    此处实现页面的table表格可以自由拖动列宽，拖动时表格内文字不换行，超出部分以...代替，实现步骤如下：1.首先引入jQuery和colResizable的js文件，colResizable支持表格拖动改变列宽，但基于jQuery，（1）colResizable可以去：http://www.bacubacu.com/colresizable/#rangeSlider下载（2）引入文件：2.编写j
  • 关于jquery的on(“click”,function(){}),事件绑定无效 微特尔普拉斯 javascriptjquery
    之前在做jquery时,遇到一个问题,就是我在append一个给啊标签绑定click点击事件时不起作用,jquery的版本时3.4.1,也找不到起的错误.就是没触发:$(self).find(".comment-action.cancel").off("click");//console.log("点击了取消回复的按钮!");$(self).find(".comment-action.cancel
  • （hilo）摇钱树项目梳理 大胡子111
    摇钱树项目用到了：1.jquery（js库）2.hilo.js(游戏框架)3.tida.js（淘宝相关api--要在淘宝中实现摇一摇功能）4.原生陀螺仪（因为要在微信中实现摇一摇功能）5.静态文件资源预加载项目组成部分：1.摇钱树2.摇一摇按钮3.树下礼包4.游戏标题5.树上的红包和金币6.音乐7.获奖记录7.活动规则（活动说明/玩法介绍）8.红包雨下落9.地上红包10.获奖/失败层11.玩法介绍
  • jQuery Easyui 源码分析之combo组件 90后北京程序员 前端-easyuieasyui之combobox
    /***jQueryEasyUI1.3.1*该源码完全由压缩码翻译而来，并非网络上放出的源码，请勿索要。*/(function($){functionsetSize(target,width){varopts=$.data(target,"combo").options;varcombo=$.data(target,"combo").combo;varpanel=$.data(target,"co
  • jquery打包到webpack项目 不cong明的亚子 前端webpackjqueryjavascript
    入口文件—index.jswindow.$=require('jquery')webpack.config.jsconstwebpack=require('webpack')module.exports={...plugins:[...newwebpack.ProvidePlugin({$:'jquery',jQuery:'jquery'})...]...}
  • 通过前端实现导出生成pdf文件并下载 银河小铁皮 vue原生JS前端javascriptvue.js
    通过前端实现导出生成pdf文件并下载使用jspdf.js+html2canvas插件，实现前端生成pdf并下载的功能步骤如下1、先通过npm安装插件npminstalljspdf.jsnpminstallhtml2canvas2、单独在utils文件夹下，新建文件，存放处理代码/*eslint-disable*///不使用JQuery版的importhtml2canvasfrom'html2can
  • java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署 一梵sheji288 javamybatisvue.js
    java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署java计算机毕业设计Vue潍坊学院宿舍管理系统设计与实现MyBatis+系统+LW文档+源码+调试部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、
  • TypeScript---类型批注 Anglie
    TS通过类型批注提供静态类型，方便在编译时启动类型检查，这不是必须的，甚至可以被忽略，去使用js常规的动态类型。基本类型的批注是number,bool,string,弱类型或动态类型的结构可以是任意类型。将类型批注导出到一个单独的文件，方便使用类型已经被编译成为js的ts脚本的类型信息可用。批注可以为一个现有的js库声明。就像已经为node.js和jquery.js所做的那样。当没有给出类型时，T
  • 基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件 练练科技 java课程设计mysql
    基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件基于Java毕业设计新锐台球厅管理系统源码+系统+mysql+lw文档+部署软件本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码
  • java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署 鸿源网络 数据库mysqljava
    java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ
  • 基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署 源新网络 java开发语言
    基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA高校毕业就业管理系统计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码
  • jQuery选择器 VaporGas 前端jquery前端javascript学习
    jQuery选择器jQuery选择器类似于CSS选择器，用来选取网页中的元素$("h3").css("background","#09F");代码分析：获取并设置网页中所有元素的背景“h3”为选择器语法，必须放在$()中$(“h3”)返回jQuery对象.css()是为jQuery对象设置样式的方法jQuery选择器分类jQuery选择器功能强大，种类也很多，分类如下：类CSS选择器基本选择器层次
  • Java架构师学习路线 网络全息测量 心得体会
    (1)第一步：研究spring,hibernate。通过研究jeecms开源框架。也同时学习css,html,javascript,jquery.以前都学习过，不过没有系统学习过，现在必须系统学习。同时看cms相关的论文。然后，改造jeecms能够改为自己的一个开源框架，以后开发cms系统都用我自己开发的框架，作为第一阶段的成果。(2)第二步：学习开源工作流引擎Activiti5，jbpm4.4以
  • AJAX实时表单验证系统 三年九班蓝同学
    本文还有配套的精品资源，点击获取简介：在网页开发中，"ajax验证表单"是一项关键任务，确保数据符合格式和规则，提升数据质量和用户体验。本应用通过使用JavaScript和XMLHttpRequest对象实现后台验证，无需页面刷新。它包括前端验证、事件处理、Ajax调用、服务器端处理、响应处理、用户体验和安全性等关键步骤，以jQuery库简化开发流程，创建高效、安全的表单验证系统。1.表单验证的重
  • 利用jQuery框架的ajax请求获取json格式的数据 听海边涛声 jqueryajaxjson
    Document$('#btn').click(()=>{$.get('http://localhost:8080/jsajaxproject/jquery_json','username=tom&age=20',(data)=>{//alert(data)alert(data.name+'\t'+data.age+'\t'+data.gender)},'json')})点击按钮：
  • jquery加载页面的方法(页面加载完成就执行) JaosnY JQueryjquery自动加载
    转自http://www.jb51.net/article/27444.htmjquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别。1、$(function(){$("#a").click(function(){//addingyourcodehere});});2、$(document).ready(functi
  • jquery事件 上心心上
    jquery事件事件函数列表：blur()元素失去焦点focus()元素获得焦点change()表单元素的值发生变化click()鼠标单击dblclick()鼠标双击mouseover()鼠标进入（进入子元素也触发）mouseout()鼠标离开（离开子元素也触发）mouseenter()鼠标进入（进入子元素不触发）mouseleave()鼠标离开（离开子元素不触发）hover()同时为mousee
  • node模块 weiweiweb888 前端javascriptbootstrap
    模块系统模块化介绍传统开发的问题随着项目的扩大，然后代码就越来越庞大，如果没有很好的规划，后期维护非常复杂（甚至就维护不了）。比如：前端html中有很多特效会依赖js文件。比如：index.html:bootstrap以上就是一个依赖关系，bootstrap依赖于jquery。先引入jquery后引入bootstrap。而且随着项目的扩大，我们的html页面也就随之增加，并且每一个html页面都会
  • jQuery中的ajax通信技术的讲解 盛夏绽放 jqueryajaxokhttp
    jQuery提供了多种方法来处理AJAX请求，这些方法简化了异步请求的创建和处理。以下是一些常用的jQueryAJAX方法及其演示：1.$.ajax()（1）解释这个方法是最基础也是最强大的AJAX方法，它可以接受一个配置对象来构建并发送HTTP请求。（2）示例：这是一个GET请求模版$.ajax({url:'https://api.example.com/data',//请求的URL地址type
  • 记录-小程序720°VR（跳转H5页面实现） 久违的小技巧 小程序小程序vrjavascript
    全景浏览提前准备1拍照支架/照片合成软件（KolorAutopanoGiga4.0）或者全景相机2pannellum（pannellum是一个轻量级、免费和开源的Web全景查看器。它使用HTML5、CSS3、JavaScript和WebGL构建，没有插件。）3H5页面引入pannellum.js/css文件，swiper/jquery文件（因为需要在全景图底部显示可切换图片，与dom操作/ajax
  • HTML表格 一壶浊酒.. 前端开发html前端
    table,tr,td{border:lpxsolidsilver;}表格标题表头单元格HTMLCSSJavaScriptJQuery标准单元格合并行：rowspan在HTML中，我们可以使用rowspan属性来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并。rowspan属性table,tr,td{border:1pxsolidsilver;}姓名:小明喜欢水果:苹果香蕉合并列：cols
  • 前端篇—ajax wolf67 Djangodjangojsajax
    文章目录前言一、基于JS的ajax实现1.1基础1.2完整代码示例1.3应用二、JSON和JSONP2.1什么是JSON2.2JSON语法2.3应用2.4json与django交互2.5json与xml比较三、基于jQuery的ajax实现3.1基础方法3.2快捷方法用法示例四、跨域请求4.1同源机制4.2jsonp的js实现（未完成）4.3jsonp的jQuery实现4.4jsonp的ajax实
  • 菜谱推荐系统(前台android原生,后台java,SSH,mysql) weixingliang_123 菜谱食谱android数据库java编程语言mysql
    Android菜谱推荐系统(前台android原生,后台java,SSH,mysql)(程序代码,MySQL数据库)【运行环境】MyEclipse(后台)Eclipse(前台)JDK1.7tomcat7【技术栈】JAVA,JSP,mvc,SSH,MYSQL,HTML,CSS,JAVASCRIPT,JQUERY,android原生【项目包含内容】【下载全套源码】【项目功能介绍】
  • 【jQuery】前端八股文面试题 菜鸟una 前端八股文面试题前端jqueryjavascript
    jQuery这个问的没有那么多，暂时我被问到的就这几个。大家可以直接订阅专栏。文章目录jQuery1.jQuery常见的方法有哪几个？2.在jQuery中，常见使用委托的事件有哪些？1）点击事件（click）2）鼠标悬停事件（mouseenter和mouseleave）3）表单提交事件（submit）4）输入框变化事件（change）3.在jQuery中，常见的鼠标事件方法有哪些？1）click（
  • jQuery第八章 原生ajax 小涛涛啊！ jqueryjquery
    第八章原生ajax1：ajax的概念AJAX=AsynchronousJavaScriptandXML（异步的JavaScript和XML）。AJAX不是新的编程语言，而是一种使用现有标准的新方法。*AJAX异步请求数据。什么是AJAX？AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着
  • java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档 影伴设计 java开发语言前端
    java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档java计算机毕业设计生产管理系统源代码+数据库+系统+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：https://pan.b
  • 第三章：发送AJAX请求的几种方式 Muko_0x7d2 AJAXajax
    1.jquery发送Ajax请求1.1引进jQuery资源进入bootcdn.cn网站搜索jQuery复制script标签放到目标html文件head标签中添加跨源的属性的设置crossorigin="anonymous"1.2jQuery发送请求的四个参数：url参数（可以没有）函数响应体类型（一般为json）1.3GET请求请求类型为get参数在名称里面//1.发送GET请求$('button
  • 多线程编程之存钱与取钱 周凡杨 javathread多线程存钱取钱
      生活费问题是这样的：学生每月都需要生活费，家长一次预存一段时间的生活费，家长和学生使用统一的一个帐号，在学生每次取帐号中一部分钱，直到帐号中没钱时 通知家长存钱，而家长看到帐户还有钱则不存钱，直到帐户没钱时才存钱。   问题分析：首先问题中有三个实体，学生、家长、银行账户，所以设计程序时就要设计三个类。其中银行账户只有一个，学生和家长操作的是同一个银行账户，学生的行为是
  • java中数组与List相互转换的方法 征客丶 JavaScriptjavajsonp
    1.List转换成为数组。（这里的List是实体是ArrayList) 　　调用ArrayList的toArray方法。 　　toArray 　　public T[] toArray(T[] a)返回一个按照正确的顺序包含此列表中所有元素的数组；返回数组的运行时类型就是指定数组的运行时类型。如果列表能放入指定的数组，则返回放入此列表元素的数组。否则，将根据指定数组的运行时类型和此列表的大小分
  • Shell 流程控制 daizj 流程控制if elsewhilecaseshell
    Shell 流程控制 和Java、PHP等语言不一样，sh的流程控制不可为空，如(以下为PHP流程控制写法)： <?php if(isset($_GET["q"])){ search(q);}else{// 不做任何事情} 在sh/bash里可不能这么写，如果else分支没有语句执行，就不要写这个else，就像这样 if else if if 语句语
  • Linux服务器新手操作之二 周凡杨 Linux 简单 操作
    1.利用关键字搜寻Man Pages    man -k keyword  其中-k 是选项，keyword是要搜寻的关键字 如果现在想使用whoami命令，但是只记住了前3个字符who，就可以使用 man -k who来搜寻关键字who的man命令       [haself@HA5-DZ26 ~]$ man -k
  • socket聊天室之服务器搭建 朱辉辉33 socket
    因为我们做的是聊天室，所以会有多个客户端，每个客户端我们用一个线程去实现，通过搭建一个服务器来实现从每个客户端来读取信息和发送信息。    我们先写客户端的线程。 public class ChatSocket extends Thread{ Socket socket; public ChatSocket(Socket socket){ this.sock
  • 利用finereport建设保险公司决策分析系统的思路和方法 老A不折腾 finereport金融保险分析系统报表系统项目开发
    决策分析系统呈现的是数据页面，也就是俗称的报表，报表与报表间、数据与数据间都按照一定的逻辑设定，是业务人员查看、分析数据的平台，更是辅助领导们运营决策的平台。底层数据决定上层分析，所以建设决策分析系统一般包括数据层处理（数据仓库建设）。   项目背景介绍 通常，保险公司信息化程度很高，基本上都有业务处理系统（像集团业务处理系统、老业务处理系统、个人代理人系统等）、数据服务系统（通过
  • 始终要页面在ifream的最顶层 林鹤霄
    index.jsp中有ifream，但是session消失后要让login.jsp始终显示到ifream的最顶层。。。始终没搞定，后来反复琢磨之后，得到了解决办法，在这儿给大家分享下。。 index.jsp--->主要是加了颜色的那一句 <html> <iframe name="top" ></iframe> <ifram
  • MySQL binlog恢复数据 aigo mysql
    1，先确保my.ini已经配置了binlog：   # binlog log_bin = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.log log_bin_index = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.index log_error = D:/mysql-5.6.21-win
  • OCX打成CBA包并实现自动安装与自动升级 alxw4616 ocxcab
    近来手上有个项目,需要使用ocx控件 (ocx是什么? http://baike.baidu.com/view/393671.htm) 在生产过程中我遇到了如下问题. 1. 如何让 ocx 自动安装?     a) 如何签名?     b) 如何打包?     c) 如何安装到指定目录? 2.
  • Hashmap队列和PriorityQueue队列的应用 百合不是茶 Hashmap队列PriorityQueue队列
      HashMap队列已经是学过了的,但是最近在用的时候不是很熟悉,刚刚重新看以一次,   HashMap是K,v键 ,值     put()添加元素      //下面试HashMap去掉重复的 package com.hashMapandPriorityQueue; import java.util.H
  • JDK1.5 returnvalue实例 bijian1013 javathreadjava多线程returnvalue
    Callable接口： 返回结果并且可能抛出异常的任务。实现者定义了一个不带任何参数的叫做 call 的方法。 Callable 接口类似于 Runnable，两者都是为那些其实例可能被另一个线程执行的类设计的。但是 Runnable 不会返回结果，并且无法抛出经过检查的异常。        ExecutorService接口方
  • angularjs指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效 bijian1013 JavaScriptAngularJS
            在directive的link中有一个$http请求，当请求完成后根据返回的值动态做element.append('......');这个操作，能显示没问题，可问题是我动态组的HTML里面有ng-click，发现显示出来的内容根本不执行ng-click绑定的方法！     
  • 【Java范型二】Java范型详解之extend限定范型参数的类型 bit1129 extend
    在第一篇中，定义范型类时，使用如下的方式：   public class Generics<M, S, N> { //M,S,N是范型参数 }  这种方式定义的范型类有两个基本的问题：   1. 范型参数定义的实例字段，如private M m = null;由于M的类型在运行时才能确定，那么我们在类的方法中，无法使用m，这跟定义pri
  • 【HBase十三】HBase知识点总结 bit1129 hbase
    1. 数据从MemStore flush到磁盘的触发条件有哪些？    a.显式调用flush，比如flush 'mytable'    b.MemStore中的数据容量超过flush的指定容量，hbase.hregion.memstore.flush.size,默认值是64M 2. Region的构成是怎么样？ 1个Region由若干个Store组成
  • 服务器被DDOS攻击防御的SHELL脚本 ronin47
    mkdir /root/bin vi /root/bin/dropip.sh #!/bin/bash/bin/netstat -na|grep ESTABLISHED|awk ‘{print $5}’|awk -F:‘{print $1}’|sort|uniq -c|sort -rn|head -10|grep -v -E ’192.168|127.0′|awk ‘{if($2!=null&a
  • java程序员生存手册-craps 游戏-一个简单的游戏 bylijinnan java
    import java.util.Random; public class CrapsGame { /** * *一个简单的赌*博游戏，游戏规则如下： *玩家掷两个骰子，点数为1到6，如果第一次点数和为7或11，则玩家胜， *如果点数和为2、3或12，则玩家输， *如果和为其它点数，则记录第一次的点数和，然后继续掷骰，直至点数和等于第一次掷出的点
  • TOMCAT启动提示NB: JAVA_HOME should point to a JDK not a JRE解决 开窍的石头 JAVA_HOME
    当tomcat是解压的时候，用eclipse启动正常，点击startup.bat的时候启动报错; 报错如下：   The JAVA_HOME environment variable is not defined correctly This environment variable is needed to run this program NB: JAVA_HOME shou
  • [操作系统内核]操作系统与互联网 comsci 操作系统
         我首先申明：我这里所说的问题并不是针对哪个厂商的，仅仅是描述我对操作系统技术的一些看法       操作系统是一种与硬件层关系非常密切的系统软件，按理说，这种系统软件应该是由设计CPU和硬件板卡的厂商开发的，和软件公司没有直接的关系，也就是说，操作系统应该由做硬件的厂商来设计和开发
  • 富文本框ckeditor_4.4.7 文本框的简单使用 支持IE11 cuityang 富文本框
    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>知识库内容编辑</tit
  • Property null not found darrenzhu datagridFlexAdvancedpropery null
    When you got error message like "Property null not found ***", try to fix it by the following way: 1)if you are using AdvancedDatagrid, make sure you only update the data in the data prov
  • MySQl数据库字符串替换函数使用 dcj3sjt126com mysql函数替换
    需求：需要将数据表中一个字段的值里面的所有的  .   替换成  _   原来的数据是  site.title  site.keywords  .... 替换后要为     site_title  site_keywords   使用的SQL语句如下：   updat
  • mac上终端起动MySQL的方法 dcj3sjt126com mysqlmac
    首先去官网下载: http://www.mysql.com/downloads/ 我下载了5.6.11的dmg然后安装,安装完成之后..如果要用终端去玩SQL.那么一开始要输入很长的:/usr/local/mysql/bin/mysql 这不方便啊,好想像windows下的cmd里面一样输入mysql -uroot -p1这样...上网查了下..可以实现滴. 打开终端,输入: 1
  • Gson使用一（Gson） eksliang jsongson
    转载请出自出处：http://eksliang.iteye.com/blog/2175401 一.概述 从结构上看Json，所有的数据（data）最终都可以分解成三种类型： 第一种类型是标量（scalar），也就是一个单独的字符串（string）或数字（numbers），比如"ickes"这个字符串。 第二种类型是序列（sequence），又叫做数组（array）
  • android点滴4 gundumw100 android
    Android 47个小知识 http://www.open-open.com/lib/view/open1422676091314.html Android实用代码七段（一） http://www.cnblogs.com/over140/archive/2012/09/26/2611999.html http://www.cnblogs.com/over140/arch
  • JavaWeb之JSP基本语法 ihuning javaweb
      目录   JSP模版元素  JSP表达式  JSP脚本片断  EL表达式  JSP注释  特殊字符序列的转义处理  如何查找JSP页面中的错误   JSP模版元素    JSP页面中的静态HTML内容称之为JSP模版元素，在静态的HTML内容之中可以嵌套JSP
  • App Extension编程指南（iOS8/OS X v10.10）中文版 啸笑天 ext
             当iOS 8.0和OS X v10.10发布后，一个全新的概念出现在我们眼前，那就是应用扩展。顾名思义，应用扩展允许开发者扩展应用的自定义功能和内容，能够让用户在使用其他app时使用该项功能。你可以开发一个应用扩展来执行某些特定的任务，用户使用该扩展后就可以在多个上下文环境中执行该任务。比如说，你提供了一个能让用户把内容分
  • SQLServer实现无限级树结构 macroli oraclesqlSQL Server
    表结构如下： 数据库id path titlesort 排序 1 0 首页 0 2 0,1 新闻 1 3 0,2 JAVA 2 4 0,3 JSP 3 5 0,2,3 业界动态 2 6 0,2,3 国内新闻 1 创建一个存储过程来实现，如果要在页面上使用可以设置一个返回变量将至传过去   create procedure test as begin decla
  • Css居中div，Css居中img，Css居中文本，Css垂直居中div qiaolevip 众观千象学习永无止境每天进步一点点css
    /**********Css居中Div**********/ div.center { width: 100px; margin: 0 auto; } /**********Css居中img**********/ img.center { display: block; margin-left: auto; margin-right: auto; }
  • Oracle 常用操作(实用) 吃猫的鱼 oracle
    SQL>select text from all_source where owner=user and name=upper('&plsql_name');  SQL>select * from user_ind_columns where index_name=upper('&index_name');  将表记录恢复到指定时间段以前
  • iOS中使用RSA对数据进行加密解密 witcheryne iosrsaiPhoneobjective c
      RSA算法是一种非对称加密算法,常被用于加密数据传输.如果配合上数字摘要算法, 也可以用于文件签名. 本文将讨论如何在iOS中使用RSA传输加密数据. 本文环境 mac os  openssl-1.0.1j, openssl需要使用1.x版本, 推荐使用[homebrew](http://brew.sh/)安装. Java 8 RSA基本原理 RS
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他