`
JavaSky66
  • 浏览: 38822 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

可编辑表格EditGridPanel

阅读更多
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
   <title></title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="/test/extjs/adapter/ext/ext-base.js"></script>
   <script type="text/javascript" src="/test/extjs/ext-all.js"></script>
   <script type="text/javascript" src="/test/extjs/ext-all-debug.js"></script>
   <link rel="stylesheet" type="text/css" href="/test/extjs/resources/css/ext-all.css">
   <script type="text/javascript">
      Ext.onReady(function(){
        var data = [
          {id:1,name:'小王',sex:'男',email:'xiaowang@easyjf.com',bornDate:'1991-5-5'},
          {id:1,name:'小李',sex:'男',email:'xiaoli@easyjf.com',bornDate:'1992-5-6'},
          {id:1,name:'小兰',sex:'女',email:'xiaolan@easyjf.com',bornDate:'1990-2-3'}
        ];
        var store = new Ext.data.JsonStore({
           data:data,
           fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]
        });
       
        var colM = new Ext.grid.ColumnModel([
          { header:"姓名",
            dataIndex:"name",
            sortable:true,
            editor:new Ext.form.TextField()},
          { header:"性别",
            dataIndex:"sex",
            editor: new Ext.form.ComboBox({
             transform:"sexList",
             triggerAction:'all',
             lazyRender:true
            })},
          { header:"出生日期",
            dataIndex:"bornDate",
            width:120,
            renderer:Ext.util.Format.dateRenderer('Y年m月d日'),
            editor: new Ext.form.DateField({format:'Y年m月d日'})  },
          { header:"电子邮件",
            dataIndex:"email",
            sortabel:true,
            editor: new Ext.form.TextField()}
        ]);
    
     var grid = new Ext.grid.EditorGridPanel({
         renderTo:"hello",  
         title:"学生基本信息管理",
         height:200,
         width:600,
         cm:colM,
         store:store,
         autoExpandColumn:3,
         clicksToEdit:2
     });
         
  });
   
    </script>
    
</head>
<body>
     <div id="hello" style="margin-left:50px; margin-top:10px; align:center;"></div>
     <select id="sexList">
        <option>男</option>
        <option>女</option>
      </select>
</body>

</html>
分享到:
评论

相关推荐

    bootstrap插件_table可编辑表格_demo

    在Bootstrap中,表格(Table)是常见的数据展示组件,而“bootstrap插件_table可编辑表格_demo”则是Bootstrap表格功能的一个扩展,它允许用户直接在表格内进行编辑,提供了更加交互式的用户体验。 Bootstrap表格的...

    可编辑表格js代码

    在IT行业中,尤其是在网页开发领域,可编辑表格的实现是一个常见的需求。"可编辑表格js代码" 提供了一种高效且灵活的解决方案,允许用户直接在网页上对表格数据进行编辑,极大地提升了交互性和用户体验。下面我们将...

    vue+iview 实现可编辑表格的示例代码

    先简单说明一下,这个Demo...IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关 └── vue ├── axios.min.js ## a

    vue可编辑表格

    基于vue的可编辑表格 很多时候我们需要直接编辑表格内容,这个组件刚好解决了需求

    bootstrap可编辑表格完整代码

    Bootstrap可编辑表格是一种基于Bootstrap框架实现的交互式表格,它允许用户在表格内直接编辑数据,无需跳转页面或打开新窗口。这种功能对于数据管理、CRUD操作(创建、读取、更新、删除)非常实用,尤其适用于后台...

    可编辑表格

    在IT领域,"可编辑表格"是一个非常实用的功能,它广泛应用于数据管理、数据分析和信息组织。无论是电子表格软件如Microsoft Excel,还是在线协作工具如Google Sheets,这种功能都为用户提供了极大的便利。下面我们将...

    jquery可编辑表格插件

    "jquery可编辑表格插件"就是基于jQuery的一种工具,旨在为网页中的表格提供动态编辑功能,使得用户可以直接在表格中进行数据的增删改查,极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用,...

    jQuery实现可编辑表格

    本教程将探讨如何利用jQuery实现一个可编辑的表格,让用户体验到更加交互式的数据管理。 首先,我们需要理解HTML表格的基本结构。一个基本的HTML表格由`&lt;table&gt;`元素开始,其中包含`&lt;tr&gt;`(行)元素,每个行内有`...

    EXT 可编辑 表格的例子

    EXT 可编辑 表格的例子 EXT 可编辑 表格的例子

    matlab开发-TLAB中的可编辑表格

    在MATLAB开发中,TLAB库提供了一种高级的数据可视化工具——可编辑表格。这种功能使得用户能够在图形界面中直接操作数据,进行编辑、查看和分析,极大地提升了交互性和效率。下面将详细介绍这个功能及其应用。 一、...

    JS实现可编辑的表格

    在JavaScript的世界里,实现一个可编辑的表格是一个常见的需求,特别是在构建交互性强的Web应用时。这个任务可以通过多种方式来完成,例如使用原生的HTML `&lt;table&gt;` 元素配合DOM操作,或者利用现有的库如jQuery,...

    Vue封装的可编辑表格插件方法

    在本文中,我们将详细解析如何使用Vue.js框架封装一个可编辑的表格插件。该插件允许用户在表格中进行单元格编辑,并能对表头进行任意合并,从而提供了强大的表格数据处理功能。 首先,我们需要了解该插件的基本结构...

    JQuery实现可编辑的表格

    本篇文章将深入探讨如何使用jQuery来实现一个可编辑的表格,这在数据展示和用户交互方面具有广泛的应用。 首先,让我们了解基本概念。jQuery的核心特性包括选择器(用于查找HTML元素)、DOM操作(添加、删除或修改...

    原创-javascript服务器交互型可编辑表格

    【标题】"原创-javascript服务器交互型可编辑表格"是一个关于使用JavaScript实现与服务器进行交互的动态、可编辑表格的技术分享。在这个项目中,开发者利用JavaScript的灵活性和强大的功能,创建了一个用户可以直接...

    在线编辑表格 html格式可编辑表格 javascript编写

    这个资源,"在线编辑表格 html格式可编辑表格 javascript编写",提供了一个使用HTML和JavaScript实现的简单可编辑表格。JavaScript是一种强大的客户端脚本语言,常用于增强网页的动态功能,而HTML则是网页内容的基础...

    EasyUI可扩展Editable DataGrid(可编辑数据表格)

    标题 "EasyUI可扩展Editable DataGrid(可编辑数据表格)" 涉及的是一个流行的JavaScript框架——EasyUI中的一个特性。EasyUI是基于jQuery的一个轻量级且易于使用的前端框架,它提供了一系列预定义的CSS样式和...

    纯js和html可编辑的table(表格)

    "纯js和html可编辑的table(表格)"这个项目提供了一种方法,允许用户直接在网页上对表格进行编辑,增强了用户的交互体验。接下来,我们将深入探讨如何使用JavaScript (JS) 和 HTML 实现这样的功能,以及涉及的相关...

    jQuery+PureCSS可编辑表格插件

    **jQuery+PureCSS可编辑表格插件** 这款插件结合了jQuery的动态功能和PureCSS的简洁设计,为网页开发者提供了一种简单易用的可编辑表格解决方案。它允许用户直接在表格中编辑数据,提高了交互性和用户体验。下面将...

    layui表格动态添加|layui表格可编辑

    layui表格动态添加|layui表格可编辑动态添加

Global site tag (gtag.js) - Google Analytics