Heim > Web-Frontend > js-Tutorial > Verwenden Sie Sencha Gridpanel, um Zellen zu bearbeiten und Zellenfarben in JavaScript_Javascript-Kenntnissen zu ändern

Verwenden Sie Sencha Gridpanel, um Zellen zu bearbeiten und Zellenfarben in JavaScript_Javascript-Kenntnissen zu ändern

WBOY
Freigeben: 2016-05-16 15:29:31
Original
1244 Leute haben es durchsucht

GridPanel-Übersicht

Die Tabellenfunktion in ExtJS ist sehr leistungsstark und umfasst Sortieren, Zwischenspeichern, Ziehen, Ausblenden einer bestimmten Spalte, automatische Anzeige von Zeilennummern, Spaltenzusammenfassung, Zellenbearbeitung und andere praktische Funktionen.

Die Tabelle wird durch die von Panel geerbte Klasse Ext.grid.GridPanel definiert und ihr X-Typ ist Grid. In ExtJS muss das Tabellenraster Informationen zur Spaltendefinition enthalten und den Datenspeicher der Tabelle angeben. Die Spalteninformationen der Tabelle werden durch die Klasse Ext.grid.Column (zuvor durch Ext.grid.ColumnModel definiert) definiert, und der Datenspeicher der Tabelle wird durch Ext.data.Store definiert. Der Datenspeicher ist in JsonStore unterteilt , SimpleStroe und GroupingStore entsprechend den analysierten Daten warten.

Im Folgenden wird Ihnen die Sencha-Gridpanel-Bearbeitungseinheit anhand eines Codeabschnitts vorgestellt. Der spezifische Code lautet wie folgt:

{
xtype: 'gridpanel',
region: 'north',
height: 150,
title: 'My Grid Panel',
store: 'A_Test_Store',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'Content',
text: 'Content'
},
{
xtype: 'gridcolumn',
dataIndex: 'Time',
text: 'Time'
}
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1, //点击单元格编辑
listeners: {
beforeedit: {
fn: me.onCellEditingBeforeEdit,
scope: me
},
validateedit: {
fn: me.onCellEditingValidateedit,
scope: me
}
}
})
]
}
onCellEditingBeforeEdit: function(editor, e, eOpts) {//动态赋值用.正常情况下不需要该事件.
   e.record.data[e.field]= "my test";
e.value="my test";
e.record.commit(); //提交,不提交无效
}
onCellEditingValidateedit: function(editor, e, eOpts) {
if(e.row==1) //验证逻辑
{
e.cancel=true; //取消
e.record.data[e.field] = e.value;
}
e.record.commit();
}
Nach dem Login kopieren

Der folgende Code befasst sich mit dem Ändern der Zellenfarbe im Sencha Gridpanel

Die Titelspalte enthält grün, wenn genehmigt, und rot, wenn abgelehnt:

{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
metaData.tdAttr = 'data-qtip="'+record.data.Content+'"';

if(record.data.Content.indexOf('审核通过')!=-1)
{
metaData.style="color:green";
}
else if(record.data.Content.indexOf('拒绝')!=-1)
{
metaData.style="color:red";
}
return value;
}
,
width: '*',
dataIndex: 'Title',
text: '标题'
}
Nach dem Login kopieren

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage