自己写的EXTJS-增强控件TableGrid
自己写的EXTJS 增强控件TableGrid自己写的EXTJS 增强控件TableGrid
自己写的一个EXTJS增强控件，实现将普通的Table或https://www.360docs.net/doc/681366026.html,的GridView控件转换为EXTJS的GridPanel功能.
Ext.TableGrid.js文件内容
/ *
程序:李君 hahaman
QQ:lj7788@https://www.360docs.net/doc/681366026.html,
功能:
1.普通Table转换为ExtJS 的GridPanel
表格式
<table id="tb" width="400">
<thead>
<th>表头</th>
...
</thead>
<tbody>
<tr>
<td></td>
....
</tr>
....
</tbody>
</table>
Ext.onReady(function() {
var grid = new Ext.grid.TableGrid("the-table",{remove:false});
});
2.完成https://www.360docs.net/doc/681366026.html,的GridView控件转化为ExtJS 的GridPanel功能
使用方法:
Ext.onReady(function() {
var grid = new Ext.grid.TableGrid("GridView1",{remove:false,netGrid:true});
});
"GridView1":https://www.360docs.net/doc/681366026.html, GridView控件的名称
netGrid:true .NET必须
* /
Ext.grid.TableGrid = function(table,config){
config = config || {};
var cf = config.fields || [], ch = config.columns || [];
table = Ext.get(table);
var ct = table.insertSibling();
var fields = [], cols = [];
var headers = table.query("th");
for (var i = 0, h; h = headers[i]; i++) {
var text = h.innerHTML;
var name = 'tcol-'+i;
fields.push(Ext.applyIf(cf[i] || {}, {
name: name,
mapping: 'td:nth('+(i+1)+')/@innerHTML'
}));
cols.push(Ext.applyIf(ch[i] || {}, {
'header': text,
'dataIndex': name,
'width': h.offsetWidth,
'tooltip': h.title,
'sortable': true
}));
}
var ds = new Ext.data.Store({
reader: new Ext.data.XmlReader({
record:'tbody tr'
}, fields)
});
ds.loadData(table.dom);
var cm = new Ext.grid.ColumnModel(cols);
if(config.width || config.height){
ct.setSize(config.width || 'auto', config.height || 'auto');
}
if(config.remove !== false){
table.remove();
}
var width,height;
height=table.dom.offsetHeight+25;
width=table.dom.offsetWidth+23;
var div="<div id='"+table+"'></div>";//创建一个新的层用于显示GridPanel
var el=Ext.getBody().createChild({tag:'div',id:table.id});
table.replace(el);
if(https://www.360docs.net/doc/681366026.html,Grid){
ds.data.removeAt(0);
}
var g=new Ext.grid.GridPanel({
store:ds,
cm:cm,
renderTo:table.id,
sm: new Ext.grid.RowSelectionModel(),
height:height,
width:width
});
};
测试一： Default.aspx
<%@ Page Language="C#" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html>
<head id="Head1" runat="server">
<title>无标题页</title>
<link href="resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" s
rc="js/ext-all.js"></script>
<script src="js/Ext.TableGrid.js">
<script src="js/ext-lang-zh_CN.js"></script>
<script>
Ext.onReady(function() {
var grid = new Ext.grid.TableGrid("tb1",{remove:false});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table cellspacing="0" id="tb1" width="400">
<thead>
<tr style="background:#eeeeee;">
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>Barney Rubble</td>
<td>32</td>
<td>Male</td>
</tr>
<tr>
<td>Fred Flintstone</td>
<td>33</td>
<td>Male</td>
</tr>
<tr>
<td>Betty Rubble</td>
<td>32</td>
<td>Female</td>
</tr>
<tr>
<td>Pebbles</td>
<td>1</td>
<td>Female</td>
</tr>
<tr>
<td>Bamm Bamm</td>
<td>2</td>
<td>Male</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
效果:
测试二:default2.aspx 数据使用SQL2000 Pubs库 JObs表
<%@ Page Language="C#" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.360docs.net/doc/681366026.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.360docs.net/doc/681366026.html,/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<link href="resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="resources/css/xtheme-gray.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all-debug.js"></script>
<script src="js/Ext.TableGrid.js">
<script src="js/ext-lang-zh_CN.js"></script>
<script>
Ext.onReady(function() {
var grid = new Ext.grid.TableGrid("GridView1",{remove:false,netGrid:true});
});
function changeSkin(sel){
var skin=sel.options[sel.selectedIndex].value;
if(skin.length==0)
document.styleSheets[1].href='';
else
document.styleSheets[1].href='resources/css/'+skin;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" Width="500">
</asp:GridView>
<div style="position:absolute;top:0px;right:0%">皮肤:
<select onchange="
;changeSkin(this);">
<option value='xtheme-visita.css'>默认</option>
<option value='xtheme-gray.css'>gray</option>
<option value='xtheme-black.css'>black</option>
<option value='xtheme-darkgray.css'>darkgray</option>
<option value='xtheme-galdaka.css'>galdaka</option>
<option value='xtheme-olive.css'>olive</option>
<option value='xtheme-purple.css'>purple</option>
<option value='xtheme-slate.css'>slate</option>
<option value='xtheme-slickness.css'>slickness</option>
</select>
</div>
</form>
</body>
</html>
效果:
欢迎大家交流!!