var datas = {total:6,rows:[
{id:1,content:'内容1'},
{id:2,content:'内容2'},
{id:3,content:'内容3'},
{id:4,content:'内容4'},
{id:5,content:'内容5'},
{id:6,content:'内容6'}
]};
<!-------------------处理结果表格-------------------------->
var editcount = 0;
$('#process').datagrid({
title:'处理结果选项设置',
width:600,
height:'auto',
singleSelect:true,
columns:[[
{field:'no',title:'编号',width:100,
formatter:function(value, rowData, index){
return index+1;
}
},
{field:'content',title:'名称',width:394,editor:'text'},
{field:'id',title:'操作',width:100,align:'id',
formatter:function(value,row,index){
if (row.editing){
var s = '<a href="#" onclick="saverow('+index+')">保存</a> ';
var c = '<a href="#" onclick="cancelrow('+index+')">取消</a>';
return s+c;
} else {
var e = '<a href="#" onclick="editrow('+index+')">编辑</a> ';
var d = '<a href="#" onclick="deleterow('+index+')">删除</a>';
return e+d;
}
}
}
]],
onBeforeEdit:function(index,row){
row.editing = true;
$('#process').datagrid('refreshRow', index);
editcount++;
},
onAfterEdit:function(index,row){
row.editing = false;
$('#process').datagrid('refreshRow', index);
editcount--;
},
onCancelEdit:function(index,row){
row.editing = false;
$('#process').datagrid('refreshRow', index);
editcount--;
}
}).datagrid('loadData',datas).datagrid('acceptChanges');
});
function editrow(index){
$('#process').datagrid('beginEdit', index);
}
分享到:
相关推荐
- **表格(Grid)**:数据展示的主要工具,支持分页、排序、过滤和编辑等功能。 - **表单(Form)**:用于收集用户输入,支持多种表单控件,如文本框、下拉框、复选框等。 - **菜单(Menu)**:创建多级下拉菜单,常...
1. **数据网格(datagrid)**:DataGrid 是一个强大的表格控件,支持分页、排序、过滤、编辑等功能,可以与后端数据库进行数据交互,实现动态加载和数据操作。 2. **下拉菜单(combobox)**:Combobox 提供了一个可...
编辑器是实现表格可编辑功能的核心元素,它允许用户通过特定的控件对表格中的数据进行编辑。 编辑器的种类很多,比如numberbox用于编辑数字,text用于编辑普通文本,validatebox则用于编辑并验证输入内容,datebox...
在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...
标题 "EasyUI可扩展Editable DataGrid(可编辑数据表格)" 涉及的是一个流行的JavaScript框架——EasyUI中的一个特性。EasyUI是基于jQuery的一个轻量级且易于使用的前端框架,它提供了一系列预定义的CSS样式和...
EasyUI 是基于 jQuery 的一组 UI 组件,它为开发者提供了诸如表格(datagrid)、下拉菜单(combobox)、树形控件(tree)、对话框(dialog)等常见的网页元素。这些组件不仅具有丰富的样式,还内置了大量的功能,如...
2. **表格(Table)**:EasyUI 的表格组件允许动态加载数据,支持排序、分页、过滤和编辑等功能。通过`.datagrid()`方法,你可以将HTML表格转化为功能丰富的数据展示区。 3. **菜单(Menu)**:菜单系统提供了一种组织...
3. **表格(Grid)**:可实现数据分页、排序、过滤和编辑功能的表格,支持远程数据加载,常用于数据管理界面。 4. **菜单(Menu)**:创建下拉或级联菜单,方便实现导航和操作选项。 5. **表单(Form)**:提供...
### jQuery EasyUI视频教程知识点概览 #### 一、jQuery EasyUI简介 - **定义**:jQuery EasyUI是一种简化Web开发的工具集,它通过整合jQuery框架与一系列UI组件,帮助开发者快速创建出功能丰富且视觉效果良好的用户...
- **实例**:jQuery EasyUI 提供了大量的示例代码,帮助开发者了解如何使用各个组件,如对话框(dialog)、表格(datagrid)、树形控件(tree)、下拉菜单(combobox)等。 ### 2. 主要组件介绍 #### 2.1 数据网格...
"JQueryEasyUI的增删查改"是Web应用中最基本的功能,通常指的是创建(Create)、读取(Read)、更新(Update)和删除(Delete)操作,也就是常说的CRUD操作。这些功能对于任何数据管理型的应用来说都是必不可少的。 ...
1. **组件化**:jQueryEasyUI将常见的用户界面元素如表格、对话框、菜单、按钮等封装为独立的组件,每个组件都有丰富的配置选项和API,便于开发者定制和交互。 2. **数据绑定**:jQueryEasyUI支持通过JSON或Ajax...
7. **组件组合**:EasyUI的强大之处在于组件之间的可组合性,可以将多个组件组合在一起,形成复杂的业务场景,如在对话框中嵌入表格,或者在表格中使用下拉框作为列编辑器。 8. **自定义组件**:虽然EasyUI已经提供...
- **表格(Table)**:支持分页、排序、过滤和编辑功能,可直接绑定到数据源。 - **布局(Layout)**:提供面板、拆分面板和网格布局,用于构建复杂的页面结构。 - **菜单(Menu)**:创建下拉菜单和级联菜单,方便用户...
总的来说,jQuery EasyUI官方API中文版是开发者不可或缺的工具,它详细阐述了各个组件的使用方法,帮助开发者快速上手并高效地开发Web应用程序。通过深入学习和实践,我们可以利用EasyUI创建出具有专业级用户体验的...
在"jQueryEasyUI-1.3.6(含API文档)"这个压缩包中,有两个主要文件:`jEasyUI1.3.6版API中文版(Richie696).chm`和`jquery-easyui-1.3.6`。 `jEasyUI1.3.6版API中文版(Richie696).chm`是jQuery EasyUI 1.3.6版本的API...
EasyUI 是一套轻量级的前端框架,它基于jQuery,提供了诸如对话框、表格、下拉菜单、树形结构、面板等众多UI组件。1.4.5版本在前一版本的基础上优化了性能,增加了新功能,并修复了一些已知问题,为开发者带来更...
4. **网格(Grid)**:数据展示组件,能够展示表格形式的数据,支持排序、筛选、分页、编辑等功能,常用于后台数据的展示和操作。 5. **树(Tree)**:用于展示层级结构的数据,支持展开、折叠、异步加载等特性,常...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了一系列易于使用的组件,如对话框、表格、菜单、按钮等。1.4.3 版本是该框架的一个稳定版本,提供了丰富的功能和改进。下面将详细阐述...
在表格(datagrid)组件中,EasyUI 提供了数据分页、排序、过滤、编辑等功能。开发者可以轻松地将后端数据源绑定到表格,实现数据的动态加载。此外,表格还支持行选择、行操作和自定义列模板,满足各种显示和交互...