涓銆佷嬌鐢ㄥ満鏅?/p>
鏈嶅姟绔幏寰楃殑DataTable杞寲涓篔son鏍煎紡鍚庝紶閫掔粰瀹㈡埛绔痙ojo,dojo灝唈son鏁版嵁鐩存帴緇戝畾鍦╠ojox.grid.DataGrid涓?br />
浜屻佸熀鏈敤娉?/p>
1.瀹㈡埛绔〉闈ataToJson.aspx榪斿洖涓涓狫son鏁版嵁
private void Json()
{
DataTable dt = this.GetData();
string str = JsonHelper.DateTableToJson(dt);
Response.Write(str);
Response.End();
}
{
DataTable dt = this.GetData();
string str = JsonHelper.DateTableToJson(dt);
Response.Write(str);
Response.End();
}
dojox.grid.DataGrid鍑焏ojo.data.ItemFileWriteStore鍙互杞繪澗鍏鋒湁ajax鍔熻兘
浣跨敤dojo.grid.DataGrid棣栧厛鍋氬涓嬪噯澶囧伐浣?br />
a.寮曞叆鏍峰紡琛?/p>
<link rel="Stylesheet" href="dojo-re/dojox/grid/resources/soriaGrid.css" />
b.寮曞叆鎵闇搴?br />dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.Button");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.layout.FloatingPane");
c.緙栧啓浠ｇ爜<script type="text/javascript">
function Grid1() {
var data = new dojo.data.ItemFileWriteStore({
url: "DataToJson.aspx"
});
var structure = [
{ name: "鐢ㄦ埛鍚?, field: "userName", width: "120px" },
{ name: "瀵嗙爜", field: "userPwd", width: "120px" },
{ name: "鐢靛瓙閭歡", field: "email", width: "150px;" },
{ name: "鍗氬", field: "blog", width: "150px" },
{ name: "鐢熸棩", field: "birthday", width: "120px" },
{ name: "騫撮緞", field: "age", width: "80px" },
{ name: "澶囨敞", field: "description", width: "120px" }
];
var grid = new dojox.grid.DataGrid({
store: data,
structure:structure
},"grid1");
grid.startup();
}
function ShowFloatingPane() {
var floatingPane = dijit.byId("dFloatingPane");
floatingPane.show();
Grid1();
}
</script>
function Grid1() {
var data = new dojo.data.ItemFileWriteStore({
url: "DataToJson.aspx"
});
var structure = [
{ name: "鐢ㄦ埛鍚?, field: "userName", width: "120px" },
{ name: "瀵嗙爜", field: "userPwd", width: "120px" },
{ name: "鐢靛瓙閭歡", field: "email", width: "150px;" },
{ name: "鍗氬", field: "blog", width: "150px" },
{ name: "鐢熸棩", field: "birthday", width: "120px" },
{ name: "騫撮緞", field: "age", width: "80px" },
{ name: "澶囨敞", field: "description", width: "120px" }
];
var grid = new dojox.grid.DataGrid({
store: data,
structure:structure
},"grid1");
grid.startup();
}
function ShowFloatingPane() {
var floatingPane = dijit.byId("dFloatingPane");
floatingPane.show();
Grid1();
}
</script>
鎵闇HTML
<div >
<div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"
title="A floating pane" data-dojo-props="resizable:true, dockable:true, title:'A floating pane'"
style="position:absolute;top:150px;left:400px;width:600px;height:400px; visibility:hidden">
<div id="grid1" style="width:450px; height:350px"></div>
</div>
</div>
<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:ShowFloatingPane"></div>
<div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"
title="A floating pane" data-dojo-props="resizable:true, dockable:true, title:'A floating pane'"
style="position:absolute;top:150px;left:400px;width:600px;height:400px; visibility:hidden">
<div id="grid1" style="width:450px; height:350px"></div>
</div>
</div>
<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:ShowFloatingPane"></div>
d.榪愯緇撴灉濡備笅錛?/p>
涓夈佺戶緇畬鍠凞ataGrid鍔熻兘
1,澧炲姞鎼滅儲鏉′歡
query:{userName:"evilyang",id:"*"},
2,闅愯棌涓鍒楋紝涓嶆樉紺?/p>
{name:"瀵嗙爜",field:"userPwd",width:"100px",hidden:"true"}
3,涓烘煇涓鍒楀鍔犱竴涓牱寮忓悕
<style type="text/css">
.name{ font-style:italic; font-size:14px; color:Red;}
</style>
.name{ font-style:italic; font-size:14px; color:Red;}
</style>
{ name: "鐢ㄦ埛鍚?, field: "userName", width: "120px" ,classes:"name"}
4錛屼負鏌愪竴鍒楃洿鎺ュ鍔犱竴涓牱寮?div>{ name: "鐢靛瓙閭歡", field: "email", width: "150px;",styles:"text-align:center;" },var structure = [{
noscroll: true,
cells: [
{ name: "鐢ㄦ埛鍚?, field: "userName", width: "80px", classes: "name" },
{ name: "瀵嗙爜", field: "userPwd", width: "80px", hidden: "true" },
{ name: "鐢靛瓙閭歡", field: "email", width: "150px;", styles: "text-align:center;" }
]
}, {
cells: [
{ name: "鍗氬", field: "blog", width: "120px" },
{ name: "鐢熸棩", field: "birthday", width: "120px" },
{ name: "騫撮緞", field: "age", width: "50px" },
{ name: "澶囨敞", field: "description", width: "120px" }
]
}];
noscroll: true,
cells: [
{ name: "鐢ㄦ埛鍚?, field: "userName", width: "80px", classes: "name" },
{ name: "瀵嗙爜", field: "userPwd", width: "80px", hidden: "true" },
{ name: "鐢靛瓙閭歡", field: "email", width: "150px;", styles: "text-align:center;" }
]
}, {
cells: [
{ name: "鍗氬", field: "blog", width: "120px" },
{ name: "鐢熸棩", field: "birthday", width: "120px" },
{ name: "騫撮緞", field: "age", width: "50px" },
{ name: "澶囨敞", field: "description", width: "120px" }
]
}];
6,cell涓殑鏍峰紡璁劇疆榛樿妯″紡
defaultCell:{width:"80px",styles:"text-align:center;"},
榪欐牱璁劇疆瀹屽悗錛屾瘡涓鍒楃殑灞炴у氨涓嶅繀鍗曠嫭璁劇疆浜?p>7錛?鍏朵粬灞炴?br />selectionMode: "extended", //none,single,multiple
loadingMessage: "璇風瓑寰咃紝鏁版嵁姝ｅ湪鍔犺澆涓?.....",
errorMessage: "瀵逛笉璧鳳紝浣犵殑璇鋒眰鍙戠敓閿欒!",
columnReordering:true//姝ゅ睘鎬ц緗負true,鍙互鎷栨嫿鏍囬鏍忥紝鏇存崲鍒楅『搴?/div>
loadingMessage: "璇風瓑寰咃紝鏁版嵁姝ｅ湪鍔犺澆涓?.....",
errorMessage: "瀵逛笉璧鳳紝浣犵殑璇鋒眰鍙戠敓閿欒!",
columnReordering:true//姝ゅ睘鎬ц緗負true,鍙互鎷栨嫿鏍囬鏍忥紝鏇存崲鍒楅『搴?/div>
new dojox.grid.cells.RowIndex({ name: "緙栧彿", width: "20px" })//鍔犲叆鑷紪鍙?/p>
鍥涖佹暟鎹樉紺洪珮綰у姛鑳?/p>
1, RowClick浜嬩歡
grid.on("RowClick", function(evt) {
var idx = evt.rowIndex,
item = this.getItem(idx),
store = this.store;
content = dojo.byId("content");
content.innerHTML="you have clicked on rows " + store.getValue(item, "id");
銆銆銆銆銆銆銆銆銆銆}, true);
var idx = evt.rowIndex,
item = this.getItem(idx),
store = this.store;
content = dojo.byId("content");
content.innerHTML="you have clicked on rows " + store.getValue(item, "id");
銆銆銆銆銆銆銆銆銆銆}, true);
2,SelectionChanged浜嬩歡
grid.on("SelectionChanged",dojo.hitch(grid, reportSelection), true);
function reportSelection() {
var items = this.selection.getSelected(),
msg = "浣犻夋嫨浜嗕互涓嬫暟鎹?;
var tmp = dojo.map(items, function(item) {
return this.store.getValue(item, "id");
}, this);
var content = dojo.byId("content");
content.innerHTML = msg + tmp.join(",");
}
function reportSelection() {
var items = this.selection.getSelected(),
msg = "浣犻夋嫨浜嗕互涓嬫暟鎹?;
var tmp = dojo.map(items, function(item) {
return this.store.getValue(item, "id");
}, this);
var content = dojo.byId("content");
content.innerHTML = msg + tmp.join(",");
}
浜斻佹樉紺烘晥鏋滃涓嬪浘錛?/p>
]]>