|
|
本文將著重講述如何用wcf+extjs+linq打造一個支持排序和列刷選的grid。閑話少敘 ，下面是操作步驟和實現(xiàn)效果圖
第一步：在vs2008中創(chuàng)建一個支持.NET framework 3.5的網(wǎng)站，此處之所以強(qiáng)調(diào)支持.NET framework 3.5是為了使用linq
第二步：將運(yùn)行時需要的Extjs的資源文件拷貝到項目目錄，具體可見示例項目
第三步：假設(shè)在本機(jī)sql2005中存在數(shù)據(jù)庫sharelist，里面有一個數(shù)據(jù)表stocks，效果如下：
數(shù)據(jù)庫文件sharelist.mdf在示例項目db文件夾中。如果需要測試，可以將其附加到自己的sql2005數(shù)據(jù)庫服務(wù)器中。
在網(wǎng)站項目中創(chuàng)建一個Linq To Sql類：DataClasses.dbml，方法如下如所示：
點(diǎn)擊添加之后，出現(xiàn)下面的Linq To Sql向?qū)?
ExtJs與Wcf交互生成grid的腳本代碼 
// example of custom renderer function 
function pctChange(val){ if(val > 0){ return '' + val + '%'; }else if(val < 0){ return '' + val + '%'; 
} return val; } var proxy=new Ext.data.HttpProxy( {url:'ArrayGridService.svc/GetStocks'}); // create the data store var store = new Ext.data.SimpleStore({ fields: [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} ] }); //定義reader var reader=new Ext.data.JsonReader( { },[ {name: 'company'}, {name: 'price'}, {name: 'change'}, {name: 'pctChange',mapping:'changepercent'}, {name: 'lastChange',mapping:'lastupdated'} ] ) //構(gòu)建Store var store=new Ext.data.Store( { proxy:proxy, reader:reader }); //載入 store.load(); // create the Grid var grid = new Ext.grid.GridPanel({ store: store, columns: [ {id:'company',header: "公司", width: 160, sortable: true, dataIndex: 'company'}, {header: "單價", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'}, {header: "變動", width: 75, sortable: true, renderer: change, dataIndex: 'change'}, {header: "變動百分比", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'}, {header: "最后更新", width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('Y年m月d日'), dataIndex: 'lastChange'} ], stripeRows: true, autoExpandColumn: 'company', height:350, width:600, title:'股市行情', viewConfig: { columnsText:'列', sortAscText:'升序', sortDescText:'降序' } }); grid.render('grid-example'); grid.getSelectionModel().selectFirstRow(); 
}); 
NET技術(shù)：用ExtJs+Linq+Wcf打造簡單grid，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
