⑴ excel外部導入數據
table導出excel文件 總的來說,兩種方法:伺服器端生成和瀏覽器端生成。
伺服器端生成就是:根據用戶請求,獲取相應的數據,使用poi/jxl, jacob/jawin+excel,或是用數據拼html的table或是cvs純文本的數據格式等。然後按.xls或是.cvs格式的文件的形式返回給用戶,指定Content-Type:application/vnd.ms-excel ,瀏覽器就會提示要下載的文件是excel文件。
poi/jxl, jacob/jawin生成的是excel的biff格式。html/csv的是文本格式,不另存為excel文件,很多excel功能是用不了的。jacob/jawin需要伺服器端是windows系統,且安裝了excel2000以上版本。poi/jxl和html/csv方式的話,伺服器端可以跨平台。
瀏覽器端生成excel文件還沒有特別完善的方案,這是因為js無法處理二進制。大概有以下幾個方案,各有利弊。
1. activex方式:使用js/vbs調用excel對象 (ie+excel)
2. ie命令方式:將html或是csv輸出到open的window,然後使用execCommand的saveas命令,存為csv或xls。 (ie only)
3. 伺服器端中轉方式:將html的table或是拼接的csv傳到伺服器端,伺服器端再按照Content-Type:application/vnd.ms-excel返回,瀏覽器就會按excel方式處理。與伺服器端拼接相比,少了一次取數操作。 (all)
4. data協議方式:對於支持data協議的瀏覽器,可以將html或是csv先用js base64處理,然後前綴data:application/vnd.ms-excel;base64,,即可使瀏覽器將其中的數據當做excel來處理,瀏覽器將提示下載或打開excel文件,可惜的是ie不支持。extjs的官網有一個grid的plugin,實現導出xhtml格式的偽excel文件,就是這么做的。 (except IE)
瀏覽器端只有第一種方案導出的是真正的biff格式的excel文件,其他方式都是文本格式。activex方式只能在windows平台的ie瀏覽器使用,而且需要降低ie的安全性,所以應用比較有限。復雜的excel文件,還是在伺服器端用poi/jxl生成excel比較好。如果瀏覽器固定位ie,瀏覽器端方式2是最好的方案。如果要降低伺服器端cpu的計算壓力,客戶端方案3可行,而且跨平台(比poi/jxl方式少了取數和生成二進制文件)。如果是非ie瀏覽器,方案4也不失為一種好方法。
⑵ extjs 表頭合並行
要看你使用的是哪個版本的ExtJs
1.如果是4.2版本的grid原生支持列header合並,合並只需在創建列模型時創建下級column就可以了。如
columns:[
{
dataIndex:'',
text:'name'
},{
dataIndex:'',
text:'ccc',
columns:[{
dataIndex:'',
text:'aaa
},{
dataIndex:'',
text:'bbb'
}]
}]
2.如果是3.x系列版本,使用擴展插件,請參照examplesux實例,導入提供的examplesuxColumnHeaderGroup.js和.css,在創建時以plugin的方式插入,請參考示例代碼
⑶ ExtJS 4.2 Ext.grid.Panel 如何把plugins 的編輯模式取消
你可以給GRID加編輯前的監聽事件beforeedit.
當beforeedit返回false是就是取消編輯了.
beforeedit: function(editor,e){
//可以在這個方法裡面做判斷
//返回true就是可以進行編輯,false就是拒絕進行編輯
var data = editor.record.data;
if(data.xxx = ''){
return false;
}
else{
return true;
}
}
⑷ 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的Ext.grid.GridPanel組件進行行編輯或單元格編輯之後如何將修改之後的數據及時的更新到資料庫
Ext.grid.plugin.CellEditing
Ext.grid.plugin.RowEditing
你用的應該是以上兩種
你可以用canceledit事件做提交後台,總是方式回很多
然後答grid.getStore().reload();刷新
⑹ extjs的gridpanel控制項加入插件Ext.grid.RowExpander後,viewconfig中的getRowClass失效的問題
plugins:[Ext.grid.RowExpander]可以這樣子寫??為什麼我看到的grid添加plugin都是類似這樣的
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
⑺ Extjs 中的datefield 怎麼設置只顯示年月
{
xtype:"datefield",
name:"date",
fieldLabel:"日期",
editable:true,
emptyText:"--請選擇--",
format:"Y-m",//這塊就是年月
width:180
}
format參數就是定義年月日的參數,按照自己的需求定義就好,你的是年月所以只需要寫
format:"Y-m"就可以了
⑻ ExtJs 如何禁用分頁控制項的刷新按鈕
bbar : new Ext.PagingToolbar({//分頁工具欄
store : storePoHeader,
//plugins : new Ext.ux.grid.PageSizePlugin(),
pageSize : 5,
displayInfo : true,
displayMsg : '第 {0} 條到 {1} 條,一共 {2} 條',
emptyMsg : "沒有內記容錄",
doReflash:function(){
return false;
}
}),