input下拉提示,ajax下拉数据字典,大数据量输入框下拉列表提示

Dic扩展模块

Dic数据字典模块是v-ci的核心之一,为解决大数据量下拉字典效率及操作问题,特推出通用的数据字典模块,所有字典数据可在数据库维护,在大数据量时采用分页下拉的展示方式,同时支持拼音简拼搜索,代码项、代码值搜索等,支持无限层级级联,支持多选、过滤等等、自定义数据表,只要你能想到的,几乎都可以实现,兼容全部主流浏览器(IE5/6/7除外)。 
查看演示

模块加载名称:dic

基础参数

dic数据字典模块通过定义input的class属性为DMinput,来自动加载代码,id定义规则为code_加上数据库代码表里代码类别字段,如code_XZQH,其中XZQH为数据库中定义行政区划的代码类别。name定义规则为code_加该字段的自定义名字。

引用文件:

 
 

引用js和css文件

  1. dwr/engine.js
  2. dwr/util.js
  3. dwr/interface/SysCodeInfoService.js
  4. js/plugins/code/mootools.js
  5. js/plugins/code/dic.js
  6. js/plugins/code/EWSelect.css

使用效果
 
 

larryMS code

  1. 代码表

可以实现翻页、拼音简拼搜索、代码项和代码值的快速搜索,支持百万级的字典表下拉检索。

使用方法
 
 

字段定义

  1. 定义下拉字典项字段:
  2. input type="text" class="DMinput layui-input" id="code1_XZQH" name="code_xzqh1"
  3. class需要添加DMinput,id定义需为code开头,之后为数据库中代码表的代码类型,这里示例为XZQH,name定义为code开头,之后为该字段定义的名字。

前缀过滤方法
 
 

前缀过滤

  1. input type="text" class="DMinput layui-input" id="code2_XZQH" name="code_xzqh2" filterDM="42____"
  2. 前缀过滤只需要增加filterDM属性,过滤规则参考sql规则,这里42____标示检索前两位为42开头的数据,这样可以实现下拉户籍为湖北省的行政区划。
  3. 过滤效果如下:
  4. 代码表前缀过滤

后缀过滤方法
 
 

后缀过滤

  1. input type="text" class="DMinput layui-input" id="code2_XZQH" name="code_xzqh2" filterDM="42____"
  2. 前缀过滤只需要增加filterDM属性,过滤规则参考sql规则,这里__0000标示检索后四位为0000的数据,这样根据行政区划的规则可以实现下拉所有省份信息。
  3. 过滤效果如下:
  4. 代码表后缀过滤

多选
 
 

多选

  1. input type="text" class="DMinput layui-input" id="code4_XZQH" name="code_xzqh4" Multi="true"
  2. 多选只需要增加Multi="true"属性。
  3. 多选效果如下:
  4. 代码表多选

默认
 
 

默认

  1. input type="hidden" id="xzqh5" value="330000"
  2. 页面加载完给默认值时需要定义一个隐藏域,id为需要赋值的文本框的name并去掉code_。上面为给name为code_xzqh5的下拉框赋代码值为330000。
  3. 默认赋值效果如下:
  4. 代码表多选

多级级联
 
 

级联

  1. 多级级联这里以行政区划省、市、县三级为例,行政区划代码一共6位,前两位代码省份、中间两位代码市、最后两位代码县,如420105里以42开头代表湖北省、以4201开头代表湖北省武汉市、420105代表湖北省武汉市的汉阳区。级联的原理为选中省份后通过js动态为市增加filterDM属性,filterDM值为所选择省份的前两位+“__00”,这样市文本框就会根据filterDM过滤出该省份下所有市级地区。
  2. 县级级联同样的道理,当选择市级区划后,通过js动态为县增加filterDM属性,filterDM值为所选择市的前四位+“__”,这样市文本框就会根据filterDM过滤出该市下所有县级地区。js如下,在省、市文本框失去焦点时调用。
  3. window.getShi =function(){
  4. if($("#EW_xzqh6").val()!=''){
  5. $("#code7_XZQH").attr("filterDM",($("#EW_xzqh6").val()).substring(0,2)+"__00");
  6. }else{
  7. $("#code7_XZQH").attr("filterDM",'a');
  8. }
  9. };
  10. window.getXian =function(){
  11. if($("#EW_xzqh7").val()!=''){
  12. $("#code8_XZQH").attr("filterDM",($("#EW_xzqh7").val()).substring(0,4)+"__");
  13. }else{
  14. $("#code8_XZQH").attr("filterDM",'a');
  15. }
  16. };
  17. 级联效果如下:
  18. 代码表级联

自定义数据源表
 
 

默认

  1. 以上效果都是基于特定的代码表里获取数据的,现在演示的是可自定义代码表及码值字段等信息。
  2. input type="text" class="DMinput layui-input" id="code10_org_info~superiororg =-00001- and orgname like -%派出所-~orgno~orgname" name="code_xzqh10"
  3. 在定义ID的时候将表名、字段、条件等信息,定义规则为以code开头,后面跟着的org_info为表名,表名后面以 ~为分隔符, superiororg =-00001- and orgname like -%派出所-为sql条件,表示查询org_info的条件为superiororg='00001'并且orgname为派出所的,这里用-代替单引号,后面orgno是作为code值的字段,orgname为代码名的字段。
  4. 级联后台数据获取如下:
  5. 数据库
  6. 前端展示如下:
  7. 自定义下拉

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值