`
ailongni
  • 浏览: 62038 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

easyui 创建可编辑的表格

阅读更多

$('#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>&nbsp;&nbsp;';
                          var b = '<a href="#" onclick="saveInfo(\''+ index + '\')">保存</a>&nbsp;&nbsp;';   
                          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行内可编辑”的场景下,我们主要关注的是 EasyUI 表格(grid)组件的可编辑功能。这种功能允许用户在表格的行内直接编辑数据,无需跳转到单独的编辑页面或者弹窗,极大地提升了用户体验。 在 EasyUI 中,...

    jquery easy ui edatagrid 动态编辑表格 例子

    在本文中,我们将深入探讨jQuery Easy UI中的`edatagrid`组件,以及如何实现动态编辑表格,特别是下拉框的联动功能。`edatagrid`是jQuery Easy UI库中的一个强大工具,它扩展了基本的`datagrid`功能,提供了更丰富的...

    Servlet+easyui例子,实现了可编辑表格,增删改查等操作;包含了数据库建库脚本

    在这个"Servlet+Easyui例子"中,开发者通过这两者结合,实现了功能完备的数据管理界面,包括可编辑表格及增删改查操作。以下是对这个示例项目中的关键知识点的详细解释: 1. **Servlet**:Servlet是Java Web应用的...

    easyui 可编辑datagrid完整例子,支持filebox

    总的来说,这个例子展示了如何利用 EasyUI 的 datagrid 和 filebox 扩展来创建一个具有文件上传功能的可编辑数据表,并通过 Java 后端与 MySQL 数据库协同工作。开发人员可以从这个例子中学到如何集成这些组件,实现...

    easyui表格

    3. **列定义**:每一列可以通过 `columns` 配置来定义,包括字段名(field)、标题(title)、宽度(width)以及是否可编辑(editable)等属性。还可以自定义列的操作,如按钮、链接等。 4. **功能扩展**:EasyUI ...

    easyUI实例

    通过深入研究这个“easyUI实例”,开发者不仅可以学习如何实现动态编辑表格,还能掌握 EasyUI 的基本用法和最佳实践,这对于提升前端开发效率和创建高质量的Web应用大有裨益。同时,了解这些知识点对于理解前端数据...

    easyui datagrid 增加鼠标悬停弹窗事件

    EasyUI的Datagrid是一个强大的表格组件,它可以显示大量数据并支持排序、分页、过滤和编辑等功能。在Web应用中,Datagrid常用于展示结构化的数据,使用户能够高效地浏览和操作信息。 2. **鼠标悬停事件**: 在...

    easyui datagrid 数据导出到Excel

    在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...

    Easyui-datagrid编辑模式详解

    例如,创建一个 checkbox 类型的编辑器: ```javascript $.extend($.fn.datagrid.defaults.editors, { checkbox: { // 自定义编辑器名称 init: function(container, options) { var input = $('...

    JQueryEasyUI的增删查改

    例如,可以创建一个按钮,点击后弹出一个对话框,让用户输入新记录的信息,然后使用`datagrid`的`append`方法将新记录添加到表格中。同时,需要确保后台的数据服务能处理这个新增请求并保存到数据库。 接着,"查"的...

    js 可编辑表格,批量编辑

    例如,EasyUI的etable模块提供了创建可编辑表格的能力,包括行级编辑和全选编辑模式。通过设置表格的属性和事件监听,我们可以实现单元格的点击编辑、保存和撤销操作。 在实现批量编辑时,我们需要关注几个关键点:...

    easyui的datagrid中editor和combogrid的结合使用

    对于需要动态编辑表格数据的应用场景,可以通过设置datagrid中的`editor`属性来实现单元格级别的编辑功能。 #### 二、combogrid组件介绍 在easyUI中,`combogrid`是一个结合了`combobox`和`grid`特性的组件,它...

    easyui的入门教程

    - **表格(Grid)**: 支持数据分页、排序、过滤和编辑功能,与后台数据库的交互也非常便捷。 - **表单(Form)**: 自动绑定数据,支持验证,可以方便地创建复杂表单。 - **树形结构(Tree)**: 显示层级关系的...

    jquery-easyui-1.4.5_easyuiapi_

    - **Grid(表格)**:Grid组件用于展示数据表格,支持分页、排序、过滤、编辑等功能,可以与后台数据源无缝对接。 - **Tree(树形结构)**:Tree组件用于展示层次结构的数据,支持展开、折叠、选择节点等操作,常...

    EasyUI的小案例

    EasyUI的网格组件可以配置成可编辑模式,允许用户直接在表格内修改数据。当用户提交更改时,EasyUI会处理与服务器的通信,更新后台数据。 5. **删除(Delete)** 删除操作可以通过在网格组件上添加删除按钮来实现。...

    JqueryEasyUI DataGrid例子

    在网页开发中,jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了丰富的用户界面组件,如 DataGrid,用于创建交互式、数据驱动的表格。DataGrid 是 EasyUI 的一个重要组件,它可以帮助开发者轻松地展示、操作和...

    springmvc-easyui-tree增删改

    SpringMVC是Spring框架的一个模块,专门用于处理Web应用程序的模型-视图-控制器(MVC)架构,而EasyUI则是一个基于jQuery的前端UI库,提供了一系列美观且易于使用的组件,包括树形控件、窗口、表格等。现在我们来...

    jQuery EasyUI 1.3 API 中文教程

    可编辑数据表格 - Editable DataGrid 带右键菜单的数据表格 - DataGrid ContextMenu 数据表格行样式 - DataGrid Custom Row Style 数据表格页脚行 - DataGridFooter Row 树形数据表格 - TreeGrid 数据表格...

    jqueryEasyUI

    - **表格(Grid)**:数据展示的主要工具,支持分页、排序、过滤和编辑等功能。 - **表单(Form)**:用于收集用户输入,支持多种表单控件,如文本框、下拉框、复选框等。 - **菜单(Menu)**:创建多级下拉菜单,常...

    EasyUI管理后台模板源码

    "EasyUI管理后台模板源码"是一个包含EasyUI框架用于创建后台管理系统的完整源代码包,可以帮助开发者快速搭建出具有专业外观和功能的管理界面。 EasyUI的核心特性包括: 1. **组件丰富**:EasyUI提供了诸如表格...

Global site tag (gtag.js) - Google Analytics