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