兩種方式使用Dojox.grid.DataGrid打賞

Dojo的widget機制設計的很不錯,默認提供了很多好用的widget,其中DataGrid就是最常用的一種,正常情況下,很多人會選擇使用聲明式的引入,就是在頁面上寫入任意html標簽,指定dojoType為Dojox.grid.DataGrid,當然,既然是widget,也就支持另外一種方式,也是我比較喜歡用的方式,即編程式引入。

第一種

先通過引入dojo.data.ItemFileWriteStore,構建test_store,簡單的理解,即數據源,對應DataGrid的store。dojo的dojo.data.ItemFileWriteStore可以方便的使用ajax請求的相應數據。下面是示例代碼:

dojo.require("dojo.data.ItemFileWriteStore");
(function(){
	// some sample data
	// global var "data"
	data = {
		identifier: 'id',
		label: 'id',
		items: []
	};
	data_list = [
		{ col1: "normal", col2: false, col3: "new", col4: 'But are not followed by two hexadecimal', col5: 29.91, col6: 10, col7: false },
		{ col1: "important", col2: false, col3: "new", col4: 'Because a % sign always indicates', col5: 9.33, col6: -5, col7: false },
		{ col1: "important", col2: false, col3: "read", col4: 'Signs can be selectively', col5: 19.34, col6: 0, col7: true },
		{ col1: "note", col2: false, col3: "read", col4: 'However the reserved characters', col5: 15.63, col6: 0, col7: true },
		{ col1: "normal", col2: false, col3: "replied", col4: 'It is therefore necessary', col5: 24.22, col6: 5.50, col7: true },
		{ col1: "important", col2: false, col3: "replied", col4: 'To problems of corruption by', col5: 9.12, col6: -3, col7: true },
		{ col1: "note", col2: false, col3: "replied", col4: 'Which would simply be awkward in', col5: 12.15, col6: -4, col7: false }
	];
	var rows = 100;
	for(var i=0, l=data_list.length; i

之后聲明一個structure,其實就是知道數據的顯示格式。下面是示例代碼:

var layout = [[
	new dojox.grid.cells.RowIndex({ width: 5 }),
	{name: 'Column 1', field: 'col1'},
	{name: 'Column 2', field: 'col2'},
	{name: 'Column 3', field: 'col3'},
	{name: 'Column 4', field: 'col4', width: "150px"},
	{name: 'Column 5', field: 'col5'}
	],[
	{name: 'Column 6', field: 'col6', colSpan: 2},
	{name: 'Column 7', field: 'col7'},
	{name: 'Column 8'},
	{name: 'Column 9', field: 'col3', colSpan: 2}
]];

到這里準備工作基本上就做完了。其實這些數據在實際應用中完全可以再服務器端直接生成后返回,本例只用作介紹,故寫了出來。
下面就是使用了,首先引入需要的js和css:
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad: true"></script>
js腳本注意使用parseOnLoad: true,這樣dojo才能在加載時候將聲明式的標簽轉換為最終顯示元素。

@import "../resources/Grid.css";
@import "../resources/tundraGrid.css";
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/tundra/tundra.css";

注意相對路徑,也可以使用自定義的樣式,當然,要對生成的標簽中所使用的Class名十分熟悉。

<div jsId="grid" id="grid" dojoType="dojox.grid.DataGrid" store="test_store" query="{ id: '*' }" structure="layout" rowSelector="20px"></div>

最后就是使用了,在body里面加入一個div,dojoType="dojox.grid.DataGrid",stort、structure分別為上面準備的數據。保存頁面,加載后即可看到最基礎的dojox.grid.DataGrid。

第二種

這種方式比較適合全ajax的加載,這種情況就不能使用parseOnLoad: true來使標簽在加載時被解析了,所以,我們可以使用new的方式新建widget對象,即dojox.grid.DataGrid。

具體數據還使用上面聲明的,使用格式如下:

var grid = new dojox.grid.DataGrid({store:test_store,structure:layout},"grid1");
grid.startup();

這樣,就簡單的以編程的方式將new出來的widget放到id為grid1的html元素中了,與聲明式不同的是,這里的grid1可以是在new dojox.grid.DataGrid之前動態創建的,而不是必須在頁面中添加的html元素。

其實dojo的DataGrid是很強大的,很多可擴展功能,在這里僅僅為了介紹其使用方法,因為網上鋪天蓋地的文章都是聲明式的,我之前在使用到編程式引入的時候走了很多彎路,最后才發現最基礎的DataGrid根本不需要那么多東西,所以分享出來給和我一樣新接觸dojo的朋友一個參考。當然了,dojo的DataGrid還有更多其它類型的擴展,大家可以花費點時間看一下官網的例子,具體的擴展功能小子還在學習中,就不寫出來了。大家有興趣可以自己去研究一下。2013年第一篇文章,沒什么寫的,就隨便整理了這篇算是學習筆記的文字了,新手入門,大家勿見笑。

兩種方式使用Dojox.grid.DataGrid
文章《兩種方式使用Dojox.grid.DataGrid》二維碼
  • 微信打賞
  • 支付寶打賞

已有14條評論

  1. nfl jersey

    強。。我學計算機硬是沒看懂

    2013-04-27 14:22 回復
  2. 東森平臺

    向博主 學習啦!!!

    2013-01-23 22:49 回復
  3. 藏章博客

    好久沒來博主博客了,就來看看!~大家 相互訪問

    2013-01-23 15:29 回復
  4. www.36400.com

    老夫以后會常來學習

    2013-01-18 18:57 回復
  5. 臨海家政

    來學習看,呵呵不錯哦

    2013-01-18 14:42 回復
  6. 義烏廣告公司

    dojo很強大,不過一直沒有掌握好

    2013-01-17 09:24 回復
  7. 潤初顏

    樸人兄是新手入門,偶是未入門~~~

    2013-01-15 08:36 回復
  8. 藏章博客

    好久沒去學習js了!~現在都是在ebs

    2013-01-14 21:35 回復
    • 樸人博客

      這是dojo。用的人很少,不會正常,呵呵。

      2013-01-14 21:45 回復
      • 藏章博客

        也是,jquery 倒是用過

        2013-01-14 21:51 回復
        • 樸人博客

          你的評論終于正常了,之前一直是進垃圾評論,今天發現不用手動拉出來了。

          2013-01-14 22:40 回復
  9. 籃球比分

    看不懂的代碼

    2013-01-14 13:08 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖