extjs雙層表頭

① extjs中有一個多欄表頭的GRID，第一欄是學院，第二欄分別是專業。如何可以獲取到第一欄表頭的內容

$(document).ready(function(){

var _data = [
{'name': 'a','id': 'b1','sex': 'b', 'age': '1'},
{'name': 'f','id': 'b2','sex': 'g','age': '2'},
{'name': 'h','id': 'b3','sex': 'g','age': '3'},
{'name': 'k','id': 'b4','sex': 'b','age': '4' },
{'name': 'a','id': 'b1','sex': 'b', 'age': '1'},
{'name': 'f','id': 'b2','sex': 'g','age': '2'},
{'name': 'h','id': 'b3','sex': 'g','age': '3'},
{'name': 'k','id': 'b4','sex': 'b','age': '4' },
{'name': 'a','id': 'b1','sex': 'b', 'age': '1'},
{'name': 'f','id': 'b2','sex': 'g','age': '2'},
{'name': 'h','id': 'b3','sex': 'g','age': '3'},
{'name': 'k','id': 'b4','sex': 'b','age': '4' },
{'name': 'a','id': 'b1','sex': 'b', 'age': '1'},
{'name': 'f','id': 'b2','sex': 'g','age': '2'},
{'name': 'h','id': 'b3','sex': 'g','age': '3'},
{'name': 'k','id': 'b4','sex': 'b','age': '4' }
]

var UI = {};
UI.Grid = {};
//className
function createTable(current,o){
var div = document.createElement('div');
div.style.width = '90%';
div.style.padding = '0';
for(var i = 0; i < o.data.length ; i++){

var div1 = document.createElement('div');
div1.style.width = '250px';
div1.style.height = '300px';
div1.style.cssFloat = 'left';
div1.style.padding = '0';
var ul = document.createElement('ul');
var li1 = document.createElement('li');
var li2 = document.createElement('li');
var li3 = document.createElement('li');
var div2 = document.createElement('div');
div2.style.width = '220px';
div2.style.height = '200px';
div2.style.backgroundColor = '#f6f6f6';
li1.appendChild(div2);
var div3 = document.createElement('div');
div3.style.width = '220px';
div3.style.height = '35px';
div3.style.backgroundColor = '#dddddd';
div3.innerHTML = '<p>'+o.data[i].name+'</p>';
li2.appendChild(div3);

var div4 = document.createElement('div');
div4.style.width = '220px';
div4.style.height = '35px';
div4.style.backgroundColor = '#f6f6f6';
div4.innerHTML = '<p>'+o.data[i].sex+'</p>';
li3.appendChild(div4);
ul.appendChild(li1);
ul.appendChild(li2);
ul.appendChild(li3);
div1.appendChild(ul);
div.appendChild(div1);
}
current.appendChild(div);
}

$.fn.creatSth = function(o){
UI.Grid[o.id] = o ;
var current = this[0];
var table = document.createElement('table');
table.style.cssText = 'width:100%;border-collapse:collapse;border: 1px solid #DDDDDD;';

//line 1
var tr1 = document.createElement('tr');
tr1.style.height = '8px';
var td11 = document.createElement('td');
td11.style.width = '8px';
var td12 = document.createElement('td');
var td13 = document.createElement('td');
td13.style.width = '8px';
tr1.appendChild(td11);
tr1.appendChild(td12);
tr1.appendChild(td13);

// toolbar - line
var trbar = document.createElement('tr');
trbar.style.height = '15px';
var tdbar1 = document.createElement('td');
var tdbar2 = document.createElement('td');
var tdbar3 = document.createElement('td');
tdbar2.innerHTML = '123123';
trbar.appendChild(tdbar1);
trbar.appendChild(tdbar2);
trbar.appendChild(tdbar3);

//line 2
var tr2 = document.createElement('tr');
var td21 = document.createElement('td');
td21.style.width = '8px';
var td22 = document.createElement('td');
createTable(td22,o);
var td23 = document.createElement('td');
td23.style.width = '8px';
tr2.appendChild(td21);
tr2.appendChild(td22);
tr2.appendChild(td23);

//line 3
var tr3 = document.createElement('tr');
tr3.style.height = '8px';
var td31 = document.createElement('td');
td31.style.width = '8px';
var td32 = document.createElement('td');
var td33 = document.createElement('td');
td33.style.width = '8px';
tr3.appendChild(td31);
tr3.appendChild(td32);
tr3.appendChild(td33);

table.appendChild(tr1);
if(o.tbar){
table.appendChild(trbar);
}
table.appendChild(tr2);
table.appendChild(tr3);
current.appendChild(table);
};

$('#test').creatSth({
id:'tb1',
cloum:[
{head:'name',datafield:'name'},
{head:'id',datafield:'id'},
{head:'sex',datafield:'sex'},
{head:'age',datafield:'age'}
],
data:_data
});

});

② ExtJS grid表頭如何增加下拉項

extjs自己提供復選框列

//checkbox列

varfilecheckbox=newExt.grid.CheckboxSelectionModel();

//GridPanel

varfileGrid=newExt.grid.GridPanel({

store:fileStore,

columns:[

newExt.grid.RowNumberer(),//顯示列數

filecheckbox,//顯示復選框列

{//其他顯示列}]

//省略其他屬性

});

這樣你就可以而得到一個復選框，可以進行單選、全選了

如果你想自己定義的話，也可以

//定義filters

varfilters=newExt.ux.grid.GridFilters({

//

encode:encode,//jsonencodethefilterquery

local:local,//defaultstofalse(remotefiltering)

filters:[{

type:'numeric',

dataIndex:'id'

},{

type:'string',

dataIndex:'company',

disabled:true

},{

type:'numeric',

dataIndex:'price'

},{

type:'date',

dataIndex:'date'

},{

type:'list',

dataIndex:'size',

options:['small','medium','large','extralarge'],

phpMode:true

},{

type:'boolean',

dataIndex:'visible'

}]

});

//

//

//thefiltertypes(

varcreateColModel=function(finish,start){

varcolumns=[{

dataIndex:'id',

header:'Id',

//=true

//tousestore'sfield'stypeproperty(iftypepropertynot

//'auto'which

//GridFilterswillassumetobe'StringFilter'

filterable:true

//,filter:{type:'numeric'}

},{

dataIndex:'company',

header:'Company',

id:'company',

filter:{

type:'string'

//

//,disabled:true

}

},{

dataIndex:'price',

header:'Price',

filter:{

//type:'numeric'//

}

},{

dataIndex:'size',

header:'Size',

filter:{

type:'list',

options:['small','medium','large','extralarge']

//,phpMode:true

}

},{

dataIndex:'date',

header:'Date',

renderer:Ext.util.Format.dateRenderer('m/d/Y'),

filter:{

//type:'date'//

}

},{

dataIndex:'visible',

header:'Visible',

filter:{

//type:'boolean'//

}

}];

returnnewExt.grid.ColumnModel({

columns:columns.slice(start||0,finish),

defaults:{

sortable:true

}

});

};

然後

vargrid=newExt.grid.GridPanel({

colModel:createColModel(4),

plugins:[filters],

//這兩個屬性是重點，加上去就可以了

});

效果看圖片。

建議你去下載官方的源代碼，然後看其中的例子。

裡面有一個就是如何自定義這個的

③ Extjs報表是用多表頭做的，單純的grid可以導，多表頭如何導出到Execl

復制好，然後在EXCEL裡面使用選擇性粘貼--數值
試試

④ extjs grid 列頭分行

/**

* 表格綜合示例

*

* @author XiongChun

* @since 2010-10-20

*/

Ext.onReady(function() {

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 Ext.ux.grid.ColumnHeaderGroup({

rows : [group1, group2]

});

*/

var group = new Ext.ux.plugins.GroupHeaderGrid({

rows : [group1, group2]

});

// 定義自動當前頁行號

var rownum = new Ext.grid.RowNumberer({

header : 'NO',

width : 28

});

// 復選框

var sm = new Ext.grid.CheckboxSelectionModel();

// 定義列模型

var cm = new Ext.grid.ColumnModel([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:ext.codeRender/>標簽生成)

renderer : QYBZRender,

width : 60

}, {

header : '劑型',

dataIndex : 'jx',

width : 60

}, {

header : '產地',

dataIndex : 'cd',

width : 200

}, {

header : '醫院編碼',

dataIndex : 'yybm'

}, {

header : '更改時間',

dataIndex : 'ggsj'

}]);

/**

* 數據存儲

*/

var store = new Ext.data.Store({

// 獲取數據的方式

proxy : new Ext.data.HttpProxy({

url : 'gridDemo.do?reqCode=querySfxmDatas'

}),

// 數據讀取器

reader : new Ext.data.JsonReader({

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'

}])

});

/**

* 翻頁排序時候的參數傳遞

*/

// 翻頁排序時帶上查詢條件

store.on('beforeload', function() {

this.baseParams = {

xmmc : Ext.getCmp('xmmc').getValue()

};

});

// 每頁顯示條數下拉選擇框

var pagesize_combo = new Ext.form.ComboBox({

name : 'pagesize',

triggerAction : 'all',

mode : 'local',

store : new Ext.data.ArrayStore({

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_combo.getValue());

// 改變每頁顯示條數reload數據

pagesize_combo.on("select", function(comboBox) {

bbar.pageSize = parseInt(comboBox.getValue());

number = parseInt(comboBox.getValue());

store.reload({

params : {

start : 0,

limit : bbar.pageSize

}

});

});

// 分頁工具欄

var bbar = new Ext.PagingToolbar({

pageSize : number,

store : store,

displayInfo : true,

displayMsg : '顯示{0}條到{1}條,共{2}條',

plugins : new Ext.ux.ProgressBarPager(), // 分頁進度條

emptyMsg : "沒有符合條件的記錄",

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

});

// 表格工具欄

var tbar = new Ext.Toolbar({

items : [{

xtype : 'textfield',

id : 'xmmc',

name : 'xmmc',

emptyText : '請輸入項目名稱',

width : 150,

enableKeyEvents : true,

// 響應回車鍵

listeners : {

specialkey : function(field, e) {

if (e.getKey() == Ext.EventObject.ENTER) {

queryCatalogItem();

}

}

}

}, {

text : '查詢',

iconCls : 'page_findIcon',

handler : function() {

queryCatalogItem();

}

}, {

text : '刷新',

iconCls : 'page_refreshIcon',

handler : function() {

store.reload();

}

},'->' ,{

text : '重設列標題',

iconCls : 'acceptIcon',

handler : function() {

cm.setColumnHeader('2','開天闢地');

}

}, {

text : '重設分組列標題',

iconCls : 'acceptIcon',

handler : function() {

Ext.getDom('group_dw').innerHTML = '開天闢地';

}

}]

});

// 表格實例

var grid = new Ext.grid.GridPanel({

// 表格面板標題,默認為粗體，我不喜歡粗體，這里設置樣式將其格式為正常字體

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 : '正在載入表格數據,請稍等...'

}

});

// 頁面初始自動查詢數據

// store.load({params : {start : 0,limit : bbar.pageSize}});

// 布局模型

var viewport = new Ext.Viewport({

layout : 'border',

items : [grid]

});

// 查詢表格數據

function queryCatalogItem() {

store.load({

params : {

start : 0,

limit : bbar.pageSize,

xmmc : Ext.getCmp('xmmc').getValue()

}

});

}

});

⑤ extjs grid 怎樣合並單元格

具體步驟如下：
/*
這個方法四個參數分別是
row:合並起始行
col:合並起始列.這兩個參數是為了定位,要從哪個單元格開始合並.
type:是要合並行或者列.
num:是要合並的數量

//==>監聽load , 執行合並單元格
grid.getStore().on('load', function () {
span(grid, 0, 0, 'row', 5);
});
*/
var span = function (grid, row, col, type, num) {
switch (type) {
case 'row':
tds = Ext.get(grid.view.getNode(row)).query('td');
Ext.get(tds[col]).set({ rowspan: num });
Ext.get(Ext.get(tds[col])).setStyle({ 'vertical-align': 'middle' });
for (i = row + 1; i < row + num; i++) {
Ext.get(Ext.get(grid.view.getNode(i)).query('td')[col]).destroy();
}
break;
case 'col':
tds = Ext.get(grid.view.lockedView.getNode(row)).query('td');
Ext.get(tds[col]).set({ colspan: num });
break;
}
};

⑥ ExtJs中gridpanel表頭加復選框。數據列中已是復選框，可表頭卻沒有復選框

定義一個CheckboxSelectionModel啊~內~容~
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([sm,{.....}]);
var grid=new Ext.grid.GridPanel({
sm:sm,
cm : cm,
store:store,
.......