jQuery EasyUI 框架提供了創建網頁所需的一切，幫助您輕松建立站點。
easyui 是一個基於 jQuery 的框架，集成了各種用戶界面插件。
easyui 提供建立現代化的具有交互性的 javascript 應用的必要的功能。
使用 easyui，您不需要寫太多 javascript 代碼，一般情況下您只需要使用一些 html 標記來定義用戶界面。
HTML 網頁的完整框架。
easyui 節省了開發產品的時間和規模。
easyui 非常簡單，但是功能非常強大。
先給大家展示效果圖：
Html代碼：
|
1
2
|
<table id=
"dd"
>
</table>
|
引入JS文件和CSS樣式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<script src=
"http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery-1.4.4.min.js"
type=
"text/javascript"
></script>
<script src=
"http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/jquery.easyui.min.js"
type=
"text/javascript"
></script>
<link href=
"http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/themes/default/easyui.css"
rel=
"stylesheet"
type=
"text/css"
/>
<link href=
"http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/themes/icon.css"
rel=
"stylesheet"
type=
"text/css"
/>
<script src=
"http://www.cnblogs.com/Resources/jquery-easyui-1.2.3/locale/easyui-lang-zh_CN.js"
type=
"text/javascript"
></script>
<script type=
"text/javascript"
>
$(
function
() {
var
datagrid;
//定義全局變量datagrid
var
editRow = undefined;
//定義全局變量：當前編輯的行
datagrid = $(
"#dd"
).datagrid({
url: ‘UserCenter.aspx‘,
//請求的數據源
iconCls: ‘icon-save‘,
//圖標
pagination:
true
,
//顯示分頁
pageSize: 15,
//頁大小
pageList: [15, 30, 45, 60],
//頁大小下拉選項此項各value是pageSize的倍數
fit:
true
,
//datagrid自適應寬度
fitColumn:
false
,
//列自適應寬度
striped:
true
,
//行背景交換
nowap:
true
,
//列內容多時自動折至第二行
border:
false
,
idField: ‘ID‘,
//主鍵
columns: [[
//顯示的列
{field: ‘ID‘, title: ‘編號‘, width: 100, sortable:
true
, checkbox:
true
},
{ field: ‘UserName‘, title: ‘用戶名‘, width: 100, sortable:
true
,
editor: { type: ‘validatebox‘, options: { required:
true
} }
},
{ field: ‘RealName‘, title: ‘真實名稱‘, width: 100,
editor: { type: ‘validatebox‘, options: { required:
true
} }
},
{ field: ‘Email‘, title: ‘郵箱‘, width: 100,
editor: { type: ‘validatebox‘, options: { required:
true
} }
}
]],
queryParams: { action: ‘query‘ },
//查詢參數
toolbar: [{ text: ‘添加‘, iconCls: ‘icon-add‘, handler:
function
() {
//添加列表的操作按鈕添加，修改，刪除等
//添加時先判斷是否有開啟編輯的行，如果有則把開戶編輯的那行結束編輯
if
(editRow != undefined) {
datagrid.datagrid(
"endEdit"
, editRow);
}
//添加時如果沒有正在編輯的行，則在datagrid的第一行插入一行
if
(editRow == undefined) {
datagrid.datagrid(
"insertRow"
, {
index: 0,
// index start with 0
row: {
}
});
//將新插入的那一行開戶編輯狀態
datagrid.datagrid(
"beginEdit"
, 0);
//給當前編輯的行賦值
editRow = 0;
}
}
}, ‘-‘,
{ text: ‘刪除‘, iconCls: ‘icon-remove‘, handler:
function
() {
//刪除時先獲取選擇行
var
rows = datagrid.datagrid(
"getSelections"
);
//選擇要刪除的行
if
(rows.length > 0) {
$.messager.confirm(
"提示"
,
"你確定要刪除嗎?"
,
function
(r) {
if
(r) {
var
ids = [];
for
(
var
i = 0; i < rows.length; i++) {
ids.push(rows[i].ID);
}
//將選擇到的行存入數組並用,分隔轉換成字符串，
//本例只是前台操作沒有與數據庫進行交互所以此處只是彈出要傳入后台的id
alert(ids.join(‘,‘));
}
});
}
else
{
$.messager.alert(
"提示"
,
"請選擇要刪除的行"
,
"error"
);
}
}
}, ‘-‘,
{ text: ‘修改‘, iconCls: ‘icon-edit‘, handler:
function
() {
//修改時要獲取選擇到的行
var
rows = datagrid.datagrid(
"getSelections"
);
//如果只選擇了一行則可以進行修改，否則不操作
if
(rows.length == 1) {
//修改之前先關閉已經開啟的編輯行，當調用endEdit該方法時會觸發onAfterEdit事件
if
(editRow != undefined) {
datagrid.datagrid(
"endEdit"
, editRow);
}
//當無編輯行時
if
(editRow == undefined) {
//獲取到當前選擇行的下標
var
index = datagrid.datagrid(
"getRowIndex"
, rows[0]);
//開啟編輯
datagrid.datagrid(
"beginEdit"
, index);
//把當前開啟編輯的行賦值給全局變量editRow
editRow = index;
//當開啟了當前選擇行的編輯狀態之后，
//應該取消當前列表的所有選擇行，要不然雙擊之后無法再選擇其他行進行編輯
datagrid.datagrid(
"unselectAll"
);
}
}
}
}, ‘-‘,
{ text: ‘保存‘, iconCls: ‘icon-save‘, handler:
function
() {
//保存時結束當前編輯的行，自動觸發onAfterEdit事件如果要與后台交互可將數據通過Ajax提交后台
datagrid.datagrid(
"endEdit"
, editRow);
}
}, ‘-‘,
{ text: ‘取消編輯‘, iconCls: ‘icon-redo‘, handler:
function
() {
//取消當前編輯行把當前編輯行罷undefined回滾改變的數據,取消選擇的行
editRow = undefined;
datagrid.datagrid(
"rejectChanges"
);
datagrid.datagrid(
"unselectAll"
);
}
}, ‘-‘],
onAfterEdit:
function
(rowIndex, rowData, changes) {
//endEdit該方法觸發此事件
console.info(rowData);
editRow = undefined;
},
onDblClickRow:
function
(rowIndex, rowData) {
//雙擊開啟編輯行
if
(editRow != undefined) {
datagrid.datagrid(
"endEdit"
, editRow);
}
if
(editRow == undefined) {
datagrid.datagrid(
"beginEdit"
, rowIndex);
editRow = rowIndex;
}
}
});
});
</script>
|