jQuery EasyUI使用教程之启用数据网格内联编辑
来源:互联网 发布:软件实施工程师面试 编辑:程序博客网 时间:2024/05/12 13:10
<jQuery EasyUI最新试用版免费下载>
可编辑的功能已经添加到数据网格中了,它使用户能够添加新的行到数据网格中,用户还可以更新一个或多个行。本教程将介绍如何创建一个具有内联编辑功能的数据网格。
查看jQuery EasyUI演示
创建数据网格
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
$(
function
(){
$(
'#tt'
).datagrid({
title:
'Editable DataGrid'
,
iconCls:
'icon-edit'
,
width:660,
height:250,
singleSelect:
true
,
idField:
'itemid'
,
url:
'data/datagrid_data.json'
,
columns:[[
{field:
'itemid'
,title:
'Item ID'
,width:60},
{field:
'productid'
,title:
'Product'
,width:100,
formatter:
function
(value,row){
return
row.productname || value;
},
editor:{
type:
'combobox'
,
options:{
valueField:
'productid'
,
textField:
'name'
,
data:products,
required:
true
}
}
},
{field:
'listprice'
,title:
'List Price'
,width:80,align:
'right'
,editor:{type:
'numberbox'
,options:{precision:1}}},
{field:
'unitcost'
,title:
'Unit Cost'
,width:80,align:
'right'
,editor:
'numberbox'
},
{field:
'attr1'
,title:
'Attribute'
,width:180,editor:
'text'
},
{field:
'status'
,title:
'Status'
,width:50,align:
'center'
,
editor:{
type:
'checkbox'
,
options:{
on:
'P'
,
off:
''
}
}
},
{field:
'action'
,title:
'Action'
,width:80,align:
'center'
,
formatter:
function
(value,row,index){
if
(row.editing){
var
s =
'<a href="javascript:void(0)" onclick="saverow(this)">Save</a> '
;
var
c =
'<a href="javascript:void(0)" onclick="cancelrow(this)">Cancel</a>'
;
return
s+c;
}
else
{
var
e =
'<a href="javascript:void(0)" onclick="editrow(this)">Edit</a> '
;
var
d =
'<a href="javascript:void(0)" onclick="deleterow(this)">Delete</a>'
;
return
e+d;
}
}
}
]],
onEndEdit:
function
(index,row){
var
ed = $(
this
).datagrid(
'getEditor'
, {
index: index,
field:
'productid'
});
row.productname = $(ed.target).combobox(
'getText'
);
},
onBeforeEdit:
function
(index,row){
row.editing =
true
;
$(
this
).datagrid(
'refreshRow'
, index);
},
onAfterEdit:
function
(index,row){
row.editing =
false
;
$(
this
).datagrid(
'refreshRow'
, index);
},
onCancelEdit:
function
(index,row){
row.editing =
false
;
$(
this
).datagrid(
'refreshRow'
, index);
}
});
});
想要在数据网格中启用编辑功能,您需要添加一个编辑器属性到列中。编辑器会告诉数据网格如何编辑字段以及如何保存字段值,我们定义了三个编辑器:text、combobox和checkbox。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function
getRowIndex(target){
var
tr = $(target).closest(
'tr.datagrid-row'
);
return
parseInt(tr.attr(
'datagrid-row-index'
));
}
function
editrow(target){
$(
'#tt'
).datagrid(
'beginEdit'
, getRowIndex(target));
}
function
deleterow(target){
$.messager.confirm(
'Confirm'
,
'Are you sure?'
,
function
(r){
if
(r){
$(
'#tt'
).datagrid(
'deleteRow'
, getRowIndex(target));
}
});
}
function
saverow(target){
$(
'#tt'
).datagrid(
'endEdit'
, getRowIndex(target));
}
function
cancelrow(target){
$(
'#tt'
).datagrid(
'cancelEdit'
, getRowIndex(target));
}
下载EasyUI示例:easyui-datagrid-demo.zip
有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程!
0 0
- jQuery EasyUI使用教程之启用数据网格内联编辑
- jQuery EasyUI使用教程之添加工具栏到数据网格
- jQuery EasyUI使用教程之动态改变数据网格列
- jQuery EasyUI使用教程之格式化数据网格列
- jQuery EasyUI使用教程之自定义数据网格分页
- jQuery EasyUI使用教程之扩展数据网格的编辑器
- jQuery EasyUI使用教程之合并数据网格的单元格
- jQuery EasyUI使用教程之创建具有主数据网格的子网格
- jQuery EasyUI使用教程之将一个HTML表格转换为数据网格
- jQuery EasyUI使用教程之在数据网格中添加一个分页
- jQuery EasyUI使用教程之在数据网格中添加搜索功能
- jQuery EasyUI使用教程之从数据网格中获取选中行数据
- jQuery EasyUI使用教程之设置数据网格的冻结列
- jQuery EasyUI使用教程之在数据网格中自定义排序
- jQuery EasyUI使用教程之在数据网格中创建列组
- jQuery EasyUI使用教程之在数据网格中创建列组
- jQuery EasyUI使用教程之创建数据网格的自定义视图
- jQuery EasyUI使用教程之在数据网格的页脚中显示摘要信息
- wav文件格式分析(代码 C++ )
- EasyAR尝鲜系列教程之ImageTarget千呼万唤始出来
- Android绚丽加载效果视图(loading)控件
- 今日BBC
- jenkins实现cocoapods官方sepc库映射自动更新
- jQuery EasyUI使用教程之启用数据网格内联编辑
- 缓存一致性(Cache Coherency)入门
- Linux音视频(alsa库的移植须知)
- 百度地图API学习笔记(五)
- JS运动框架
- bzoj 2474
- SAS 多个文件导入
- CNN(卷积神经网络)、RNN(循环神经网络)、DNN(深度神经网络)概念区分理解
- UVA 136 Ugly Numbers(队列)