eSelect.js是一个基于JQuery制作的简单高效的HTML SELECT数据自动加载插件,eSelect.js支持以下功能:
- 从远程后台加载数据
- 从本地加载数据
- SELECT选项数据本地缓存
- 兼容IE8、IE9、IE10、IE11、Edge、Chrome、Firefox等浏览器
zip包下载地址:http://www.hillfly.com/project/eSelect/release/eSelectjs.0.1beta.zip
<script type="text/javascript" src="demo/jquery-1.7.1.js"></script> <script type="text/javascript" src="demo/store.min.js"></script> <script type="text/javascript" src="eSelect.js"></script>
eSelect仅识别含有es-autoload属性的Select控件,非Select控件会自动被过滤。为了避免事件冲突,请勿在标识了es-autoload属性的Select控件中设置click监听。
<html> <head> <meta charset="utf-8"> <script type="text/javascript" src="demo/jquery-1.7.1.js"></script> <script type="text/javascript" src="demo/store.min.js"></script> <script type="text/javascript" src="eSelect.js"></script> </head> <body> <form id="es-form"> <select id="select1" name="select1" es-autoload></select> <select id="select2" name="select2"></select> </form> <script></script> </body> </html>
eSelect.init({ userConfig: { _esContextExp: '#es-form', //控件监听域 _esLoadImmediatlyFlag: false, //是否立即加载数据标志 _esContextCde: 'test', //系统标识,作为缓存key前缀 _esAjaxUrl: 'http://127.0.0.1/getOpts', //缓存远程获取接口地址 _eleProperty: 'name', //缓存key属性 } });
$('#es-form').eSelect({ userConfig: { _esLoadImmediatlyFlag: false, //是否立即加载数据标志 _esContextCde: 'test', //系统标识,作为缓存key前缀 _esAjaxUrl: 'http://127.0.0.1/getOpts', //缓存远程获取接口地址 _eleProperty: 'name', //缓存key属性 } });
- _esContextExp [非必传]
控件监听域,eSelect.js将监听此域内的Select控件。默认为document,即监听整个页面所有Select控件。亦可赋值为'.es-form',即使用class选择器确定监听域,考虑性能的话,推荐使用id。
- _eleProperty [非必传]
缓存key属性名,默认为name,eSelect.js将会读取控件的该属性值作为缓存key。当Select控件对应的_eleProperty属性值为空或不存在时,该控件将会被过滤,不会触发自动加载。
- _esLoadImmediatlyFlag [非必传]
是否立即加载数据标志,默认为false,即为懒加载模式,只有点击Select控件触发监听事件时,eSelect.js才会初始化Select控件数据。若为true,初始化方法执行完毕后eSelect.js将会立刻加载Select控件数据。
- _esAjaxUrl [必传]
选项数据远程获取接口地址,必须为完整的网址,包含http://
- _esContextCde [必传]
系统标识,作为缓存key前缀。因为eSelect.js本地缓存使用的是localStorage,其作用域是限定在文档源级别的,文档源通过协议、主机名以及端口三者来确定,即同一站点的不同页面读写的是同一作用域的localStorage。若不同的页面中存在同_eleProperty值的Select控件,则可能存在缓存key重名导致缓存覆盖的问题,为了避免这个问题,需要给每个key加个前缀,每个页面的eSelect可赋予不同的_esContextCde来避免key重复问题。
eSelect.js请求远程服务获取选项数据的Ajax请求基本参数如下:
url: _esAjaxUrl data: { key: _eleProperty} type: "GET" dataType: "JSON"
例如:
url: "http://127.0.0.1/get" data: { key: "select1"} type: "GET" dataType: "JSON"
返回数据格式:JSON,具体形式为JSON数组。若无选项数据,则返回[],例如:
[{
text: "test1",
value: "value1"
}, {
text: "tes2",
value: "value2"
}, {
text: "tes3",
value: "value3"
}]可将指定的options数据加载到控件中,eSelect.js会自动刷新localStorage中的缓存数据。
eSelect.setOptions($('#select1'), [{ text: "test1", value: "value1" }, { text: "tes2", value: "value2" }, { text: "tes3", value: "value3" }]);
或者
$('#select1').setOptions([{ text: "test1", value: "value1" }, { text: "tes2", value: "value2" }, { text: "tes3", value: "value3" }]);
该操作将会清空指定Select控件的Option项,清空localStorage中该控件的缓存数据,然后eSelect从远程重新获取并加载控件数据。
eSelect.reloadElement($('#select1'));
或者
$('#select1').reloadElement();
eSelect.clearEleCache($('#select1'));
或者
$('#select1').clearEleCache();
eSelect.clearAllEleCache();
eSelect.getConfig();
返回值:
userConfig: { _esContextExp: '#es-context', _esLoadImmediatlyFlag: false, _esSysFlag: 'test', _esAjaxUrl: 'http://127.0.0.1/get', _eleProperty: 'id', }
eSelect.js默认的元素筛选逻辑为:
- 在_esContextExp域内
- 为Select控件
- 含有es-autoload属性
- _eleProperty属性值不为空
- 控件非hidden、非disabled
实际使用中用户可覆盖默认筛选逻辑进行自定义:
方法:getElements(){} 参数:无参 返回值:返回筛选元素的JQuery对象
{ userConfig: { _esContextExp: '#es-form', _esLoadImmediatlyFlag: false, _esContextCde: 'test', _esAjaxUrl: 'http://127.0.0.1/getOpts', _eleProperty: 'name', }, funcImp: { getElements: function() { return $('#select1'); } } }
eSelect.js默认的远程请求数据内容为:{ key: _eleProperty},比如:{ key: "select1"},用户可以自定义请求的内容:
方法:getRemoteReqParam: function($ele) {} 参数:
- 参数1, $ele:触发加载的select控件的JQuery对象
返回值:返回筛选元素的JQuery对象
{ userConfig: { _esContextExp: '#es-form', _esLoadImmediatlyFlag: false, _esContextCde: 'test', _esAjaxUrl: 'http://127.0.0.1/getOpts', _eleProperty: 'name', }, funcImp: { getRemoteReqParam: function($ele) { return {reqId: $ele.prop("id")}; } } }
用户可以自定义回调方法,自定义远程获取数据成功后需要执行的操作:
方法:ajaxSuccessFn: function($ele, opts) {} 参数:
- 参数1, $ele:触发加载的select控件的JQuery对象
- 参数2, opts:远程请求返回的数据
返回值:无
{ userConfig: { _esContextExp: '#es-form', _esLoadImmediatlyFlag: false, _esContextCde: 'test', _esAjaxUrl: 'http://127.0.0.1/getOpts', _eleProperty: 'name', }, funcImp: { ajaxSuccessFn: function($ele, opts) { //your code ^ ^ } } }
默认创建的Option项为:<option value="0">男</option> ,用户可以自定义Option:
方法:createOptions: function(opt) {} 参数:
- 参数1, opt:单条option选项数据的JSON对象
例如:
{text: "男", value: "0"}
返回值:拼接完毕的Option字符串, "<option></option>"
{ userConfig: { _esContextExp: '#es-form', _esLoadImmediatlyFlag: false, _esContextCde: 'test', _esAjaxUrl: 'http://127.0.0.1/getOpts', _eleProperty: 'name', }, funcImp: { createOptions: function(opt) { return "<option value=" + opt["value"] + " selected=" + opt["selected"] + ">" + opt["text"] + "</option>"; } } }
再一次感谢您花费时间阅读这份使用说明,祝您工作顺利、生活愉快!
作者 @_Hill3 2016年 9月16日