datagrid现在具有行编辑能力了,使用时只须在columns中为需要编辑的列添加一个editor属性,编辑保存时同时具有数据校验能力。
看一个例子效果图:
代码如下:
$('#tt').datagrid({
title:'Editable DataGrid',
iconCls:'icon-edit',
width:660,
height:250,
singleSelect:true,
idField:'itemid',
url:'datagrid_data.json',
columns:[[
{field:'itemid',title:'Item ID',width:60},
{field:'productid',title:'Product',width:100,
formatter:function(value){
for(var i=0; i<products.length; i++){
if (products[i].productid == value) return products[i].name;
}
return 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:150,editor:'text'},
{field:'status',title:'Status',width:50,align:'center',
editor:{
type:'checkbox',
options:{
on: 'P',
off: ''
}
}
},
{field:'action',title:'Action',width:70,align:'center',
formatter:function(value,row,index){
if (row.editing){
var s = '<a href="#" onclick="saverow('+index+')">Save</a> ';
var c = '<a href="#" onclick="cancelrow('+index+')">Cancel</a>';
return s+c;
} else {
var e = '<a href="#" onclick="editrow('+index+')">Edit</a> ';
var d = '<a href="#" onclick="deleterow('+index+')">Delete</a>';
return e+d;
}
}
}
]],
onBeforeEdit:function(index,row){
row.editing = true;
$('#tt').datagrid('refreshRow', index);
},
onAfterEdit:function(index,row){
row.editing = false;
$('#tt').datagrid('refreshRow', index);
},
onCancelEdit:function(index,row){
row.editing = false;
$('#tt').datagrid('refreshRow', index);
}
});
原文及下载地址:http://jquery-easyui.wikidot.com/tutorial:datagrid12
分享到:
- 2010-06-10 17:21
- 浏览 97498
- 评论(41)
- 论坛回复 / 浏览 (39 / 33687)
- 查看更多
相关推荐
jquery easyui的压缩包,以及easyui的一些拓展插件包,包括Portal(制作图表、列表、球形图等),数据网格视图(DataGrid View),可编辑的数据网格(Editable DataGrid),表格编辑单元格(Cell Editing in ...
对表格进行增删改后一次性保存或回滚的发生相当有用。参照官方的教程例子做了个用户管理的小例子。
数据表格添加查询功能 数据表格添加工具条 数据表格设置冻结列 动态改变数据表格列 格式化数据表格列 数据表格设置排序 数据表格自定义排序 数据表格添加复选框 数据表格自定分页工具栏 数据表格...
这是 jquery easyui Extension 实现表格 双击编辑功能 所以来的js文件
两种方法将easyui datagrid 中的数据导出到Excel中,均以验证可以正常使用
最近在用jquery做页面,当datagrid放置数字文本框时输入小数会自动四舍五入,然后加了小数位数限制时不能输入小数点了。 最后发现是easyui1.4的bug,把这个补丁引入进去就好了
o 6.3 得到DataGrid选择行 27 o 6.4 添加工具栏到DataGrid 28 o 6.5 DataGrid冻结列 30 o 6.6 动态改变DataGrid列 31 o 6.7 格式化DataGrid列 32 o 6.8 添加排序到DataGrid 33 o 6.9 在DataGrid上的复选框 36 ...
开发工具为VS2010,MVC4(razor视图引擎),数据访问为EntityFramework4.4,UI插件为jquery-easyui-1.3.0,编辑器为kindeditor,上传文件为uploadify,表格插件Flexigrid,相册插件为lightbox 3.工程分为:CommWeb,...
本篇文章主要介绍jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】 。datagrid现在具有行编辑能力了,可以添加和编辑数据,同时对行内数据上移下移。
jquery easy ui edatagrid 动态编辑表格 下拉框 联动 ,支持增加,编辑,删除行,日期狂,下拉框联动显示数据,测试ok
o 6.3 得到DataGrid选择行 27 o 6.4 添加工具栏到DataGrid 28 o 6.5 DataGrid冻结列 30 o 6.6 动态改变DataGrid列 31 o 6.7 格式化DataGrid列 32 o 6.8 添加排序到DataGrid 33 o 6.9 在DataGrid上的复选框 36 o 6.10...
扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults。 依赖 datagrid 用法 代码如下: ”tt”></table> 代码如下: $(‘#tt’).treegrid({ url:’treegrid_data.json’, treeField:’name’, ...
扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 代码如下: ”tt”></table> 代码如下: $(‘#tt’).datagrid({ url:’datagrid_data....
extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax远程支持 table转换 等功能">http: www extgrid com extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui ...
最近在学习easyUI 但是发现每次做一个表格都要去写一个json数据,太麻烦了,我想要用一种方式可以简单生成就行。于是,我花了几个小时时间开始写了这段段代码: 功能:自动生成Json数据; 详细说明:页面会显示一...
这是一套技术比较全面的EasyUI视频,由浅入深的几乎涵盖了所有EasyUI常用的组件,本课程后台Java端采用...熟练掌握可编辑表格Combo组件详解8.熟练掌握combo组件详解,省市县级联菜单9.熟练掌握tree组件详解,拖拽,增删改查
easyui可编辑表格插件、想使用easyui的可编辑表格就要导入这个js
信息系统: 在企业、机构或组织中,信息系统是指由硬件、软件、人员、数据资源、通信网络等组成的,用于收集、处理、存储、分发和管理信息,以支持决策制定、业务运营和战略规划的系统。这类系统包括: 数据库管理...
jQuery EasyUI | 基于jQuery的UI插件集合体 | [http://www.jeasyui.com](http://www.jeasyui.com) React | 界面构建框架 | [https://github.com/facebook/react](https://github.com/facebook/react) Editor.md | ...