新建
This commit is contained in:
14
public/assets/libs/fastadmin-cxselect/.bower.json
Normal file
14
public/assets/libs/fastadmin-cxselect/.bower.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"name": "fastadmin-cxselect",
|
||||
"homepage": "https://github.com/karsonzhang/fastadmin-cxselect",
|
||||
"version": "1.4.1",
|
||||
"_release": "1.4.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.4.1",
|
||||
"commit": "ec3b35ea0611024781630661356e19c71e6e2c88"
|
||||
},
|
||||
"_source": "https://github.com/karsonzhang/fastadmin-cxselect.git",
|
||||
"_target": "~1.4.0",
|
||||
"_originalSource": "fastadmin-cxselect"
|
||||
}
|
||||
167
public/assets/libs/fastadmin-cxselect/README.md
Normal file
167
public/assets/libs/fastadmin-cxselect/README.md
Normal file
@@ -0,0 +1,167 @@
|
||||
# jQuery cxSelect
|
||||
|
||||
cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市、商品分类等联动菜单。
|
||||
|
||||
列表数据通过 AJAX 获取,也可以自定义,数据内容使用 JSON 格式。
|
||||
|
||||
同时兼容 Zepto,方便在移动端使用。
|
||||
|
||||
国内省市县数据来源:[basecss/cityData](https://github.com/basecss/cityData) Date: 2014.03.31
|
||||
|
||||
全球主要城市数据来源:整理国内常用网站和软件 Date: 2014.07.29
|
||||
|
||||
**版本:**
|
||||
|
||||
* jQuery v1.7+ | Zepto v1.0+
|
||||
* jQuery cxSelect v1.4.0
|
||||
|
||||
文档:http://code.ciaoca.com/jquery/cxselect/
|
||||
|
||||
示例:http://code.ciaoca.com/jquery/cxselect/demo/
|
||||
|
||||
## 使用方法
|
||||
### 载入 JavaScript 文件
|
||||
```html
|
||||
<script src="jquery.js"></script>
|
||||
<script src="jquery.cxselect.js"></script>
|
||||
```
|
||||
|
||||
### DOM 结构
|
||||
```html
|
||||
<!--
|
||||
select 必须放在元素 id="element_id" 的内部,不限层级
|
||||
select 的 class 任意取值,也可以附加多个 class,如 class="province otherclass",在调用时只需要输入其中一个即可,但是不能重复
|
||||
-->
|
||||
<div id="element_id">
|
||||
<select class="province"></select>
|
||||
<select class="city"></select>
|
||||
<select class="area"></select>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 设置默认值
|
||||
```html
|
||||
<!--
|
||||
方法一:使用 option 的 value 和 selected 属性
|
||||
-->
|
||||
<select class="province">
|
||||
<option value="浙江省" selected>浙江省</option>
|
||||
</select>
|
||||
|
||||
<!--
|
||||
方法二:使用 select 的 data-value 属性
|
||||
当同时设置 option 的 value 和 select 的 data-value 时,优先使用 data-value 的值
|
||||
-->
|
||||
<select class="province" data-value="浙江省"></select>
|
||||
```
|
||||
|
||||
### 调用 cxSelect
|
||||
``` javascript
|
||||
$('#element_id').cxSelect({
|
||||
url: 'cityData.min.json' // 提示:如果服务器不支持 .json 类型文件,请将文件改为 .js 文件
|
||||
selects: ['province', 'city', 'area'], // selects 为数组形式,请注意顺序
|
||||
emptyStyle: 'none'
|
||||
});
|
||||
```
|
||||
|
||||
### 设置参数全局默认值
|
||||
``` javascript
|
||||
// 需在引入 <script src="jquery.cxselect.js"></script> 之后,调用之前设置
|
||||
$.cxSelect.defaults.url = 'cityData.min.json';
|
||||
$.cxSelect.defaults.emptyStyle = 'none';
|
||||
```
|
||||
|
||||
### API 接口
|
||||
``` javascript
|
||||
var cxSelectApi;
|
||||
|
||||
// 方法一:
|
||||
cxSelectApi = $.cxSelect($('#element_id'), {
|
||||
selects: ['province', 'city', 'area']
|
||||
});
|
||||
|
||||
// 方法二:
|
||||
$('#element_id').cxSelect({
|
||||
selects: ['province', 'city', 'area']
|
||||
}, function(api) {
|
||||
cxSelectApi = api;
|
||||
});
|
||||
|
||||
cxSelectApi.attach();
|
||||
cxSelectApi.detach();
|
||||
cxSelectApi.clear();
|
||||
cxSelectApi.setOptions();
|
||||
```
|
||||
|
||||
## 参数说明
|
||||
名称|默认值|说明
|
||||
---|---|---
|
||||
selects|[]|下拉选框组。<br>输入 select 的 className
|
||||
url|null|整合数据接口地址(URL);<br>每个选框的内容使用各自的接口地址,详见 [DEMO](http://code.ciaoca.com/jquery/cxselect/demo/oneself.html)
|
||||
data|null|自定义数据,类型为数组,使用 JSON 格式。[DEMO](http://code.ciaoca.com/jquery/cxselect/demo/custom.html)
|
||||
emptyStyle|null|子集无数据时 select 元素的显示状态。<br>可设置为:**"none"**(display:none), **"hidden"**(visibility:hidden)
|
||||
required|false|是否为必选。<br>设为 `false` 时,会在列表头部添加 `<option value="firstValue">firstTitle</option>` 选项。
|
||||
firstTitle|'请选择'|选框第一个项目的标题(仅在 `required` 为 `false` 时有效)
|
||||
firstValue|''|选框第一个项目的值(仅在 `required` 为 `false` 时有效)
|
||||
jsonSpace|''|数据命名空间
|
||||
jsonName|'n'|数据标题字段名称(用于 option 的标题)
|
||||
jsonValue|''|数据值字段名称(用于 option 的 value,没有值字段时使用标题作为 value)
|
||||
jsonSub|'s'|子集数据字段名称
|
||||
|
||||
|
||||
## data 属性参数
|
||||
### 父元素的 data- 属性
|
||||
```html
|
||||
<div id="element_id" data-url="cityData.min.json" data-required="true"></select>
|
||||
```
|
||||
|
||||
名称|说明
|
||||
---|---
|
||||
data-selects|下拉选框组。<br>输入 select 的 className,使用英文逗号分隔的字符串
|
||||
data-url|列表数据接口地址
|
||||
data-empty-style|子集无数据时 select 的显示状态
|
||||
data-required|是否为必选
|
||||
data-first-title|选框第一个项目的标题
|
||||
data-first-value|选框第一个项目的值
|
||||
data-json-space|数据命名空间
|
||||
data-json-name|数据标题字段名称
|
||||
data-json-value|数据值字段名称
|
||||
data-json-sub|子集数据字段名称
|
||||
|
||||
### select 元素的 data- 属性
|
||||
```html
|
||||
<select class="province" data-value="浙江省" data-first-title="选择省"></select>
|
||||
```
|
||||
|
||||
名称|说明
|
||||
---|---
|
||||
data-value|默认选中值
|
||||
data-url|列表数据接口地址
|
||||
data-required|是否为必选
|
||||
data-query-name|传递上一个选框值的参数名称(默认使用上一个选框的 name 属性值)
|
||||
data-first-title|选框第一个项目的标题
|
||||
data-first-value|选框第一个项目的值
|
||||
data-json-space|数据命名空间
|
||||
data-json-name|数据标题字段名称
|
||||
data-json-value|数据值字段名称
|
||||
|
||||
##API 接口
|
||||
|
||||
名称|说明
|
||||
---|---
|
||||
attach()|绑定。<br>调用时会自动进行绑定,用于使用detach解除绑定后,进行重新绑定。
|
||||
detach()|解除绑定。<br>解除绑定后,不再具有联动效果。
|
||||
clear(index)|清空选项。<br>清空第 index 个 select 自身及之后的 select 的选项。<br>`index`: select 的序号,从 0 开始
|
||||
setOptions(settings)|重新设置参数。<br>`settings`: 与调用时参数一致
|
||||
|
||||
##自定义数据及使用纯数组数据
|
||||
可以使用任何类型的数据作为值,但最终都会被转化为文本。
|
||||
|
||||
[自定义数据 DEMO](http://code.ciaoca.com/jquery/cxselect/demo/custom.html)
|
||||
|
||||
|
||||
##各选项数据接口独立
|
||||
可以为每个```select```设置一个接口,根据接口返回的数据结构,设置```json-space```、```json-name```、```json-value```适应 JSON 结构(包括纯数组)。
|
||||
当页面加载时,第一个选框已有选项数据,可以不设置第一个选框的接口。
|
||||
|
||||
[独立接口 DEMO](http://code.ciaoca.com/jquery/cxselect/demo/oneself.html)
|
||||
331
public/assets/libs/fastadmin-cxselect/index.html
Normal file
331
public/assets/libs/fastadmin-cxselect/index.html
Normal file
@@ -0,0 +1,331 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>cxSelect 联动下拉菜单 » 在线演示 - 前端开发仓库</title>
|
||||
<style>
|
||||
body{background:#ddd;font:14px/1.7 tahoma,'\5fae\8f6f\96c5\9ed1',sans-serif;}
|
||||
h1,h2,h3{font-size:36px;line-height:1;}
|
||||
h2{font-size:24px;}
|
||||
h3{font-size:18px;}
|
||||
fieldset{margin:2em 0;}
|
||||
fieldset legend{font-weight:bold;font-size:16px;line-height:2;}
|
||||
select,button{padding:0.5em;}
|
||||
a{color:#06f;text-decoration:none;}
|
||||
a:hover{color:#00f;}
|
||||
.wrap{width:900px;margin:0 auto;padding:20px 50px;border-radius:8px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.2);}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<h1>cxSelect 联动下拉菜单</h1>
|
||||
|
||||
<h2>示例</h2>
|
||||
<p>如果无法通过 AJAX 获取数据,请运行在服务器环境下。</p>
|
||||
|
||||
<fieldset id="city_china">
|
||||
<legend>默认</legend>
|
||||
<p>省份:<select class="province other">
|
||||
<option>请选择</option>
|
||||
</select></p>
|
||||
<p>城市:<select class="city">
|
||||
<option>请选择</option>
|
||||
</select></p>
|
||||
<p>地区:<select class="area">
|
||||
<option>请选择</option>
|
||||
</select></p>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="city_china_val">
|
||||
<legend>设置默认值及选项标题</legend>
|
||||
<p>所在地区:
|
||||
<select class="province other" data-first-title="选择省">
|
||||
<option value="">请选择</option>
|
||||
<option value="浙江省" selected>浙江省</option>
|
||||
</select>
|
||||
<select class="city" data-first-title="选择市">
|
||||
<option value="">请选择</option>
|
||||
<option value="杭州市" selected>杭州市</option>
|
||||
</select>
|
||||
<select class="area" data-first-title="选择地区">
|
||||
<option value="">请选择</option>
|
||||
<option value="西湖区" selected>西湖区</option>
|
||||
</select>
|
||||
</p>
|
||||
</fieldset>
|
||||
|
||||
<!-- <fieldset id="city_china_val">
|
||||
<legend>多种设置默认值的方式</legend>
|
||||
|
||||
<p>方法一:使用 option 的 value 和 selected 属性</p>
|
||||
<p><select class="province">
|
||||
<option>浙江省</option>
|
||||
</select></p>
|
||||
|
||||
<p>如果有多个 option ,需要使用 selected 属性指定选中项</p>
|
||||
<p><select class="city">
|
||||
<option>请选择</option>
|
||||
<option value="杭州市" selected>杭州市</option>
|
||||
</select></p>
|
||||
|
||||
<p>方法二:使用 select 的 data-value 属性</p>
|
||||
<p><select class="area" data-value="西湖区">
|
||||
<option>请选择</option>
|
||||
</select></p>
|
||||
</fieldset> -->
|
||||
|
||||
<fieldset id="global_location">
|
||||
<legend>全球主要国家城市联动</legend>
|
||||
<p>所在地区:
|
||||
<select class="country" data-first-title="选择国家"></select>
|
||||
<select class="state" data-required="true"></select>
|
||||
<select class="city" data-required="true"></select>
|
||||
<select class="region" data-required="true"></select>
|
||||
</p>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="custom_data">
|
||||
<legend>自定义选项</legend>
|
||||
<p>一:<select class="first"></select></p>
|
||||
<p>二:<select class="second"></select></p>
|
||||
<p>三:<select class="third"></select></p>
|
||||
<p>四:<select class="fourth"></select></p>
|
||||
<p>五:<select class="fifth"></select></p>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>API 接口</legend>
|
||||
<div id="api_data">
|
||||
<dl>
|
||||
<dt>选择器组 A</dt>
|
||||
<dd>
|
||||
<select class="province select"></select>
|
||||
<select class="city select"></select>
|
||||
<select class="area select"></select>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>选择器组 B</dt>
|
||||
<dd>
|
||||
<select class="first select"></select>
|
||||
<select class="second select"></select>
|
||||
<select class="third select"></select>
|
||||
<select class="fourth select"></select>
|
||||
<select class="fifth select"></select>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<button type="button" class="button green" name="attach" value="">attach</button>
|
||||
<button type="button" class="button green" name="detach" value="">detach</button>
|
||||
<button type="button" class="button green" name="clear" value="">clear</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="button green" name="setSelect" value="b">更换 select 组</button>
|
||||
<button type="button" class="button green" name="setData" value="china">更换数据:国内数据</button>
|
||||
<button type="button" class="button green" name="setData" value="global">更换数据:全球数据</button>
|
||||
<button type="button" class="button green" name="setData" value="custom">更换数据:自定义数据</button>
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="button green" name="required" value="0">更改 required</button>
|
||||
<button type="button" class="button green" name="emptyStyle" value="">更改 emptyStyle</button>
|
||||
<button type="button" class="button green" name="firstTitle" value="请选择">更改 firstTitle</button>
|
||||
</p>
|
||||
</fieldset>
|
||||
|
||||
<h2>文档</h2>
|
||||
<ul>
|
||||
<li><a target="_blank" href="https://github.com/ciaoca/cxSelect">Github</a></li>
|
||||
<li><a target="_blank" href="http://code.ciaoca.com/jquery/cxSelect/">中文文档</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>作者</h2>
|
||||
<p><a target="_blank" href="http://ciaoca.com/">http://ciaoca.com/</a></p>
|
||||
<p>Released under the MIT license</p>
|
||||
</div>
|
||||
|
||||
<script src="http://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
|
||||
<!-- <script src="http://cdn.staticfile.org/zepto/1.0/zepto.min.js"></script> -->
|
||||
<script src="js/jquery.cxselect.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
var urlChina = 'js/cityData.min.json';
|
||||
var urlGlobal = 'js/globalData.min.json';
|
||||
var dataCustom = [
|
||||
{'v': '1', 'n': '第一级 >', 's': [
|
||||
{'v': '2', 'n': '第二级 >', 's': [
|
||||
{'v': '3', 'n': '第三级 >', 's': [
|
||||
{'v': '4', 'n': '第四级 >', 's': [
|
||||
{'v': '5', 'n': '第五级 >', 's': [
|
||||
{'v': '6', 'n': '第六级 >'}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]}
|
||||
]},
|
||||
{'v': 'test number', 'n': '测试数字', 's': [
|
||||
{'v': 'text', 'n': '文本类型', 's': [
|
||||
{'v': '4', 'n': '4'},
|
||||
{'v': '5', 'n': '5'},
|
||||
{'v': '6', 'n': '6'},
|
||||
{'v': '7', 'n': '7'},
|
||||
{'v': '8', 'n': '8'},
|
||||
{'v': '9', 'n': '9'},
|
||||
{'v': '10', 'n': '10'}
|
||||
]},
|
||||
{'v': 'number', 'n': '数值类型', 's': [
|
||||
{'v': 11, 'n': 11},
|
||||
{'v': 12, 'n': 12},
|
||||
{'v': 13, 'n': 13},
|
||||
{'v': 14, 'n': 14},
|
||||
{'v': 15, 'n': 15},
|
||||
{'v': 16, 'n': 16},
|
||||
{'v': 17, 'n': 17}
|
||||
]}
|
||||
]},
|
||||
{'v': 'test boolean','n': '测试 Boolean 类型', 's': [
|
||||
{'v': true ,'n': true},
|
||||
{'v': false ,'n': false}
|
||||
]},
|
||||
{v: 'test quotes', n: '测试属性不加引号', s: [
|
||||
{v: 'quotes', n: '引号'}
|
||||
]},
|
||||
{v: 'test other', n: '测试奇怪的值', s: [
|
||||
{v: '[]', n: '数组(空)'},
|
||||
{v: [1,2,3], n: '数组(数值)'},
|
||||
{v: ['a','b','c'], n: '数组(文字)'},
|
||||
{v: new Date(), n: '日期'},
|
||||
{v: new RegExp('\\d+'), n: '正则对象'},
|
||||
{v: /\d+/, n: '正则直接量'},
|
||||
{v: {}, n: '对象'},
|
||||
{v: document.getElementById('custom_data'), n: 'DOM'},
|
||||
{v: null, n: 'Null'},
|
||||
{n: '未设置 value'}
|
||||
]},
|
||||
{'v': '' , 'n': '无子级'}
|
||||
];
|
||||
|
||||
$.cxSelect.defaults.url = urlChina;
|
||||
|
||||
// 默认
|
||||
$('#city_china').cxSelect({
|
||||
selects: ['province', 'city', 'area']
|
||||
});
|
||||
|
||||
// 设置默认值及选项标题
|
||||
$('#city_china_val').cxSelect({
|
||||
selects: ['province', 'city', 'area'],
|
||||
emptyStyle: 'none'
|
||||
});
|
||||
|
||||
// 全球主要国家城市联动
|
||||
$('#global_location').cxSelect({
|
||||
url: urlGlobal,
|
||||
selects: ['country', 'state', 'city', 'region'],
|
||||
emptyStyle: 'none'
|
||||
});
|
||||
|
||||
// 自定义选项
|
||||
$('#custom_data').cxSelect({
|
||||
selects: ['first', 'second', 'third', 'fourth', 'fifth'],
|
||||
// required: true,
|
||||
jsonValue: 'v',
|
||||
data: dataCustom
|
||||
});
|
||||
|
||||
// API 接口
|
||||
var apiBox = $('#api_data');
|
||||
var cxSelectApi;
|
||||
|
||||
apiBox.cxSelect({
|
||||
selects: ['province', 'city', 'area']
|
||||
}, function(api) {
|
||||
cxSelectApi = api;
|
||||
});
|
||||
|
||||
// cxSelectApi = $.cxSelect(apiBox, {
|
||||
// selects: ['province', 'city', 'area']
|
||||
// });
|
||||
|
||||
$('body').on('click', 'button', function() {
|
||||
var _name = this.name;
|
||||
var _value = this.value;
|
||||
|
||||
switch (_name) {
|
||||
case 'attach':
|
||||
cxSelectApi.attach();
|
||||
break;
|
||||
|
||||
case 'detach':
|
||||
cxSelectApi.detach();
|
||||
break;
|
||||
|
||||
case 'clear':
|
||||
cxSelectApi.clear();
|
||||
break;
|
||||
|
||||
case 'required':
|
||||
cxSelectApi.setOptions({
|
||||
required: _value == 1 ? false : true
|
||||
});
|
||||
this.value = _value == 1 ? 0 : 1;
|
||||
break;
|
||||
|
||||
case 'emptyStyle':
|
||||
if (_value === 'none') {
|
||||
_value = 'hidden';
|
||||
} else if (_value === 'hidden') {
|
||||
_value = '';
|
||||
} else {
|
||||
_value = 'none';
|
||||
};
|
||||
cxSelectApi.setOptions({
|
||||
emptyStyle: _value
|
||||
});
|
||||
this.value = _value;
|
||||
break;
|
||||
|
||||
case 'firstTitle':
|
||||
_value = _value === '请选择' ? '选择吧' : '请选择';
|
||||
cxSelectApi.setOptions({
|
||||
firstTitle: _value
|
||||
});
|
||||
this.value = _value;
|
||||
break;
|
||||
|
||||
case 'setSelect':
|
||||
cxSelectApi.setOptions({
|
||||
selects: _value === 'a' ? ['province', 'city', 'area'] : ['first', 'second', 'third', 'fourth', 'fifth']
|
||||
});
|
||||
this.value = _value === 'a' ? 'b' : 'a';
|
||||
break;
|
||||
|
||||
case 'setData':
|
||||
if (_value === 'china' || _value === 'global') {
|
||||
// $.ajax({
|
||||
// url: this.value === 'china' ? urlChina : urlGlobal,
|
||||
// type: 'GET',
|
||||
// dataType: 'json'
|
||||
// }).done(function(data, textStatus, jqXHR) {
|
||||
cxSelectApi.setOptions({
|
||||
url: this.value === 'china' ? urlChina : urlGlobal,
|
||||
// data: data
|
||||
});
|
||||
// }).fail(function(jqXHR, textStatus, errorThrown) {
|
||||
// });
|
||||
|
||||
} else if (this.value === 'custom') {
|
||||
cxSelectApi.setOptions({
|
||||
data: dataCustom
|
||||
});
|
||||
};
|
||||
break;
|
||||
|
||||
// not default
|
||||
};
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1568
public/assets/libs/fastadmin-cxselect/js/cityData.json
Normal file
1568
public/assets/libs/fastadmin-cxselect/js/cityData.json
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
3480
public/assets/libs/fastadmin-cxselect/js/globalData.json
Normal file
3480
public/assets/libs/fastadmin-cxselect/js/globalData.json
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
403
public/assets/libs/fastadmin-cxselect/js/jquery.cxselect.js
Normal file
403
public/assets/libs/fastadmin-cxselect/js/jquery.cxselect.js
Normal file
@@ -0,0 +1,403 @@
|
||||
/*!
|
||||
* jQuery cxSelect
|
||||
* @name jquery.cxselect.js
|
||||
* @version 1.4.1
|
||||
* @date 2016-11-02
|
||||
* @author ciaoca
|
||||
* @email ciaoca@gmail.com
|
||||
* @site https://github.com/ciaoca/cxSelect
|
||||
* @license Released under the MIT license
|
||||
*/
|
||||
(function(factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['jquery'], factory);
|
||||
} else {
|
||||
factory(window.jQuery || window.Zepto || window.$);
|
||||
};
|
||||
}(function($) {
|
||||
var cxSelect = function() {
|
||||
var self = this;
|
||||
var dom, settings, callback;
|
||||
|
||||
// 分配参数
|
||||
for (var i = 0, l = arguments.length; i < l; i++) {
|
||||
if (cxSelect.isJquery(arguments[i]) || cxSelect.isZepto(arguments[i])) {
|
||||
dom = arguments[i];
|
||||
} else if (cxSelect.isElement(arguments[i])) {
|
||||
dom = $(arguments[i]);
|
||||
} else if (typeof arguments[i] === 'function') {
|
||||
callback = arguments[i];
|
||||
} else if (typeof arguments[i] === 'object') {
|
||||
settings = arguments[i];
|
||||
};
|
||||
};
|
||||
|
||||
var api = new cxSelect.init(dom, settings);
|
||||
|
||||
if (typeof callback === 'function') {
|
||||
callback(api);
|
||||
};
|
||||
|
||||
return api;
|
||||
};
|
||||
|
||||
cxSelect.isElement = function(o){
|
||||
if (o && (typeof HTMLElement === 'function' || typeof HTMLElement === 'object') && o instanceof HTMLElement) {
|
||||
return true;
|
||||
} else {
|
||||
return (o && o.nodeType && o.nodeType === 1) ? true : false;
|
||||
};
|
||||
};
|
||||
|
||||
cxSelect.isJquery = function(o){
|
||||
return (o && o.length && (typeof jQuery === 'function' || typeof jQuery === 'object') && o instanceof jQuery) ? true : false;
|
||||
};
|
||||
|
||||
cxSelect.isZepto = function(o){
|
||||
return (o && o.length && (typeof Zepto === 'function' || typeof Zepto === 'object') && Zepto.zepto.isZ(o)) ? true : false;
|
||||
};
|
||||
|
||||
cxSelect.getIndex = function(n, required) {
|
||||
return required ? n : n - 1;
|
||||
};
|
||||
|
||||
cxSelect.getData = function(data, space) {
|
||||
if (typeof space === 'string' && space.length) {
|
||||
space = space.split('.');
|
||||
for (var i = 0, l = space.length; i < l; i++) {
|
||||
data = data[space[i]];
|
||||
};
|
||||
};
|
||||
return data;
|
||||
};
|
||||
|
||||
cxSelect.init = function(dom, settings) {
|
||||
var self = this;
|
||||
|
||||
if (!cxSelect.isJquery(dom) && !cxSelect.isZepto(dom)) {return};
|
||||
|
||||
var theSelect = {
|
||||
dom: {
|
||||
box: dom
|
||||
}
|
||||
};
|
||||
|
||||
self.attach = cxSelect.attach.bind(theSelect);
|
||||
self.detach = cxSelect.detach.bind(theSelect);
|
||||
self.setOptions = cxSelect.setOptions.bind(theSelect);
|
||||
self.clear = cxSelect.clear.bind(theSelect);
|
||||
|
||||
theSelect.changeEvent = function() {
|
||||
cxSelect.selectChange.call(theSelect, this.className);
|
||||
};
|
||||
|
||||
theSelect.settings = $.extend({}, $.cxSelect.defaults, settings, {
|
||||
url: theSelect.dom.box.data('url'),
|
||||
emptyStyle: theSelect.dom.box.data('emptyStyle'),
|
||||
required: theSelect.dom.box.data('required'),
|
||||
firstTitle: theSelect.dom.box.data('firstTitle'),
|
||||
firstValue: theSelect.dom.box.data('firstValue'),
|
||||
jsonSpace: theSelect.dom.box.data('jsonSpace'),
|
||||
jsonName: theSelect.dom.box.data('jsonName'),
|
||||
jsonValue: theSelect.dom.box.data('jsonValue'),
|
||||
jsonSub: theSelect.dom.box.data('jsonSub')
|
||||
});
|
||||
|
||||
var _dataSelects = theSelect.dom.box.data('selects');
|
||||
|
||||
if (typeof _dataSelects === 'string' && _dataSelects.length) {
|
||||
theSelect.settings.selects = _dataSelects.split(',');
|
||||
};
|
||||
|
||||
self.setOptions();
|
||||
self.attach();
|
||||
|
||||
// 使用独立接口获取数据
|
||||
if (!theSelect.settings.url && !theSelect.settings.data) {
|
||||
cxSelect.start.apply(theSelect);
|
||||
|
||||
// 设置自定义数据
|
||||
} else if ($.isArray(theSelect.settings.data)) {
|
||||
cxSelect.start.call(theSelect, theSelect.settings.data);
|
||||
|
||||
// 设置 URL,通过 Ajax 获取数据
|
||||
} else if (typeof theSelect.settings.url === 'string' && theSelect.settings.url.length) {
|
||||
$.getJSON(theSelect.settings.url, function(json) {
|
||||
cxSelect.start.call(theSelect, json);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
// 设置参数
|
||||
cxSelect.setOptions = function(opts) {
|
||||
var self = this;
|
||||
|
||||
if (opts) {
|
||||
$.extend(self.settings, opts);
|
||||
};
|
||||
|
||||
// 初次或重设选择器组
|
||||
if (!$.isArray(self.selectArray) || !self.selectArray.length || (opts && opts.selects)) {
|
||||
self.selectArray = [];
|
||||
|
||||
if ($.isArray(self.settings.selects) && self.settings.selects.length) {
|
||||
var _tempSelect;
|
||||
|
||||
for (var i = 0, l = self.settings.selects.length; i < l; i++) {
|
||||
_tempSelect = self.dom.box.find('select.' + self.settings.selects[i]);
|
||||
|
||||
if (!_tempSelect || !_tempSelect.length) {break};
|
||||
|
||||
self.selectArray.push(_tempSelect);
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
if (opts) {
|
||||
if (!$.isArray(opts.data) && typeof opts.url === 'string' && opts.url.length) {
|
||||
$.getJSON(self.settings.url, function(json) {
|
||||
cxSelect.start.call(self, json);
|
||||
});
|
||||
|
||||
} else {
|
||||
cxSelect.start.call(self, opts.data);
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
// 绑定
|
||||
cxSelect.attach = function() {
|
||||
var self = this;
|
||||
|
||||
if (!self.attachStatus) {
|
||||
self.dom.box.on('change', 'select', self.changeEvent);
|
||||
};
|
||||
|
||||
if (typeof self.attachStatus === 'boolean') {
|
||||
cxSelect.start.call(self);
|
||||
};
|
||||
|
||||
self.attachStatus = true;
|
||||
};
|
||||
|
||||
// 移除绑定
|
||||
cxSelect.detach = function() {
|
||||
var self = this;
|
||||
self.dom.box.off('change', 'select', self.changeEvent);
|
||||
self.attachStatus = false;
|
||||
};
|
||||
|
||||
// 清空选项
|
||||
cxSelect.clear = function(index) {
|
||||
var self = this;
|
||||
var _style = {
|
||||
display: '',
|
||||
visibility: ''
|
||||
};
|
||||
|
||||
index = isNaN(index) ? 0 : index;
|
||||
|
||||
// 清空后面的 select
|
||||
for (var i = index, l = self.selectArray.length; i < l; i++) {
|
||||
self.selectArray[i].empty().prop('disabled', true);
|
||||
|
||||
if (self.settings.emptyStyle === 'none') {
|
||||
_style.display = 'none';
|
||||
} else if (self.settings.emptyStyle === 'hidden') {
|
||||
_style.visibility = 'hidden';
|
||||
};
|
||||
|
||||
self.selectArray[i].css(_style);
|
||||
};
|
||||
};
|
||||
|
||||
cxSelect.start = function(data) {
|
||||
var self = this;
|
||||
|
||||
if ($.isArray(data)) {
|
||||
self.settings.data = cxSelect.getData(data, self.settings.jsonSpace);
|
||||
};
|
||||
|
||||
if (!self.selectArray.length) {return};
|
||||
|
||||
// 保存默认值
|
||||
for (var i = 0, l = self.selectArray.length; i < l; i++) {
|
||||
if (typeof self.selectArray[i].attr('data-value') !== 'string' && self.selectArray[i][0].options.length) {
|
||||
self.selectArray[i].attr('data-value', self.selectArray[i].val());
|
||||
};
|
||||
};
|
||||
|
||||
if (self.settings.data || (typeof self.selectArray[0].data('url') === 'string' && self.selectArray[0].data('url').length)) {
|
||||
cxSelect.getOptionData.call(self, 0);
|
||||
} else {
|
||||
self.selectArray[0].prop('disabled', false).css({
|
||||
'display': '',
|
||||
'visibility': ''
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
// 获取选项数据
|
||||
cxSelect.getOptionData = function(index) {
|
||||
var self = this;
|
||||
|
||||
if (typeof index !== 'number' || isNaN(index) || index < 0 || index >= self.selectArray.length) {return};
|
||||
|
||||
var _indexPrev = index - 1;
|
||||
var _select = self.selectArray[index];
|
||||
var _selectData;
|
||||
var _valueIndex;
|
||||
var _dataUrl = _select.data('url');
|
||||
var _jsonSpace = typeof _select.data('jsonSpace') === 'undefined' ? self.settings.jsonSpace : _select.data('jsonSpace');
|
||||
var _query = {};
|
||||
var _queryName;
|
||||
var _selectName;
|
||||
var _selectValue;
|
||||
|
||||
cxSelect.clear.call(self, index);
|
||||
|
||||
// 使用独立接口
|
||||
if (typeof _dataUrl === 'string' && _dataUrl.length) {
|
||||
if (index > 0) {
|
||||
for (var i = 0, j = 1; i < index; i++, j++) {
|
||||
_queryName = self.selectArray[j].data('queryName');
|
||||
_selectName = self.selectArray[i].attr('name');
|
||||
_selectValue = self.selectArray[i].val();
|
||||
|
||||
if (typeof _queryName === 'string' && _queryName.length) {
|
||||
_query[_queryName] = _selectValue;
|
||||
} else if (typeof _selectName === 'string' && _selectName.length) {
|
||||
_query[_selectName] = _selectValue;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
$.getJSON(_dataUrl, _query, function(json) {
|
||||
_selectData = cxSelect.getData(json, _jsonSpace);
|
||||
|
||||
cxSelect.buildOption.call(self, index, _selectData);
|
||||
});
|
||||
|
||||
// 使用整合数据
|
||||
} else if (self.settings.data && typeof self.settings.data === 'object') {
|
||||
_selectData = self.settings.data;
|
||||
|
||||
for (var i = 0; i < index; i++) {
|
||||
_valueIndex = cxSelect.getIndex(self.selectArray[i][0].selectedIndex, typeof self.selectArray[i].data('required') === 'boolean' ? self.selectArray[i].data('required') : self.settings.required);
|
||||
|
||||
if (typeof _selectData[_valueIndex] === 'object' && $.isArray(_selectData[_valueIndex][self.settings.jsonSub]) && _selectData[_valueIndex][self.settings.jsonSub].length) {
|
||||
_selectData = _selectData[_valueIndex][self.settings.jsonSub];
|
||||
} else {
|
||||
_selectData = null;
|
||||
break;
|
||||
};
|
||||
};
|
||||
|
||||
cxSelect.buildOption.call(self, index, _selectData);
|
||||
};
|
||||
};
|
||||
|
||||
// 构建选项列表
|
||||
cxSelect.buildOption = function(index, data) {
|
||||
var self = this;
|
||||
|
||||
var _select = self.selectArray[index];
|
||||
var _required = typeof _select.data('required') === 'boolean' ? _select.data('required') : self.settings.required;
|
||||
var _firstTitle = typeof _select.data('firstTitle') === 'undefined' ? self.settings.firstTitle : _select.data('firstTitle');
|
||||
var _firstValue = typeof _select.data('firstValue') === 'undefined' ? self.settings.firstValue : _select.data('firstValue');
|
||||
var _jsonName = typeof _select.data('jsonName') === 'undefined' ? self.settings.jsonName : _select.data('jsonName');
|
||||
var _jsonValue = typeof _select.data('jsonValue') === 'undefined' ? self.settings.jsonValue : _select.data('jsonValue');
|
||||
|
||||
if (!$.isArray(data)) {return};
|
||||
|
||||
var _html = !_required ? '<option value="' + String(_firstValue) + '">' + String(_firstTitle) + '</option>' : '';
|
||||
|
||||
// 区分标题、值的数据
|
||||
if (typeof _jsonName === 'string' && _jsonName.length) {
|
||||
// 无值字段时使用标题作为值
|
||||
if (typeof _jsonValue !== 'string' || !_jsonValue.length) {
|
||||
_jsonValue = _jsonName;
|
||||
};
|
||||
|
||||
for (var i = 0, l = data.length; i < l; i++) {
|
||||
_html += '<option value="' + String(data[i][_jsonValue]) + '">' + String(data[i][_jsonName]) + '</option>';
|
||||
};
|
||||
|
||||
// 数组即为值的数据
|
||||
} else {
|
||||
for (var i = 0, l = data.length; i < l; i++) {
|
||||
_html += '<option value="' + String(data[i]) + '">' + String(data[i]) + '</option>';
|
||||
};
|
||||
};
|
||||
|
||||
_select.html(_html).prop('disabled', false).css({
|
||||
'display': '',
|
||||
'visibility': ''
|
||||
});
|
||||
|
||||
// 初次加载设置默认值
|
||||
if (typeof _select.attr('data-value') === 'string') {
|
||||
_select.val(String(_select.attr('data-value'))).removeAttr('data-value');
|
||||
|
||||
if (_select[0].selectedIndex < 0) {
|
||||
_select[0].options[0].selected = true;
|
||||
};
|
||||
};
|
||||
|
||||
if (_required || _select[0].selectedIndex > 0) {
|
||||
_select.trigger('change');
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
// 改变选择时的处理
|
||||
cxSelect.selectChange = function(name) {
|
||||
var self = this;
|
||||
|
||||
if (typeof name !== 'string' || !name.length) {return};
|
||||
|
||||
var index;
|
||||
|
||||
name = name.replace(/\s+/g, ',');
|
||||
name = ',' + name + ',';
|
||||
|
||||
// 获取当前 select 位置
|
||||
for (var i = 0, l = self.selectArray.length; i < l; i++) {
|
||||
if (name.indexOf(',' + self.settings.selects[i] + ',') > -1) {
|
||||
index = i;
|
||||
break;
|
||||
};
|
||||
};
|
||||
|
||||
if (typeof index === 'number' && index > -1) {
|
||||
index += 1;
|
||||
cxSelect.getOptionData.call(self, index);
|
||||
};
|
||||
};
|
||||
|
||||
$.cxSelect = function() {
|
||||
return cxSelect.apply(this, arguments);
|
||||
};
|
||||
|
||||
// 默认值
|
||||
$.cxSelect.defaults = {
|
||||
selects: [], // 下拉选框组
|
||||
url: null, // 列表数据文件路径(URL)或数组数据
|
||||
data: null, // 自定义数据
|
||||
emptyStyle: null, // 无数据状态显示方式
|
||||
required: false, // 是否为必选
|
||||
firstTitle: '请选择', // 第一个选项的标题
|
||||
firstValue: '', // 第一个选项的值
|
||||
jsonSpace: '', // 数据命名空间
|
||||
jsonName: 'n', // 数据标题字段名称
|
||||
jsonValue: '', // 数据值字段名称
|
||||
jsonSub: 's' // 子集数据字段名称
|
||||
};
|
||||
|
||||
$.fn.cxSelect = function(settings, callback) {
|
||||
this.each(function(i) {
|
||||
$.cxSelect(this, settings, callback);
|
||||
});
|
||||
return this;
|
||||
};
|
||||
}));
|
||||
11
public/assets/libs/fastadmin-cxselect/js/jquery.cxselect.min.js
vendored
Normal file
11
public/assets/libs/fastadmin-cxselect/js/jquery.cxselect.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
23
public/assets/libs/fastadmin-cxselect/package.json
Normal file
23
public/assets/libs/fastadmin-cxselect/package.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "cxselect",
|
||||
"version": "1.4.0",
|
||||
"description": "cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市、商品分类等联动菜单。",
|
||||
"keywords": ["jquery plugin","select"],
|
||||
"main": "./js/jquery.cxselect.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"dependencies": {
|
||||
"jquery": ">=1.7"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/ciaoca/cxSelect.git"
|
||||
},
|
||||
"author": "Ciaoca <ciaoca@gmail.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/ciaoca/cxSelect/issues"
|
||||
},
|
||||
"homepage": "http://code.ciaoca.com/jquery/cxSelect/"
|
||||
}
|
||||
Reference in New Issue
Block a user