Extjs Grid 编辑

最新推荐文章于 2019-01-10 11:01:15 发布
最新推荐文章于 2019-01-10 11:01:15 发布
阅读量208 收藏
点赞数
分类专栏： Extjs 文章标签： EXT SUN XML Spring CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanchong888/article/details/83258750
版权
//创建index.jsp
<%@page contentType="text/html; charset=GB2312" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>Editor Grid Example</title>

<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../ext/ext-all.js"></script>

<script type="text/javascript" src="GroupingView.js"></script>
<script type="text/javascript" src="edit-grid.js"></script>
<link rel="stylesheet" type="text/css" href="../ext/examples/grid/grid-examples.css" />

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../ext/examples/examples.css" />
</head>
<body>
<!-- EXAMPLES -->
<script type="text/javascript" src="./ext/examples/examples.js"></script>
<h1>Editor Grid Example</h1>
<p>This example shows how to create a grid with inline editing.</p>
<p>Note that the js is not minified so it is readable.
See <a href="edit-grid.js">edit-grid.js</a>.</p>

<p>The data in the grid is loaded from <a href="plants.xml">plants.xml</a>.</p>

<!-- you must define the select box here,
as the custom editor for the 'Light' column will require it -->
<select name="light" id="light" style="display: none;">
<option value="Shade">Shade</option>
<option value="Mostly Shady">Mostly Shady</option>
<option value="Sun or Shade">Sun or Shade</option>

<option value="Mostly Sunny">Mostly Sunny</option>

<option value="Sunny">Sunny</option>
</select>

<div id="editor-grid"></div>
</body>
</html>
//创建plants.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<plant>
<common>Bloodroot</common>
<botanical>Sanguinaria canadensis</botanical>
<zone>4</zone>
<light>Mostly Shady</light>
<price>2.44</price>
<availability>03/15/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Columbine</common>
<botanical>Aquilegia canadensis</botanical>
<zone>3</zone>
<light>Mostly Shady</light>
<price>9.37</price>
<availability>03/06/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Marsh Marigold</common>
<botanical>Caltha palustris</botanical>
<zone>4</zone>
<light>Mostly Sunny</light>
<price>6.81</price>
<availability>05/17/2006</availability>
<indoor>false</indoor>
</plant>
<plant>
<common>Cowslip</common>
<botanical>Caltha palustris</botanical>
<zone>4</zone>
<light>Mostly Shady</light>
<price>9.90</price>
<availability>03/06/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Dutchman's-Breeches</common>
<botanical>Dicentra cucullaria</botanical>
<zone>3</zone>
<light>Mostly Shady</light>
<price>6.44</price>
<availability>01/20/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Ginger, Wild</common>
<botanical>Asarum canadense</botanical>
<zone>3</zone>
<light>Mostly Shady</light>
<price>9.03</price>
<availability>04/18/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Hepatica</common>
<botanical>Hepatica americana</botanical>
<zone>4</zone>
<light>Mostly Shady</light>
<price>4.45</price>
<availability>01/26/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Liverleaf</common>
<botanical>Hepatica americana</botanical>
<zone>4</zone>
<light>Mostly Shady</light>
<price>3.99</price>
<availability>01/02/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Jack-In-The-Pulpit</common>
<botanical>Arisaema triphyllum</botanical>
<zone>4</zone>
<light>Mostly Shady</light>
<price>3.23</price>
<availability>02/01/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Mayapple</common>
<botanical>Podophyllum peltatum</botanical>
<zone>3</zone>
<light>Mostly Shady</light>
<price>2.98</price>
<availability>06/05/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Phlox, Woodland</common>
<botanical>Phlox divaricata</botanical>
<zone>3</zone>
<light>Sun or Shade</light>
<price>2.80</price>
<availability>01/22/2006</availability>
<indoor>false</indoor>
</plant>
<plant>
<common>Phlox, Blue</common>
<botanical>Phlox divaricata</botanical>
<zone>3</zone>
<light>Sun or Shade</light>
<price>5.59</price>
<availability>02/16/2006</availability>
<indoor>false</indoor>
</plant>
<plant>
<common>Spring-Beauty</common>
<botanical>Claytonia Virginica</botanical>
<zone>7</zone>
<light>Mostly Shady</light>
<price>6.59</price>
<availability>02/01/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Trillium</common>
<botanical>Trillium grandiflorum</botanical>
<zone>5</zone>
<light>Sun or Shade</light>
<price>3.90</price>
<availability>04/29/2006</availability>
<indoor>false</indoor>
</plant>
<plant>
<common>Wake Robin</common>
<botanical>Trillium grandiflorum</botanical>
<zone>5</zone>
<light>Sun or Shade</light>
<price>3.20</price>
<availability>02/21/2006</availability>
<indoor>false</indoor>
</plant>
<plant>
<common>Violet, Dog-Tooth</common>
<botanical>Erythronium americanum</botanical>
<zone>4</zone>
<light>Shade</light>
<price>9.04</price>
<availability>02/01/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Trout Lily</common>
<botanical>Erythronium americanum</botanical>
<zone>4</zone>
<light>Shade</light>
<price>6.94</price>
<availability>03/24/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Adder's-Tongue</common>
<botanical>Erythronium americanum</botanical>
<zone>4</zone>
<light>Shade</light>
<price>9.58</price>
<availability>04/13/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Anemone</common>
<botanical>Anemone blanda</botanical>
<zone>6</zone>
<light>Mostly Shady</light>
<price>8.86</price>
<availability>12/26/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Grecian Windflower</common>
<botanical>Anemone blanda</botanical>
<zone>6</zone>
<light>Mostly Shady</light>
<price>9.16</price>
<availability>07/10/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Bee Balm</common>
<botanical>Monarda didyma</botanical>
<zone>4</zone>
<light>Shade</light>
<price>4.59</price>
<availability>05/03/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Bergamot</common>
<botanical>Monarda didyma</botanical>
<zone>4</zone>
<light>Shade</light>
<price>7.16</price>
<availability>04/27/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Black-Eyed Susan</common>
<botanical>Rudbeckia hirta</botanical>
<zone>Annual</zone>
<light>Sunny</light>
<price>9.80</price>
<availability>06/18/2006</availability>
<indoor>false</indoor>
</plant>
<plant>
<common>Buttercup</common>
<botanical>Ranunculus</botanical>
<zone>4</zone>
<light>Shade</light>
<price>2.57</price>
<availability>06/10/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Crowfoot</common>
<botanical>Ranunculus</botanical>
<zone>4</zone>
<light>Shade</light>
<price>9.34</price>
<availability>04/03/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Butterfly Weed</common>
<botanical>Asclepias tuberosa</botanical>
<zone>Annual</zone>
<light>Sunny</light>
<price>2.78</price>
<availability>06/30/2006</availability>
<indoor>false</indoor>
</plant>
<plant>
<common>Cinquefoil</common>
<botanical>Potentilla</botanical>
<zone>Annual</zone>
<light>Shade</light>
<price>7.06</price>
<availability>05/25/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Primrose</common>
<botanical>Oenothera</botanical>
<zone>3 - 5</zone>
<light>Sunny</light>
<price>6.56</price>
<availability>01/30/2006</availability>
<indoor>false</indoor>
</plant>
<plant>
<common>Gentian</common>
<botanical>Gentiana</botanical>
<zone>4</zone>
<light>Sun or Shade</light>
<price>7.81</price>
<availability>05/18/2006</availability>
<indoor>false</indoor>
</plant>
<plant>
<common>Blue Gentian</common>
<botanical>Gentiana</botanical>
<zone>4</zone>
<light>Sun or Shade</light>
<price>8.56</price>
<availability>05/02/2006</availability>
<indoor>false</indoor>
</plant>
<plant>
<common>Jacob's Ladder</common>
<botanical>Polemonium caeruleum</botanical>
<zone>Annual</zone>
<light>Shade</light>
<price>9.26</price>
<availability>02/21/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Greek Valerian</common>
<botanical>Polemonium caeruleum</botanical>
<zone>Annual</zone>
<light>Shade</light>
<price>4.36</price>
<availability>07/14/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>California Poppy</common>
<botanical>Eschscholzia californica</botanical>
<zone>Annual</zone>
<light>Sunny</light>
<price>7.89</price>
<availability>03/27/2006</availability>
<indoor>false</indoor>
</plant>
<plant>
<common>Shooting Star</common>
<botanical>Dodecatheon</botanical>
<zone>Annual</zone>
<light>Mostly Shady</light>
<price>8.60</price>
<availability>05/13/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Snakeroot</common>
<botanical>Cimicifuga</botanical>
<zone>Annual</zone>
<light>Shade</light>
<price>5.63</price>
<availability>07/11/2006</availability>
<indoor>true</indoor>
</plant>
<plant>
<common>Cardinal Flower</common>
<botanical>Lobelia cardinalis</botanical>
<zone>2</zone>
<light>Shade</light>
<price>3.02</price>
<availability>02/22/2006</availability>
<indoor>true</indoor>
</plant>
</catalog>

//创建edit-grid.js
Ext.onReady(function(){
Ext.QuickTips.init();

function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';
};
// shorthand alias
var fm = Ext.form;

// custom column plugin example
var checkColumn = new Ext.grid.CheckColumn({
header: "Indoor?",
dataIndex: 'indoor',
width: 55
});

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = new Ext.grid.ColumnModel([{
id:'common',
header: "Common Name",
dataIndex: 'common',
width: 220,
editor: new fm.TextField({
allowBlank: false
})
},{
header: "Light",
dataIndex: 'light',
width: 130,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'light',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},{
header: "Price",
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
},{
header: "Available",
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
})
},
checkColumn
]);

// by default columns are sortable
cm.defaultSortable = true;

// this could be inline, but we want to define the Plant record
// type so we can add records dynamically
var Plant = Ext.data.Record.create([
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: 'common', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'}, // automatic date conversions
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}
]);

// create the Data Store
var store = new Ext.data.Store({
// load using HTTP
url: 'plants.xml',

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have a "plant" tag
record: 'plant'
}, Plant),

sortInfo:{field:'common', direction:'ASC'}
});

// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width:600,
height:300,
autoExpandColumn:'common',
title:'Edit Plants?',
frame:true,
plugins:checkColumn,
clicksToEdit:1,

tbar: [{
text: 'Add Plant',
handler : function(){
var p = new Plant({
common: 'New Plant 1',
light: 'Mostly Shade',
price: 0,
availDate: (new Date()).clearTime(),
indoor: false
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}]
});

// trigger the data store load
store.load();
});

Ext.grid.CheckColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};

Ext.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},

onMouseDown : function(e, t){
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},

renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}
};
wanchong888
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJS 使用grid显示数据
04-13
NULL 博文链接：https://swordboy007.iteye.com/blog/1722145
extjs grid
11-06
EXTJS Grid提供了丰富的功能，包括分页、排序、过滤、编辑等，使得用户可以高效地管理和处理数据。EXTJS 4.2.1是EXTJS的一个稳定版本，它包含了多项改进和新特性，以提升用户体验和开发者的工作效率。 在EXTJS ...
ExtJs grid使用详细
nxyc_twz
12-08 261
Ext2.0是一个javascript框架，它的Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。 首先，一个表格应该有列定义，即定义表头ColumnMod...
ExtJS学习(四)EditorGrid可编辑表格
热门推荐
分享牛
03-12 2万+
操作表格有一种需求，要操作表格需要动态的添加内容，删除内容以及双击的时候进入编辑状态。这个时候怎么办呢，看具体的实现吧。 双击点击的时候可以单元格的操作。 代码：
ExtJS4学习笔记十－－Grid使用
hnhnhnhnhn的博客
09-01 170
一、grid的例： [code="javascript"]//配置表格列 {header: "姓名", width: 50, dataIndex: 'name'}, {header: "组长", width: 50, dataIndex: 'leader', xtype: 'booleancolumn',//Ext.grid.column.Boolean布尔列 trueText: ...
ExtJS之 grid表格详解
weixin_33788244的博客
02-28 211
简单表格 排序,显示某列,读取本地数据 //本地数据 var datas = [ ['1', 'gao', 'man'], ['2', 'gao', 'man'], ['3', 'gao', 'man'] ]; //创建...
ExtJS_grid.rar_Grid javascript_extjs grid
09-23
ExtJS Grid是一款强大的JavaScript组件，用于在Web应用中创建数据密集型的表格视图。它由Sencha公司开发，是Ext JS库的核心部分，广泛应用于企业级应用的前端开发，提供丰富的功能和高度的可定制性。这个"ExtJS_grid...
ExtJS Grid功能实现
06-18
ExtJS 表格的功能实现，包括单元格编辑，数据的获取。
ExtJS之Grid
04-04
其中，`Ext.grid.Panel`是ExtJS中的核心组件之一，用于展示表格数据，并支持排序、分组以及编辑等功能。 #### 二、基本GridPanel 在创建一个简单的`Ext.grid.Panel`时，我们需要关注以下几个关键点： 1. **定义...
初学JavaScript_03(ExtJs Grid的简单使用)
10-30
ExtJS Grid是一种灵活且功能丰富的数据网格组件，可以用来展示和编辑表格形式的数据。它支持多种特性，如分页、排序、筛选等，非常适合处理大量的数据记录。 #### 三、创建基本的Grid实例 在了解了ExtJS Grid的基本...
Extjs4.2 Grid单元格编辑
01-14
Extjs4.2 Grid单元格编辑，包含日期控件，下拉框控件，同时可控制单元格是否有编辑权限。
Extjs可编辑的EditorGridPanel
07-26
NULL 博文链接：https://zxf-noimp.iteye.com/blog/629629
EXt 可以编辑的grid
09-30
自己写的editpanel 实例。简单实现grid可以 动态的修改。有需要的朋友。可以参考参考。
extjs 之 grid篇
Fupengyao的博客
02-22 498
要明白 store proxl  reader  model 之间的关系 第一篇文章 Ext.define('Business.store.businessRequest.BrUnitRuleStore',{ extend:'Ext.data.Store', alias : 'widget.brUnitRuleStore', pageSize:BusinessCommon
extjs组件：Grid
qq_36987708的博客
01-10 150
ExtJS UI由一个或多个名为Components.Ext的widget组成.JS具有定义的各种UI组件，可以根据您的要求进行定制。 Grid 网格组件可用于以表格格式显示数据。 描述 网格：这个组件是显示数据的简单组件，它是以表格格式存储在Ext.data.Store中的记录的集合。 语法 这里是创建网格的简单语法   Ext.create('Ext.grid.Panel'...
Extjs Grid 编辑 新增 删除 保存
chengs_的专栏
06-12 943
//创建edgrid.js Ext.onReady(function(){     Ext.QuickTips.init();     // 格式化日期显示     function formatDate(value){         return value ? value.dateFormat('Y, M d') : '';     }     // 格式化性
Extjs之Grid详细
diweikang的博客
11-13 1111
Grid的展示选中排序选中事件。 附图： 代码： Ext.onReady(function () { var store = Ext.create('Ext.data.Store', { fields: ["cataId", "cataNo", "cataRemark", "cataTitle", "cataObj
ExtJS可编辑Grid
10-17 488
Ext.onReady(function(){             function coverImg(val){                 return '';             };                      var store = new Ext.data.Store({                 reader:new Ext.data.Js
EXTJS4.x之可编辑的grid
yunji3344的专栏
06-14 5822
先看完http://blog.csdn.net/yunji3344/article/details/8789876这里。本文是基于上面一篇文章的修改。 修改以下几个java文件 News.java package org.extbook.pojo; import java.io.Serializable; import java.util.Date; import javax.pers
extjs grid rowediting
最新发布
04-29
ExtJS Grid RowEditing是一个用于编辑ExtJS Grid中行的插件。它允许用户通过单击单元格来编辑行中的值，而不是弹出一个表单。 RowEditing插件还提供了许多事件和方法，以便您可以在编辑期间处理数据，例如在编辑期间...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值