folderselect.js是一款仿windows资源管理器风格的jQuery复选框美化插件。它能够以文件夹的形式来显示分层的数据结构,它还支持AJAX数据调用,事件回调,数据头等。
使用方法
初始化插件
可以通过下面的方法来初始化该美化复选框插件。
$("#element").folderselect({ data: my_json_hierarchical_data, headers: [], url: false, icon_item: "item.png", icon_folder: "folder.png", icon_home: "home.png", spinner_gif: "ajax-loader.gif", item_selected_callback: function(item) {}, item_removed_callback: function(item) {}, folder_entered_callback: function(folder) {} });
获取被选择的项
你可以在初始化jQuery对象上调用folderselect('selected')
方法来获取被选择的复选框元素。你所得到的数据和你在初始化的时候放入的数据是相同的。
var selected_items = $("#element").folderselect('selected');
配置参数
除了data
参数,所有的其他参数都是可选的。
-
headers
:该字符串数组将转换为每个文件夹的headers。 -
url
:如果用户尝试打开一个空的文件夹(content = []
),将使用该URL发送一个POST请求来获取文件夹的内容。 -
icon_folder / icon_item / icon_home
:不同图标的URL地址。 -
item_selected_callback
:当某项被选择时调用。 -
item_removed_callback
:当某项取消选择时被调用。 -
folder_entered_callback
:当文件夹打开时被调用。 -
data
:参考下面。
DATA参数
data参数是一个包含分层数据的json对象。它可能只是一个基本的树结构,然后在用户点击的时候通过ajax来调用子节点的数据。
data参数包含2种类型的对象:items和folders。它们有相同点和不同点。
适用于Folder和item
-
type
:可取值为'folder'或'item'。 -
icon
:使用的item/folder图标的URL地址。 -
cells
:字符串数组。第一个字符串标识folder/icon的名称。如果使用headers,cells的数量将等于headers的数量。 -
payload
:一个任意的json对象。
仅适用于Folder
-
content
:在该文件夹中可以找到的item/folder对象数组。 -
headers
:在文件夹中显示的Headers的数组。 -
openable
:设置为true
是文件夹可以打开,false
则不能。如果一个ajax请求为一个文件夹得到了空的数据,那么它就会被设置为false
。 -
open
:如果设置为true
,则文件夹默认打开。默认只有一个文件夹是打开的。
仅适用于Item
-
selectable
:如果设置为true
,则item可以被选择。 -
selected
:如果设置为true
,则item默认被选择。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!