第三十八天 Java基础学习(三十二)

一、基于bootstrup的jQuery多级列表

●节点属性

•下面的参数可用于树节点的属性定义

text           String(必选项)       列表树节点上的文本，通常是节点右边的小图标。

icon           String(时选项)       列表树节点上的图标，通常是节点左边的图标。

selectedlcon     String(可选项)      当某个节点被选择后显示的图标，通常是节点左边的图标。

href           String(可选项)        结合全局enableLinks选项为列表树节点指定URL。

selectable       Boolean. Default: true        指定列表树的节点是否可选择。设置为false将使节点展开，并且不能被选择。

state         Object(可选项)          一个节点的初始状态。

state.checked       Boolean，默认值false      指示一个节点是否处于checked状态，用一个checkbox图标表示。

state.disabled       Boolean，默认值false      指示一个节点是否处于disabled状态。 (不是selectable，expandable或checkable)

state.expanded       Boolean，默认值false     指示一个节点是否处于展开状态。

state.selected        Boolean，默认值false      指示一个节点是否可以被选择。

color               String. Optional         节点的前景色，覆盖全局的前景色选项。

backColor         String. Optional        节点的背景色，覆盖全局的背景色选项。

tags          Array of Strings. Optional      通过结合全局showTags选项来在列表树节点的右边添加额外的信息。

 

●可用方法

•通过两种方式来调用方法：

1、插件包装器：插件的包装器可以作为访问底层方法的代理。

$( ftreel).treeview( 'methodName!，args)

多个参数必须使用数组对象来传入。

2、直接使用treeview：可以通过下面两种方法中的一种来获取treeview对象实例。

•该方法返回一个treevies的对象实例

$(l#tree’).treeview( true )

     .methodName(args);

•对象实例也保存在D0M元素的data中，

  可以使用‘treeview'的1d来访问它。

s( '#tree').data('treeview')

    . methodName(args);

●treevrew方法列表

• checkA11(options)：选择所有的节点。

触发 nodeChecked 事件，传入silent 来阻止其它事件。

•checkNode(node |rodeId, options)：选择指定的节点，接收节点或节点ID。

触发nodeChecked 事件，传入s1lent来阻止其它事件。

•clearSearch()：清空以前的搜索结果。例如清除它们的高亮状态。

触发searchcleared事件。

•collapseA11(options)：折叠所有的节点，折叠整个树。

触发 nodeCollapsed事件，传入silent来阻止其它事件。

•collapseNode(node | nodeId,options)：折叠指定节点和它的子节点。如果不想折叠子节点，可以设置{ignoreChildren: true}。

触发 nodeCollapsed 事件，传入silent 来阻止其它事件。

•disableA11(options)：禁用所有的节点。

触发nodeDisabled 事件，传入silent来阻止其它事件。

•disableNode node nodeId，options)：禁用指定的节点，接收节点或节点ID。

触发nodeDisabled事件，传入silent 来阻止其它事件。

•enableA11(options)：启用所有的节点。

触发 nodeEnabled 事件，传入silent来阻止其它事件。

•enableNode(node nodeId，options)：启用指定的节点，接收节点或节点ID。

触发 nodeExpanded事件，传入s1lent来阻止其它事件。

•expandNode(node nodeId，options)：展开指定的树节点，接收节点或节点ID。也可以展开任何给定级别的树节点。

触发 nodeExpanded事件，传入s11ent来阻止其它事件。

•getCollapsed()：返回折叠节点的数组。

•getDisabled()：返回被禁用节点的数组。

•getEnabled（）：返回可用节点的数组。

•getExpanded(）：返回所有展开节点的数组。

•getNode(nodetd)：返回给定节点ID的单一节点对象。

•getParent(node | nodeId)：返回给定节点的父节点，如果没有则返回undefined。

•getSelected（）：返回所有被选择节点的数组。

•getSiblings(node | nodeId)：返回给定节点的兄弟节点的数组，如果没有则返回undefined。

•getUnselected()：返回没有被选择节点的数组。

•remove()：移除列表树容器。移除附加的事件、附加对象和额外的html元素。

•revealNode(node nodeId，options)：显示一个树节点，展开从这个节点开始到根节点的所有节点。

触发 nodeExpanded 事件，传入silent 来阻止其它事件。

•search(pattern,options)：搜索匹配是非常的指定树节点，并高亮它们。返回配平节点的数组。

触发 searchcomplete事件。

•selectNode(node nodeId, options)：选择一个给定的树节点，接收节点或节点ID。

触发nodeSelected事件，传入silent来阻止其它事件。

•toggleNodeChecked(node nodeId，options)：切换节点的Check状态。

触发 nodeChecked 事件或nodeUnchecked事件，传入silent来阻止其它事件。

•toggleNodeDisabled(node nodeId,options)：切换一个节点的可用和不可用状态。

触发 nodeDisahled事件或 nodeFnahled事件 传入 silent 来阻止其它事件。

•uncheckA11(options)： Uncheck所有的节点。

触发 nodeUnchecked 事件，传入silent 来阻止其它事件。

• uncheckNode(node nodeId,options)：Uncheck一个给定的节点，接收节点或节点ID。

触发nodeUnchecked 事件，传入silent来阻止其它事件。

•unselectNode(node nodeId，options)：不选择指定的节点，接收节点或节点ID。

触发nodeUnselected事件，传入silent来阻止其它事件。

●事件

可以在参数中使用回调函数来绑定任何事件，或者使用标准的jQuery.on()方法来绑定事件。

●bTabs

bTabs是一款以多标签页加载页面的jquery Tabs插件。bTabs可以方便的和bootstrap2和bootstrap3集成使用，通过简单配置即可让页面变为Ext、EasyUI之类多标签页模式，丰富业务展示模式。

●bTabs插件的特点有：

•支持Bootstrap2、3的UI环境。

•以多标签页载入页面的功能插件，可让Bootstrap的UI界面变成类似EXT，ERsyUI之类的操作模式。

•多标签页之类都拥有独立的上下文，不会互相干扰。

•标签之间通过拖拽快速排列顺序。

•快速使用皮肤。在需要使用不同样式的皮肤时，只需要定义好皮肤的样式内容，插件可在初始化时，设置指定的皮肤名称

•严格遵守Bootstrap Tabs的HTML代码结构，可自动适应所有基于Bootstrap的皮肤样式。

•支持IE8+， chrome， firefox等主流浏览器。

●bTabs插件的主要使用场景有：

•需要将页面操作模式改造成使用标签页来载入页面的场景，例如后端管理平台的基础UI框架。

•数据内容较多，不同分类数据需要以多个标签页来展示，这些分类的内容都有独立页面的场景。

●bPage

•url     分页跳转URL

类型：string

默认值：无默认值，该参数为必填参数

使用方式：

http://xxx.com/load

在页面跳转模式下，url设置为目标跳转位置，插件会自动拼接分页参数及用户自定义参数；在异步模式下作为数据请求的目标位置，插件同样会自动拼接上参数

•pageSize     每页显示记录数

类型：number

默认值：10

使用方式：

    根据使用需要设置每页显示记录数，默认值为10

•pageNumber      当前页号

类型：number

默认值：1

使用方式：

  设置当前页号，默认值为1

•totalRow        总记录个数

类型：number

默认值：0

使用方式：

    设置数据的总记录个数，该参数仅在页面跳转模式下asyncLoas:false才需要显式设置

•totalPage总页数

类型：number

 默认值：1

使用方式：

    设置分页总页数，该参数仅在页面跳转模式下asyncLoas:false才需要显式设置

•callback 分页操作处理完成后的回调函数(异步)

类型：function

默认值：无

使用方式：

    该回调仅在异步模式中使用，在每次分页操作完成后执行

•params 传递参数

类型：object

默认值：无

使用方式：

     进行页面跳转或数据请求时需要传递给服务端的参数集

格式：{'name':'aa','sex':1}

例如：params: {'name':'aa','sex':1}

•pageBarsize显示页码个数，建议使用奇数

类型：number

默认值：5

使用方式：

    该参数用于设置分页播件显示的分页页码个数，意义在于页码数较多时，可指定分页栏中显示页码的个数

•pageSizeMenu每页显示记录数设置

类型：array

默认值：[10，28，50，100]

使用方式：

    设置快速改变每页显示记录数的选项，结果以下拉列表显示，用户通过选择下拉列表项可立即改变每页显示的记录数

•asyncLoad 异步处理分页

类型：boolean

默认值：false

使用方式：

   设置分页播件的分页模式

       页面跳转模式(false)

       异步请求页面模式(服务端页面)(true)

       异步请求数据模式(服务端]SON数据)(true)

•asyncTarget异步处理对象容器，支持使用jquery表达式

类型：string | object

默认值：无

使用方式：

    该参数在异步模式且 serverSidePage：true时使用，参数指定了服务端返回的页面内容放置的目标区域

    参数设置接受jquery表达式，也允许直接传递jQuery对象

•serversidePage 是否使用服务端返回页面的形式

类型：boolean

默认值：false

使用方式：

     播件的异步模式分为服务端返回页面模式(true)，及服务端返回数据(json)模式(false)

    注意： 服务端返回页面模式下，需要在返回的页面内容中增加分页数据元素，用于读取分页数据，若不设置该内容，插件则没有办法读取到分页信息，则在异步服务端页面模式下必须设置。

•className 为分页插件自定义样式

类型：string

默认值：无

使用方式：

    页面中需要设置不同的风格样式时，可以使用该参数指定需要使用的样式名称提示样式内容需要预先定义，插件本身仅为默认的样式

•render 异步数据模式自定义处理回调

类型：function

默认值：无

使用方式：

    ajax请求服务端并返回json数据后，可使用数据进行自定义页面渲染，该回调仅在serverSidePage：false时使用

•$.fn.bPageSwitch 切换当前页

类型：function

默认值：无

使用方式：

   该API函数提供在代码中手动切换插件当前分页的功能

•$.fn.bPageRefresh 刷新新页栏

类型：function

默认值：无

使用方式：

    该API方法可刷新插件的内部参数，并立即响应修改。