如何设置才能够:让Ext.grid.Panel组件表头部分有特殊意义的某些列标题字段单元格设置不同的背景色

/

渲染单元格背景统一函数

/

function getBackgroundColor(color,fn){

return function() {

arguments[1]style+='background-color:'+color+';';

if(ExtisFunction(fn)){

return fnapply(this, arguments);

}

return arguments[0];

};

}

Extcreate('ExtdataStore', {

storeId:'employeeStore',

fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],

data:[

{firstname:"Michael", lastname:"Scott", seniority:7, dep:"Management", hired:"01/10/2004"},

{firstname:"Dwight", lastname:"Schrute", seniority:2, dep:"Sales", hired:"04/01/2004"},

{firstname:"Jim", lastname:"Halpert", seniority:3, dep:"Sales", hired:"02/22/2006"},

{firstname:"Kevin", lastname:"Malone", seniority:4, dep:"Accounting", hired:"06/10/2007"},

{firstname:"Angela", lastname:"Martin", seniority:5, dep:"Accounting", hired:"10/21/2008"}

]

});

Extcreate('ExtgridPanel', {

title: 'Column Demo',

store: ExtdataStoreManagerlookup('employeeStore'),

columns: [

{text: 'First Name',  dataIndex:'firstname',

//每一列都这样加个渲染函数

renderer:getBackgroundColor('red',function(value,meta){

//自定义函数 *** 作，与普通的渲染函数一样允许任意修改

metastyle='background-color:yellow;';

return 'aaaa';

})

},

{text: 'Last Name',  dataIndex:'lastname'},

{text: 'Hired Month',  dataIndex:'hired', xtype:'datecolumn', format:'M'},

{text: 'Department (Yrs)', xtype:'templatecolumn', tpl:'{dep} ({seniority})'}

],

width: 400,

forceFit: true,

renderTo: ExtgetBody()

});

由图可以看到，虽然我getBackgroundColor取的是红色red，但因为自定义渲染函数里又重新修改成**，所以最终还是取决于自定义渲染函数

至于第一个单元格的斜线我不知道行不行，但我知道多层表头是可以的。。前几天我就做了。如果你要的话，你找我。我给你代码。

多层表头其实就是扩展了一个插件。你只需要配置列模型的时候，colspan合并多少列就行。很简单的。。你自己先去找找 EXT 多层表头

table 表格基本使用组件，让你制作简单表格只需要专注内容，而不用过度专注样式。

此组件基本全平台支持。（支付宝，百度，头条小程序理论上都支持，但是没有很细致的测试这几个平台）

github 地址： >

excel中如何快速拆分并填充空白单元格

Microsoft Excel是Microsoft为使用Windows和Apple Macintosh *** 作系统的电脑编写的一款电子表格软件。直观的界面、出色的计算功能和图表工具，再加上成功的市场营销，使Excel成为最流行的个人计算机数据处理软件。excel中如何快速拆分并填充空白单元格？方法很简单，快来学习一下吧。

步骤

1、首先打开excel表格。

2、全部选中，点击合并后居中-取消单元格合并。

3、发现合并的单元格拆分了。

4、选中表格后，按住F5定位条件，选择空值。

5、把所有空值全部选中，输入公式=上箭头，按住ctrl+enter键。

6、所有空值全部按照上一单元格内容快速填充。

Excel怎么做表格

1新建一个excel文件。

2在草纸上画好草稿，将需要数据的表格样式及列数和行数确定。比如我需要建立一个五行六列的表格，最上面是标题行。

3在新建excel中，用鼠标选中需要的表格行数列数，然后点右键，“设置单元格格式”——“边框”，在“预置”中根据需要选择“外边框”、“内部”边框。

4根据需要加边框。如果是标题处，可以取消外边框，合并横向或者纵向的表格。方法也是先选中需要设置的表格（第一行），然后右键点击“设置单元格格式”——“对齐”，然后选中“合并单元格”。

5根据标题长度、宽度调整一下标题行。如我的标题是“XXXXXX公司表”题目比较长，将标题行拉宽，设置“自动换行”方法如上图，然后根据需要左右缩进，调整居中，然后设置字体大小等。看调整前的图表：根据字体调整表，如图：

6其他空格内容填好后，同样根据内容调整一下就可以。

7如果需要打印，就要设置页面了。我们这个表一看就是横向的，所以选择“文件”--“页面设置”，选择“横向”，然后打印预览一下。如果要求居中打印但是表格处于页面左上角，就调整一下页边距。调整好位置后打印即可。

8如果需要将此表插入到word文档以便其他使用，也很简单。先将刚做好的Excel表格保存为一个文件名《设备表》到桌面上。将此页的页面设置成横向，否则表格会显示不全的。在Word文档中需要插入的地方，点击一下鼠标，然后选择上面“插入”---“对象”——“由文件创建”，然后找到刚刚保存的《设备表》，插入，确定，然后就插入到Word中了。效果图如下：

电脑excel快捷键大全

一、Ctrl组合快捷键

Ctrl+（ 取消隐藏选定范围内所有隐藏的行。

Ctrl+） 取消隐藏选定范围内所有隐藏的列。

Ctrl+& 将外框应用于选定单元格。

Ctrl+_ 从选定单元格删除外框。

Ctrl+~ 应用“常规”数字格式。

Ctrl+$ 应用带有两位小数的“货币”格式（负数放在括号中）。

Ctrl+% 应用不带小数位的“百分比”格式。

Ctrl+^ 应用带有两位小数的“指数”格式。

Ctrl+# 应用带有日、月和年的“日期”格式。

Ctrl+@ 应用带有小时和分钟以及AM或PM的“时间”格式。

Ctrl+！ 应用带有两位小数、千位分隔符和减号（-）（用于负值）的“数值”格式。

Ctrl+- 显示用于删除选定单元格的删除对话框。

Ctrl+ 选择环绕活动单元格的当前区域（由空白行和空白列围起的数据区域）。 在数据透视表中，它将选择整个数据透视表。

Ctrl+： 输入当前时间。

Ctrl+; 输入当前日期。

Ctrl+` 在工作表中切换显示单元格值和公式。

Ctrl+‘ 将公式从活动单元格上方的单元格复制到单元格或编辑栏中。

Ctrl+“ 将值从活动单元格上方的单元格复制到单元格或编辑栏中。

Ctrl++ 显示用于插入空白单元格的插入对话框。

Ctrl+1 显示单元格格式对话框。

Ctrl+2 应用或取消加粗格式设置。

Ctrl+3 应用或取消倾斜格式设置。

Ctrl+4 应用或取消下划线。

Ctrl+5 应用或取消删除线。

Ctrl+6 在隐藏对象、显示对象和显示对象占位符之间切换。

Ctrl+7 显示或隐藏常用工具栏。

Ctrl+8 显示或隐藏大纲符号。

Ctrl+9 隐藏选定的行。

Ctrl+0 隐藏选定的列。

Ctrl+A 选择整个工作表。

如果工作表包含数据，则按Ctrl+A将选择当前区域。

再次按Ctrl+A将选择整个工作表。 当插入点位于公式中某个函数名称的右边时，则会显示“函数参数”对话框。

当插入点位于公式中某个函数名称的右边时，按Ctrl+Shift+A将会插入参数名称和括号。

Ctrl+B 应用或取消加粗格式设置。

Ctrl+C 复制选定的单元格。

如果连续按两次Ctrl+C，则会显示Microsoft Office剪贴板。

Ctrl+D 使用向下填充命令将选定范围内最顶层单元格的内容和格式复制到下面的单元格中。

Ctrl+F 显示查找对话框。

按Shift+F5也会显示此对话框，而按Shift+F4则会重复上一次查找 *** 作。

Ctrl+G 显示定位对话框。 按F5也会显示此对话框。

Ctrl+H 显示查找和替换对话框。

Ctrl+I 应用或取消倾斜格式设置。

Ctrl+K 为新的超链接显示插入超链接对话框，或为选定的现有超链接显示编辑超链接对话框。

Ctrl+L 显示创建列表对话框。

Ctrl+N 创建一个新的空白文件。

Ctrl+O 显示打开对话框以打开或查找文件。

按Ctrl+Shift+O可选择所有包含批注的单元格。

Ctrl+P 显示打印对话框。

Ctrl+R 使用“向右填充”命令将选定范围最左边单元格的内容和格式复制到右边的单元格中。

Ctrl+S 使用其当前文件名、位置和文件格式保存活动文件。

Ctrl+U 应用或取消下划线。

Ctrl+V 在插入点处插入剪贴板的内容，并替换任何选定内容。只有在剪切或复制了对象、文本或单元格内容后，才能使用此快捷键。

Ctrl+W 关闭选定的工作簿窗口。

Ctrl+X 剪切选定的单元格。

Ctrl+Y 重复上一个命令或 *** 作（如有可能）。

Ctrl+Z 使用撤消命令来撤消上一个命令或删除最后键入的条目。

显示了自动更正智能标记时，按Ctrl+Shift+Z可使用撤消或重复命令撤消或恢复上一次自动更正 *** 作。

二、功能键：

1、F1 显示“帮助”任务窗格。

按Ctrl+F1可关闭并重新打开当前任务窗格。

按Alt+F1可创建当前范围中数据的图表。

按Alt+Shift+F1可插入新的工作表。

2、F2 编辑活动单元格并将插入点放在单元格内容的结尾。如果禁止在单元格中进行编辑，它也会将插入点移到编辑栏中。

按Shift+F2可编辑单元格批注。

3、F3 将定义的名称粘贴到公式中。

按Shift+F3将显示插入函数对话框。

4、F4 重复上一个命令或 *** 作（如有可能）。

按Ctrl+F4可关闭选定的工作簿窗口。

5、F5 显示定位对话框。

按Ctrl+F5可恢复选定工作簿窗口的窗口大小。

6、F6 切换到已拆分（窗口菜单，拆分命令）的工作表中的下一个窗格。

按Shift+F6可切换到已拆分的工作表中的上一个窗格。

如果打开了多个工作簿窗口，则按Ctrl+F6可切换到下一个工作簿窗口。

7、F7 显示“拼写检查”对话框，以检查活动工作表或选定范围中的拼写。

如果工作簿窗口未最大化，则按Ctrl+F7可对该窗口执行移动命令。

使用箭头键移 动窗口，并在完成时按Esc。

8、F8 打开或关闭扩展模式。在扩展模式中，EXT将出现在状态行中，并且按箭头键可扩展选定范围。

通过按Shift+F8，您可以使用箭头键将非邻近单元格或范围添加到单元格的选定范围。

当工作簿未最大化时，按Ctrl+F8可执行大小命令（在工作簿窗口的控制菜单上。 按Alt+F8可显示用于运行、编辑或删除宏的宏对话框。

9、F9 计算所有打开的工作簿中的所有工作表。

如果先按F9，再按Enter（对于数组公式则按Ctrl+Shift+Enter），则会计算选定的公式部分，并将选定部分替换为计算出的值。

按Shift+F9可计算活动工作表。

按Ctrl+Alt+F9可计算所有打开的工作簿中的所有工作表，不管它们自上次计算以来是否已更改。

如果按Ctrl+Alt+Shift+F9，则会重新检查相关公式，然后计算所有打开的工作簿中的所有单元格，其中包括未标记为需要计算的单元格。

按Ctrl+F9可将工作簿窗口最小化为图标。

10、F10 选择菜单栏或同时关闭打开的菜单和子菜单。

按Shift+F10可显示选定项目的快捷菜单。

按Alt+Shift+F10可显示智能标记的菜单或消息。如果存在多个智能标记，按该组合键可切换到下一个智能标记并显示其菜单或消息。

按Ctrl+F10可最大化或还原选定的工作簿窗口。

11、F11 创建当前范围内数据的图表。

按Shift+F11可插入一个新工作表。

按Alt+F11将打开Visual Basic编辑器，您可以在其中通过使用Visual Basic for Applications（VBA）来创建宏。

按Alt+Shift+F11将打开Microsoft脚本编辑器，您可以在其中添加文本、编辑HTML标记以及修改任何脚本代码。

12、F12 显示另存为对话框。

三、其他快捷键 ：

1、箭头键 在工作表中上移、下移、左移或右移一个单元格。

按Ctrl+箭头键可移动到工作表中当前数据区域 （数据区域：包含数据的单元格区域，该区域周围为空白单元格或数据表边框。）的边缘。

按Shift+箭头键可将单元格的选定范围扩大一个单元格。

按Ctrl+Shift+箭头键可将单元格的选定范围扩展到与活动单元格同一列或同一行中的最后一个非空白单元格。

当菜单处于可见状态时，按向左键或向右键可选择左边或右边的菜单。当子菜单处于打开状态时，按这些箭头键可在主菜单和子菜单之间切换。

当菜单或子菜单处于打开状态时，按向下键或向上键可选择下一个或上一个命令。 在对话框中，按箭头键可在打开的下拉列表中的各个选项之间移动，或在一组选项的各个选项之间移动。 按Alt+向下键可打开选定的下拉列表。

2、Backspace 在编辑栏中删除左边的一个字符。 也可清除活动单元格的内容。 Delete 从选定单元格中删除单元格内容（数据和公式），而不会影响单元格格式或批 注。 在单元格编辑模式下，按该键将会删除插入点右边的字符。

3、End 当Scroll Lock处于开启状态时，移动到窗口右下角的单元格。

当菜单或子菜单处于可见状态时，也可选择菜单上的最后一个命令。

按Ctrl+End可移动到工作表上的最后一个单元格，即所使用的最下方一行与所使用的最右边一列的交汇单元格。

按Ctrl+Shift+End可将单元格的选定范围扩展到工作表上所使用的最后一个单元格（右下角）。

4、Enter 从单元格或编辑栏中完成单元格输入，并（默认）选择下面的单元格。 在数据表单中，按该键可移动到下一条记录中的第一个字段。

打开选定的菜单（按F10激活菜单栏），或执行选定命令的 *** 作。

在对话框中，按该键可执行对话框中默认命令按钮（带有突出轮廓的按钮，通常为确定按钮）的 *** 作。

按Alt+Enter可在同一单元格中另起一个新行。

按Ctrl+Enter可使用当前条目填充选定的单元格区域。

按Shift+Enter可完成单元格输入并选择上面的单元格。

5、Esc 取消单元格或编辑栏中的输入。 按该键也可关闭打开的菜单或子菜单、对话框或消息窗口。

6、Home 移到工作表中某一行的开头。

当Scroll Lock处于开启状态时，移到窗口左上角的单元格。 当菜单或子菜单处于可见状态时，选择菜单上的第一个命令。 按Ctrl+Home可移到工作表的开头。 按Ctrl+Shift+Home可将单元格的选定范围扩展到工作表的开头。

7、Page Down 在工作表中下移一个屏幕。

按Alt+Page Down可在工作表中向右移动一个屏幕。 按Ctrl+Page Down可移到工作簿中的下一个工作表。

按Ctrl+Shift+Page Down可选择工作簿中的当前和下一个工作表。

8、Page Up

在工作表中上移一个屏幕。

按Alt+Page Up可在工作表中向左移动一个屏幕。

按Ctrl+Page Up可移到工作簿中的上一个工作表。

按Ctrl+Shift+Page Up可选择工作簿中的当前和上一个工作表。

9、空格键 在对话框中，执行选定按钮的 *** 作，或者选中或清除复选框。

按Ctrl+空格键可选择工作表中的整列。

按Shift+空格键可选择工作表中的整行。

按Ctrl+Shift+空格键可选择整个工作表。

如果工作表包含数据，则按Ctrl+Shift+空格键将选择当前区域。

再按一次Ctrl+Shift+空格键将选择整个工作表。

当某个对象处于选定状态时，按Ctrl+Shift+空格键可选择工作表上的所有对象。

按Alt+空格键可显示Excel窗口的控制菜单。

10、Tab 在工作表中向右移动一个单元格。

在受保护的工作表中，可在未锁定的单元格之间移动。 在对话框中，移到下一个选项或选项组。

按Shift+Tab可移到前一个单元格（在工作表中）或前一个选项（在对话框中）。

在对话框中，按Ctrl+Tab可切换到下一个选项卡。

在对话框中，按Ctrl+Shift+Tab可切换到前一个选项卡。

四、电子表格的处理技巧

1、打印时每页均显示表头：

文件——页面设置——工作表——打印标题，顶端标题行，确定所要设置的标题行（可用鼠标去拖选标题行）；同样的方法还可设置左端标题列。

注：以上方法只是在打印时你才能看到每页自动增加表头。

2、编辑浏览时表头总显示在顶端：

首先选中你要固定的表头的下面一行或一个单元格——窗口—— 冻结窗格。同理你也可以把左边的列固定。若行与列都要固定的话，那就不要选择一行，而是选择那行与列后交叉的单元格即可，去试试吧。这样能方便浏览内容。

3、在excel中输入对号与错号的简便方法：

对号：按住 alt 然后输入数字小键盘的 41420，松开 alt 即可。

错号：按住 alt 然后输入数字小键盘的 41409，松开 alt 即可。

平方：按住 alt 然后输入数字小键盘的 178，松开 alt 即可。

立方：按住 alt 然后输入数字小键盘的 179，松开 alt 即可。

;

/

表格综合示例

@author XiongChun

@since 2010-10-20

/

ExtonReady(function() {

var group1 = [{}, {

header : '分组1-1a',

colspan : 4,

align : 'center'

}, {}, {

header : '分组1-3',

colspan : 5,

align : 'center'

}];

var group2 = [{}, {

header : '分组2-1',

colspan : 2,

align : 'center'

}, {

header : '分组2-2',

colspan : 2,

align : 'center'

}, {

header : '单位',

rowmerge:true,

domid:'group_dw',

align : 'center'

}, {

header : '分组2-3',

colspan : 2,

align : 'center'

}, {

header : '分组2-4',

colspan : 3,

align : 'center'

}];

  /

var group = new ExtuxgridColumnHeaderGroup({

rows : [group1, group2]

});

 /

var group = new ExtuxpluginsGroupHeaderGrid({

rows : [group1, group2]

});

// 定义自动当前页行号

var rownum = new ExtgridRowNumberer({

header : 'NO',

width : 28

});

// 复选框

var sm = new ExtgridCheckboxSelectionModel();

// 定义列模型

var cm = new ExtgridColumnModel([rownum, {

header : '项目ID', // 列标题

dataIndex : 'xmid', // 数据索引:和Store模型对应

sortable : true

// 是否可排序

}, {

header : '项目名称',

dataIndex : 'xmmc',

sortable : true,

width : 200

}, {

header : '项目热键',

dataIndex : 'xmrj'

}, {

header : '规格',

dataIndex : 'gg'

}, {

dataIndex : 'dw',

align:'center',

fixed:true,

width : 60

}, {

header : '启用状态',

dataIndex : 'qybz',

// 演示render的用法(代码转换,该render由<G4Studio:extcodeRender/>标签生成)

renderer : QYBZRender,

width : 60

}, {

header : '剂型',

dataIndex : 'jx',

width : 60

}, {

header : '产地',

dataIndex : 'cd',

width : 200

}, {

header : '医院编码',

dataIndex : 'yybm'

}, {

header : '更改时间',

dataIndex : 'ggsj'

}]);

/

数据存储

/

var store = new ExtdataStore({

// 获取数据的方式

proxy : new Extdata>

url : 'gridDemodoreqCode=querySfxmDatas'

}),

// 数据读取器

reader : new ExtdataJsonReader({

totalProperty : 'TOTALCOUNT', // 记录总数

root : 'ROOT' // Json中的列表数据根节点

}, [{

name : 'xmid' // Json中的属性Key值

}, {

name : 'sfdlbm'

}, {

name : 'xmmc'

}, {

name : 'xmrj'

}, {

name : 'gg'

}, {

name : 'dw'

}, {

name : 'qybz'

}, {

name : 'jx'

}, {

name : 'cd'

}, {

name : 'yybm'

}, {

name : 'ggsj'

}])

});

/

翻页排序时候的参数传递

/

// 翻页排序时带上查询条件

storeon('beforeload', function() {

thisbaseParams = {

xmmc : ExtgetCmp('xmmc')getValue()

};

});

// 每页显示条数下拉选择框

var pagesize_combo = new ExtformComboBox({

name : 'pagesize',

triggerAction : 'all',

mode : 'local',

store : new ExtdataArrayStore({

fields : ['value', 'text'],

data : [[10, '10条/页'], [20, '20条/页'],

[50, '50条/页'], [100, '100条/页'],

[250, '250条/页'], [500, '500条/页']]

}),

valueField : 'value',

displayField : 'text',

value : '20',

editable : false,

width : 85

});

var number = parseInt(pagesize_combogetValue());

// 改变每页显示条数reload数据

pagesize_comboon("select", function(comboBox) {

bbarpageSize = parseInt(comboBoxgetValue());

number = parseInt(comboBoxgetValue());

storereload({

params : {

start : 0,

limit : bbarpageSize

}

});

});

// 分页工具栏

var bbar = new ExtPagingToolbar({

pageSize : number,

store : store,

displayInfo : true,

displayMsg : '显示{0}条到{1}条,共{2}条',

plugins : new ExtuxProgressBarPager(), // 分页进度条

emptyMsg : "没有符合条件的记录",

items : ['-', '&nbsp;&nbsp;', pagesize_combo]

});

// 表格工具栏

var tbar = new ExtToolbar({

items : [{

xtype : 'textfield',

id : 'xmmc',

name : 'xmmc',

emptyText : '请输入项目名称',

width : 150,

enableKeyEvents : true,

// 响应回车键

listeners : {

specialkey : function(field, e) {

if (egetKey() == ExtEventObjectENTER) {

queryCatalogItem();

}

}

}

}, {

text : '查询',

iconCls : 'page_findIcon',

handler : function() {

queryCatalogItem();

}

}, {

text : '刷新',

iconCls : 'page_refreshIcon',

handler : function() {

storereload();

}

},'->' ,{

text : '重设列标题',

iconCls : 'acceptIcon',

handler : function() {

cmsetColumnHeader('2','开天辟地');

}

}, {

text : '重设分组列标题',

iconCls : 'acceptIcon',

handler : function() {

ExtgetDom('group_dw')innerHTML = '开天辟地';

}

}]

});

// 表格实例

var grid = new ExtgridGridPanel({

// 表格面板标题,默认为粗体，我不喜欢粗体，这里设置样式将其格式为正常字体

title : '<span class="commoncss">表格综合演示七(表头分组支持)</span>',

height : 500,

frame : true,

autoScroll : true,

region : 'center', // 和VIEWPORT布局模型对应，充当center区域布局

margins : '3 3 3 3',

store : store, // 数据存储

stripeRows : true, // 斑马线

cm : cm, // 列模型

tbar : tbar, // 表格工具栏

bbar : bbar,// 分页工具栏

plugins : group,

viewConfig : {

// 不产横向生滚动条, 各列自动扩展自动压缩, 适用于列数比较少的情况

// forceFit : true

},

loadMask : {

msg : '正在加载表格数据,请稍等'

}

});

// 页面初始自动查询数据

// storeload({params : {start : 0,limit : bbarpageSize}});

// 布局模型

var viewport = new ExtViewport({

layout : 'border',

items : [grid]

});

// 查询表格数据

function queryCatalogItem() {

storeload({

params : {

start : 0,

limit : bbarpageSize,

xmmc : ExtgetCmp('xmmc')getValue()

}

});

}

});

    {

        header : "项目名称",

        sortable : true,

        width : 200,

        dataIndex : "name"

    }

以上就是关于如何设置才能够:让Ext.grid.Panel组件表头部分有特殊意义的某些列标题字段单元格设置不同的背景色全部的内容，包括:如何设置才能够:让Ext.grid.Panel组件表头部分有特殊意义的某些列标题字段单元格设置不同的背景色、EXt grid 表格问题、「uni-app 组件」t-table 表格等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！