jQuery EasyUI使用教程之建立一個屬性網格

<jQuery EasyUI最新試用版免費下載>

屬性網格帶有一個內置的expand（展開）/collapse（合併）按鈕，能夠簡單地爲行分組。您能夠簡單地建立一個可編輯屬性的分層列表。

設置HTML

<table id="tt" class="easyui-propertygrid" style="width:300px" url="propertygrid_data.json" showgroup="true" scrollbarsize="0"></table>

準備json數據

[

{ "name" : "Name" , "value" : "Bill Smith" , "group" : "ID Settings" , "editor" : "text" },

{ "name" : "Address" , "value" : "" , "group" : "ID Settings" , "editor" : "text" },

{ "name" : "Age" , "value" : "40" , "group" : "ID Settings" , "editor" : "numberbox" },

{ "name" : "Birthday" , "value" : "01/02/2012" , "group" : "ID Settings" , "editor" : "datebox" },

{ "name" : "SSN" , "value" : "123-456-7890" , "group" : "ID Settings" , "editor" : "text" },

{ "name" : "Email" , "value" : "bill@gmail.com" , "group" : "Marketing Settings" , "editor" :{

"type" : "validatebox" ,

"options" :{

"validType" : "email"

}

}},

{ "name" : "FrequentBuyer" , "value" : "false" , "group" : "Marketing Settings" , "editor" :{

"type" : "checkbox" ,

"options" :{

"on" : true ,

"off" : false

}

}}

]

正如您所看到的，屬性網格的建立不須要任何的javascript代碼。您能夠簡單地繼承擴展editor類型。

下載EasyUI示例：easyui-datagrid-demo.zip

有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的教程！