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

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();
}

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: '标题'
}