jQuery EasyUI使用教程之创建一个属性网格

<jQuery EasyUI最新试用版免费下载>

属性网格带有一个内置的expand（展开）/collapse（合并）按钮，可以简单地为行分组。您可以简单地创建一个可编辑属性的分层列表。

设置HTML

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

准备json数据

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

[ { "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的教程！