带有过滤功能的复选框列表 jQuery 组件

• 下载源代码 - 140.8 KB

引言

在过去的美好时光里，我们曾在桌面应用程序中使用过 `checkbox`-list 控件。这是一个轻量级的 `checkbox` 列表控件的 jQuery UI 组件实现。

背景

首先，我们需要用数据填充 `listbox`。我使用了一个硬编码的 JSON 数据模型。每个项目都有一个 `text` 属性和一个 `value` 属性。

var dataModel = [
      {text: 'checkbox-1 caption', value:'1'}
]; 

并且返回的选择数据也使用相同的数据模型。

Using the Code

checkList 组件可以很容易地应用于一个 `div` 元素。

<div id='myCheckList'></div> 

$('myCheckList').checkList({
      listItems: dataModel,
      onChange: selChange
});   

我们可以在创建时通过传递 `listItems` 参数来设置 `listbox` 项目，或者在组件创建后通过调用 `setData` 方法手动设置数据模型。 另外，如你所见，我们有一个 `onChange` 事件。每当任何项目的选中状态发生变化时，都会触发该事件。 在演示应用程序中，我使用此事件来显示所选元素。

我们可以通过调用 `getSelection` 方法简单地获取所选元素。 这将返回我们用于设置 `listbox` 项目的相同数据模型。

function selChange(){ 
      var selection = $('#myCheckList').checkList('getSelection'); 
      $('#selectedItems').text(JSON.stringify(selection)); 
}     

过滤

过滤功能无需任何 Ajax 调用即可实现。很简单，我们检查 `listbox` 中的每个 `listitem` 是否包含过滤 `string`。 然后我们显示匹配的项目并隐藏不匹配的项目。 在显示和隐藏 `listbox` 项目时，我们可以应用一些 jQuery 效果。 默认效果在选项中定义为闪烁。

玩得开心。