Sencha Gridpanel을 사용하여 JavaScript_javascript 기술에서 셀을 편집하고 셀 색상을 변경하세요.

GridPanel 개요

ExtJS의 테이블 기능은 정렬, 캐싱, 드래그, 특정 열 숨기기, 행 번호 자동 표시, 열 요약, 셀 편집 및 기타 실용적인 기능을 포함하여 매우 강력합니다.

테이블은 Panel에서 상속된 Ext.grid.GridPanel 클래스에 의해 정의되며 xtype은 그리드입니다. ExtJS에서 테이블 그리드는 열 정의 정보를 포함해야 하며 테이블의 데이터 저장소 저장소를 지정해야 합니다. 테이블의 컬럼 정보는 Ext.grid.Column 클래스(기존 Ext.grid.ColumnModel에 의해 정의됨)에 의해 정의되고, 테이블의 데이터 저장소는 Ext.data.Store에 의해 정의됩니다. 데이터 저장소는 JsonStore로 나누어집니다. , SimpleStroe 및 GroupingStore는 구문 분석된 데이터에 따라 대기합니다.

다음은 코드를 통해 센차 그리드패널 편집 유닛을 소개합니다.

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

다음 코드는 sencha Gridpanel에서 셀 색상을 변경하는 코드입니다

제목 열에는 승인된 경우 녹색이, 거부된 경우 빨간색이 표시됩니다.

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