项目简介
这是一个基于jQuery的无限级树型结构选择插件,可用于处理如国家、省、市、区、县级市、村、街道等无限级分类的选择场景,也适用于B2B网站的无限极分类。该插件支持本地数据和异步获取数据,具备灵活的数据格式与丰富的配置选项。
项目的主要特性和功能
- 无限级树型结构选择:能够处理任意层级的树型结构数据,实现无限级分类选择。
- 数据支持方式多样:既可以处理本地静态数据,也能从服务器异步获取数据。
- 丰富配置选项:提供一系列配置选项,涵盖数据提供方式、选中的值、页面初始化时选中的值等,便于根据实际需求配置。
- 易于使用和集成:有详细文档和示例,方便用户快速上手并集成到项目中。
安装使用步骤
前提条件
假设用户已经下载了本项目的源码文件。
具体步骤
- 引入依赖文件:在项目中引入jQuery库(版本需1.7以上)和levelSelector插件的JS文件。 ```html
2. 准备数据:按照插件要求准备树型结构数据。
javascript
var data = {
id_0: [{ Id: 1, Name: '服装' }, { Id: 2, Name: '鞋包' }],
id_1: [{ Id: 3, Name: '男装' }, { Id: 4, Name: '女装' }],
id_2: [{ Id: 5, Name: '男鞋' }, { Id: 6, Name: '女鞋' }, { Id: 7, Name: '箱包' }],
id_3: [{ Id: 8, Name: '男式上装' }, { Id: 9, Name: '男式裤子' }],
id_4: [{ Id: 7, Name: '女式裙子' }, { Id: 8, Name: '女式裤子' }]
}
3. 调用插件:在页面中调用levelSelector插件,传入必要的配置参数。
html
``` 4. 查看效果:在浏览器中查看选择插件的效果,并进行必要的调试和调整。
其他安装方式
使用bower安装:
sh
bower install levelSelector
参数说明
插件提供丰富配置参数,默认参数如下:
javascript
{
url: "/levelSelector/list",
handel: function (v) {
return "<option value=" + v.Id + ">" + v.Name + "</option>";
},
path: 0,
sChar: ',',
change: function (arrays) { return arrays; },
create: function () {
return $("<select>");
},
filter: function (arrays) {
return arrays;
},
param: function (arrays) {
return { ids: arrays.join(defaults.sChar) };
},
provider: function (arrays, callback) {
$.ajax(defaults.url, {
type: 'GET',
dataType: "json",
cache: true,
data: defaults.param(arrays || [0]),
success: callback
});
},
defOption: '请选择..'
}
注意事项
- 插件依赖于jQuery库,请确保在项目中使用合适的jQuery版本。
- 插件的数据格式有一定要求,请按照要求准备数据。
- 使用插件时,请仔细阅读文档和示例,以便更好地理解和使用插件功能。
Release History
2016年1月30日 0.1.0 Release
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】