<%@ 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)是常见的数据展示组件,而“bootstrap插件_table可编辑表格_demo”则是Bootstrap表格功能的一个扩展,它允许用户直接在表格内进行编辑,提供了更加交互式的用户体验。 Bootstrap表格的...
在IT行业中,尤其是在网页开发领域,可编辑表格的实现是一个常见的需求。"可编辑表格js代码" 提供了一种高效且灵活的解决方案,允许用户直接在网页上对表格数据进行编辑,极大地提升了交互性和用户体验。下面我们将...
先简单说明一下,这个Demo...IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关 └── vue ├── axios.min.js ## a
基于vue的可编辑表格 很多时候我们需要直接编辑表格内容,这个组件刚好解决了需求
Bootstrap可编辑表格是一种基于Bootstrap框架实现的交互式表格,它允许用户在表格内直接编辑数据,无需跳转页面或打开新窗口。这种功能对于数据管理、CRUD操作(创建、读取、更新、删除)非常实用,尤其适用于后台...
在IT领域,"可编辑表格"是一个非常实用的功能,它广泛应用于数据管理、数据分析和信息组织。无论是电子表格软件如Microsoft Excel,还是在线协作工具如Google Sheets,这种功能都为用户提供了极大的便利。下面我们将...
"jquery可编辑表格插件"就是基于jQuery的一种工具,旨在为网页中的表格提供动态编辑功能,使得用户可以直接在表格中进行数据的增删改查,极大地提升了交互性和用户体验。这种插件在数据展示和管理场景中尤其实用,...
本教程将探讨如何利用jQuery实现一个可编辑的表格,让用户体验到更加交互式的数据管理。 首先,我们需要理解HTML表格的基本结构。一个基本的HTML表格由`<table>`元素开始,其中包含`<tr>`(行)元素,每个行内有`...
EXT 可编辑 表格的例子 EXT 可编辑 表格的例子
在MATLAB开发中,TLAB库提供了一种高级的数据可视化工具——可编辑表格。这种功能使得用户能够在图形界面中直接操作数据,进行编辑、查看和分析,极大地提升了交互性和效率。下面将详细介绍这个功能及其应用。 一、...
在JavaScript的世界里,实现一个可编辑的表格是一个常见的需求,特别是在构建交互性强的Web应用时。这个任务可以通过多种方式来完成,例如使用原生的HTML `<table>` 元素配合DOM操作,或者利用现有的库如jQuery,...
在本文中,我们将详细解析如何使用Vue.js框架封装一个可编辑的表格插件。该插件允许用户在表格中进行单元格编辑,并能对表头进行任意合并,从而提供了强大的表格数据处理功能。 首先,我们需要了解该插件的基本结构...
本篇文章将深入探讨如何使用jQuery来实现一个可编辑的表格,这在数据展示和用户交互方面具有广泛的应用。 首先,让我们了解基本概念。jQuery的核心特性包括选择器(用于查找HTML元素)、DOM操作(添加、删除或修改...
【标题】"原创-javascript服务器交互型可编辑表格"是一个关于使用JavaScript实现与服务器进行交互的动态、可编辑表格的技术分享。在这个项目中,开发者利用JavaScript的灵活性和强大的功能,创建了一个用户可以直接...
这个资源,"在线编辑表格 html格式可编辑表格 javascript编写",提供了一个使用HTML和JavaScript实现的简单可编辑表格。JavaScript是一种强大的客户端脚本语言,常用于增强网页的动态功能,而HTML则是网页内容的基础...
标题 "EasyUI可扩展Editable DataGrid(可编辑数据表格)" 涉及的是一个流行的JavaScript框架——EasyUI中的一个特性。EasyUI是基于jQuery的一个轻量级且易于使用的前端框架,它提供了一系列预定义的CSS样式和...
"纯js和html可编辑的table(表格)"这个项目提供了一种方法,允许用户直接在网页上对表格进行编辑,增强了用户的交互体验。接下来,我们将深入探讨如何使用JavaScript (JS) 和 HTML 实现这样的功能,以及涉及的相关...
**jQuery+PureCSS可编辑表格插件** 这款插件结合了jQuery的动态功能和PureCSS的简洁设计,为网页开发者提供了一种简单易用的可编辑表格解决方案。它允许用户直接在表格中编辑数据,提高了交互性和用户体验。下面将...
layui表格动态添加|layui表格可编辑动态添加