$('#infodatagrid').datagrid({
nowrap: false,
striped: true,
loadMsg:'数据加载中请稍后……',
url:'<c:url value="/jxc/depot/findImportDocumentInfo.jsps?documentId="/>'+'<c:out value="${d.documentId}"/>',
collapsible:true,
singleSelect:true,
showPageList: true,
pageSize: 20,
frozenColumns:[[
{title:'选择',field:'infoId',width:30,checkbox:true}
]],
columns:[[
{field:'matCode',title:'料号',width:100},
{field:'matName',title:'产品名称',width:100},
{field:'matStandard',title:'规格',width:100},
{field:'matLibNumber',title:'当前库存量',width:100},
{field:'documentNumber',title:'数量',width:50,editor:'numberbox'},
{field:'documentFunction',title:'用途',width:70,
editor:{
type:'combobox',
options:{
valueField:'id',
textField:'text',
required:true,
editable:false
}
},
formatter:function(value,rowData,index){
for(var i=0; i < comboboxData_.length; i++){
if(value == comboboxData_[i].id){
return comboboxData_[i].text;
}
}
}
},
{field:'opt',title:'操作',width:180,
formatter:function(value,rowData,index){
var a = '<a href="#" onclick="editInfo(\''+ index + '\')">编辑</a> ';
var b = '<a href="#" onclick="saveInfo(\''+ index + '\')">保存</a> ';
var c = '<a href="#" onclick="delInfo(\''+ index +'\')">删除</a>';
var d = '<span class="red" style="display: none" id="'+index+'">保存成功</span>';
return a+b+c+d;
}
}
]],
onBeforeEdit:function(index,row){
row.editing = true;
},
onAfterEdit:function(index,row){
row.editing = false;
},
onCancelEdit:function(index,row){
row.editing = false;
},
//pagination:true,
rownumbers:true
});
//入库明细行编辑
function editInfo(index){
$('#infodatagrid').datagrid('acceptChanges'); //让表格接受改变的数据
$('#infodatagrid').datagrid('clearSelections'); //首先清空所以选择
$('#infodatagrid').datagrid('beginEdit', index);
$('#infodatagrid').datagrid('selectRow',index); //编辑时 选择这一行
//当编辑时,加载下拉框数据
var amount = $('#infodatagrid').datagrid('getEditor', {index:index, field:'documentFunction'}).target;
amount.combobox("loadData", comboboxData_);
$("#"+index).hide(); //隐藏消息提示
}
<table id="infodatagrid"></table>
分享到:
相关推荐
在“easyUI行内可编辑”的场景下,我们主要关注的是 EasyUI 表格(grid)组件的可编辑功能。这种功能允许用户在表格的行内直接编辑数据,无需跳转到单独的编辑页面或者弹窗,极大地提升了用户体验。 在 EasyUI 中,...
在本文中,我们将深入探讨jQuery Easy UI中的`edatagrid`组件,以及如何实现动态编辑表格,特别是下拉框的联动功能。`edatagrid`是jQuery Easy UI库中的一个强大工具,它扩展了基本的`datagrid`功能,提供了更丰富的...
在这个"Servlet+Easyui例子"中,开发者通过这两者结合,实现了功能完备的数据管理界面,包括可编辑表格及增删改查操作。以下是对这个示例项目中的关键知识点的详细解释: 1. **Servlet**:Servlet是Java Web应用的...
总的来说,这个例子展示了如何利用 EasyUI 的 datagrid 和 filebox 扩展来创建一个具有文件上传功能的可编辑数据表,并通过 Java 后端与 MySQL 数据库协同工作。开发人员可以从这个例子中学到如何集成这些组件,实现...
3. **列定义**:每一列可以通过 `columns` 配置来定义,包括字段名(field)、标题(title)、宽度(width)以及是否可编辑(editable)等属性。还可以自定义列的操作,如按钮、链接等。 4. **功能扩展**:EasyUI ...
通过深入研究这个“easyUI实例”,开发者不仅可以学习如何实现动态编辑表格,还能掌握 EasyUI 的基本用法和最佳实践,这对于提升前端开发效率和创建高质量的Web应用大有裨益。同时,了解这些知识点对于理解前端数据...
EasyUI的Datagrid是一个强大的表格组件,它可以显示大量数据并支持排序、分页、过滤和编辑等功能。在Web应用中,Datagrid常用于展示结构化的数据,使用户能够高效地浏览和操作信息。 2. **鼠标悬停事件**: 在...
在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...
例如,创建一个 checkbox 类型的编辑器: ```javascript $.extend($.fn.datagrid.defaults.editors, { checkbox: { // 自定义编辑器名称 init: function(container, options) { var input = $('...
例如,可以创建一个按钮,点击后弹出一个对话框,让用户输入新记录的信息,然后使用`datagrid`的`append`方法将新记录添加到表格中。同时,需要确保后台的数据服务能处理这个新增请求并保存到数据库。 接着,"查"的...
例如,EasyUI的etable模块提供了创建可编辑表格的能力,包括行级编辑和全选编辑模式。通过设置表格的属性和事件监听,我们可以实现单元格的点击编辑、保存和撤销操作。 在实现批量编辑时,我们需要关注几个关键点:...
对于需要动态编辑表格数据的应用场景,可以通过设置datagrid中的`editor`属性来实现单元格级别的编辑功能。 #### 二、combogrid组件介绍 在easyUI中,`combogrid`是一个结合了`combobox`和`grid`特性的组件,它...
- **表格(Grid)**: 支持数据分页、排序、过滤和编辑功能,与后台数据库的交互也非常便捷。 - **表单(Form)**: 自动绑定数据,支持验证,可以方便地创建复杂表单。 - **树形结构(Tree)**: 显示层级关系的...
- **Grid(表格)**:Grid组件用于展示数据表格,支持分页、排序、过滤、编辑等功能,可以与后台数据源无缝对接。 - **Tree(树形结构)**:Tree组件用于展示层次结构的数据,支持展开、折叠、选择节点等操作,常...
EasyUI的网格组件可以配置成可编辑模式,允许用户直接在表格内修改数据。当用户提交更改时,EasyUI会处理与服务器的通信,更新后台数据。 5. **删除(Delete)** 删除操作可以通过在网格组件上添加删除按钮来实现。...
在网页开发中,jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了丰富的用户界面组件,如 DataGrid,用于创建交互式、数据驱动的表格。DataGrid 是 EasyUI 的一个重要组件,它可以帮助开发者轻松地展示、操作和...
SpringMVC是Spring框架的一个模块,专门用于处理Web应用程序的模型-视图-控制器(MVC)架构,而EasyUI则是一个基于jQuery的前端UI库,提供了一系列美观且易于使用的组件,包括树形控件、窗口、表格等。现在我们来...
可编辑数据表格 - Editable DataGrid 带右键菜单的数据表格 - DataGrid ContextMenu 数据表格行样式 - DataGrid Custom Row Style 数据表格页脚行 - DataGridFooter Row 树形数据表格 - TreeGrid 数据表格...
- **表格(Grid)**:数据展示的主要工具,支持分页、排序、过滤和编辑等功能。 - **表单(Form)**:用于收集用户输入,支持多种表单控件,如文本框、下拉框、复选框等。 - **菜单(Menu)**:创建多级下拉菜单,常...
3. **表格(Grid)**:表格组件允许你展示大量数据,支持排序、筛选、分页、编辑等功能,方便用户进行数据浏览和操作。同时,表格可以与后台数据库无缝对接,实时更新数据。 4. **下拉菜单(Menu)**:菜单组件提供...