多功能下拉分页选择插件SelectPage(原创)

所属分类:导航,输入-分页,选择框

多功能下拉分页选择插件SelectPage(原创) ie兼容8

更新时间:2017/6/15 20:56:22

说明:原ComboSelect插件现已更名为SelectPage


SelectPage

功能特点

  • 基于jQuery、Bootstrap2开发

  • 输入自动查找

  • 列表结果分页展示

  • 使用键盘快速操作基本功能及分页功能

  • 多项选择以标签(Tag)形式展现

  • 结果列表自动判断屏幕边缘,避免内容超出可视范围

  • 浏览器兼容:IE8+、Chrome、Firefox等

  • 插件基于jQuery开发,建议在Bootstrap环境下使用(目前仅适配Bootstrap2,Bootstrap3未进行适配)

相关插件-分页,选择框
  分页
 18901  49

jQuery分页插件

jQuery分页插件,自带回调页数,代码少有注释。
  分页
 12142  42

个性的分页插件-JQPAGINATION

jqPagination 为我们提供了一种全新的分页方式,传统的分页是一系列的数字页码,而 jqPagination 则是采用了交互式的文本框来显示类似“Page 1 of 5”的页码。当我们选中文本框的时候,我们可以在文本框中输入指定的页码并跳转到该页。
  分页
 19559  25

jQuery前端分页插件pageGroup.js

一款非常简洁漂亮方便调用的jQuery前端分页,没有多余的JS和文件,页面多可隐藏
  分页
 18742  73

讨论这个项目(64)回答他人问题或分享插件使用方法奖励jQ币

    一大片 0
    2017/10/25 12:26:53

    ajax是如何给服务器传参数的呢。搜索内容的参数名怎么修改传过去。页码的参数名怎么改。返回数据是根据参数来的,怎么修改参数名呢

        Terry0
        2017/10/25 22:47:05

        官网的DEMO页面有非常详细的说明

    回复
    摇滚无用 0
    2017/10/20 15:38:11
    这是我写死的对象数组,,这个是JS,这是data-init是可以达到默认选中效果的,然后我根据服务器返回的,自己定义了一个对象数组如图,然后data-init和上边一样,然后把js方法里边的data换成目前我自己定义的,报错找不到对应的desc,我明明这个Id是有的,是因为编码格式问题吗 ,求帮忙 回复
    0
    2017/9/26 17:01:06

    bug 反馈: 检查(id、name、desc)键值或描述存在中文标点符号(如中文句号、分号、逗号)。会导致所选项可以被多次选择。

        0
        2017/9/26 17:03:28
        上面描述 不正确!是英文符号(我试过逗号) 有问题。
    回复
    0
    2017/9/19 10:47:31

    2017-08-08 修复界面上排版内容较少时,列表会向上展示开的问题 

    这个情况还有在容器iframe 低于400px也会想上展开。调整分页数低于5还好,但是分页后当数量不足5,又想上展开.

        0
        2017/9/19 11:02:02

        selectPage版本号2.7 

        bootstrap3

        大概布局

        <div style='height:400px,max-height:2000px'>选项1

        选项2

        selectpage 下拉框

          选项3

        查询条件  查询按钮  重置按钮

        </div><数据列表>忽略

        0
        2017/9/20 9:40:55

        或直接在官方demo,也能重现。将浏览器高度调整400左右也会出现这个问题。

        Terry0
        2017/9/20 15:17:50

        问题已修复,关注v2.8版本

        0
        2017/9/26 15:53:54

        好的 非常感谢。

    回复
    canyue99 0
    2017/9/15 10:06:41

    如何更新下拉框选项内容?因为是动态根据上一个选择框选择的内容,再查询的。但是现在下拉框选项不更新

    $('#modal2').selectPage({
        showField: 'showValue',
        keyField: 'modelId',
        data: tag_data,
        noResultClean: true
    });
    $('#modal2').selectPageData(tag_data);
    $('#modal2').selectPageRefresh();
        Terry0
        2017/9/15 13:53:09

        请查看官网实例的第9个实例,就是专门演示更新数据源的功能

        canyue990
        2017/9/15 18:13:57

        再问个问题,如果使用回调函数,打开下拉框,然后不选择,焦点移开,下拉框也会自动选择第一条数据

        Terry1
        2017/9/15 20:33:03

        设置参数:

        autoSelectFirst : false
        canyue990
        2017/9/20 15:10:26

        您好,请问这个ajax请求可以改写成按回车键才会调用方法吗

        Terry0
        2017/9/20 15:58:37

        有什么特殊的需求要这样么?ajax输入查询也并不是输入一个就触发一次,而是连续输入结束后才发起查询,输入延迟0.5秒,该延迟时间可以使用参数进行设置

        canyue990
        2017/9/20 17:50:04

        ie11下点击input框不触发ajax请求?

        Terry0
        2017/9/21 18:16:12
        经测试,在IE11下ajax数据加载功能正常
    回复
    颠覆、这一切 0
    2017/8/17 16:14:14
    $('#func3').click(function() {
        $('#selectPage').val('20');
        $('#selectPage').selectPageRefresh();
    });

    你这个是设置默认值并刷新,有更新么,我重下了没看到呀

        颠覆、这一切0
        2017/8/17 16:34:30

        $('#selectPage').val('20')只是对当前的input默认赋值了,但不是动态选中

        $("#selectPage_id").attr('data-init','3');赋值后需要刷新控件才能应用,做不到动态

        Terry0
        2017/8/17 17:15:53

        设置输入框的data-init属性的目的是为了让插件获得数据后,设置默认选中

        $('#selectPage').val('20');

        $('#selectPage').selectPageRefresh();

        是用于动态修改插件的选中项目,同时需要刷新,该功能在v2.0后可用,目前官网最新版本v2.1

        颠覆、这一切0
        2017/8/17 18:03:06

        那这个v2.0版本号是哪里看的,也就是说现在支持动态修改默认项咯

        Terry0
        2017/8/17 20:06:30

        点击上面的蓝色按钮“website”

    回复
    doctype 0
    2017/8/16 15:09:44

    多选 下拉初始值设置后 值被选择上了  但是标签没出来

        doctype0
        2017/8/16 15:16:42

        可以确定只在多选时出现..

        Terry0
        2017/8/16 16:41:09

        谢谢反馈,问题已收到

        doctype0
        2017/8/18 16:56:09

        这个好解决么 还是我用法有问题?

        Terry0
        2017/8/18 19:07:17

        不要急,下周会上新版本,你的问题已解决

        Terry0
        2017/8/21 10:51:50

        敬请下载v2.2版本

    回复
    Melee 0
    2017/8/9 15:37:42

    请问如果是ajax请求的话,翻页是重新请求还是第一次把所有数据传过来

        Terry0
        2017/8/9 18:13:20

        分页的方式,不是一次性请求全量

        Melee0
        2017/8/14 8:50:15

        也就是分页的时候是再次请求?

        Terry0
        2017/8/14 13:53:37

        是的,就跟数据表格的分页是一样的逻辑,所以插件推荐先将数据读取到页面后,再用json数据来初始化插件,后续的任何操作都不会与服务端进行交互

        Melee0
        2017/8/14 14:55:37

        ajax请求下,如果我需要在输入框中输入关键字来模糊查询,需要重新ajax请求,这个怎么弄?

        Terry0
        2017/8/14 15:40:07

        那就确定你是否是需要让插件始终都使用ajax的方式来加载数据了

        如果初始化设置了data:'xxx.com',那么插件的所有数据请求都会以ajax方式进行查询,目前每个键盘输入都会发起一次ajax查询

        ajax模式既然是服务端请求数据模式,那么模糊查询是需要服务端进行处理的,插件会默认使用showField中设置的字段进行传递查询关键字,也可以使用searchField参数设置你所需要指定的字段进行查询,在服务端获得到这些内容后,请使用相应的模糊查询处理,即可达到效果

        BTW:后续的版本更新会优化ajax模式是的输入延迟功能,即在输入空闲N秒后才发起查询请求,这样的机制也是减少交互,减轻服务器负担的的方案

        Melee0
        2017/8/14 16:00:13

        能加下QQ:491138883吗?有些事能请教你

        Terry0
        2017/8/14 16:16:51

        请邮件联系

        terry5@foxmail.com

    回复
    wldm 0
    2017/7/18 14:13:41

    jQuery v3.1.0 跑不起来

        Terry0
        2017/7/18 17:16:44

        抱歉,开发环境是1.12.4,没试过2,3版本的jQuery

    回复
    下雨天 ? 0
    2017/6/15 11:07:52
    可以根据id 显示对应的值吗?  例如 jquery$("#selectid").val("1"); 会显示1 所对应的值
        Terry0
        2017/6/15 11:15:23

        你的意思是通过脚本实时修改当前选中的项目?

        下雨天 ?0
        2017/6/15 13:11:28

        对的,情景应该是  页面传值过来  默认显示传值过来对应的值  

        Terry0
        2017/6/15 15:08:37

        如果是初始化值这个功能是有的

        只要页面定义输入框元素的时候,设置data-init属性值就可以设置默认选中的项目,例如:

        < input type="text" id="selectPage1" data-init="4" >

        实例请参考:https://terryz.github.io/demo.html

        下雨天 ?0
        2017/6/16 9:14:39

        嗯嗯,是这样的 谢谢了~

        纪晓璇0
        2017/8/1 14:07:42
        请问通过js修改data-init的值为什么无效
        Terry0
        2017/8/1 15:58:34

        插件已经初始化后,就不能再用这个属性初始化选中值了,后续会增加动态修改当前选中值的API

        Kane?Qi0
        2017/8/11 10:19:55

        初始化值可以是多个吗

        Terry1
        2017/8/11 11:17:16

        单选模式下,设置具体数值

        在多选模式下,设置多个值用逗号隔开,例如:

        data-init="23,4,22,5"
        Kane?Qi0
        2017/8/11 11:24:25

        动态修改当前选中值的API什么时候会有啊,急等着用啊 大神~~跪求啊

        Terry0
        2017/8/14 13:54:27

        功能已更新,请关注软件首页

        Kane?Qi0
        2017/8/14 18:19:18

        是这个方法吗,应该怎么用

        Kane?Qi0
        2017/8/14 18:20:11
        initField 初始化数据列
        类型:string
        默认值:'data-init'
        使用方式:
        初始化数据列,默认设置为data-init属性,该属性设置了初始化插件时默认显示的内容
        
        它必须设置在input标签内,例:< input type="text" data-init="20" >
        Terry0
        2017/8/14 18:59:03

        更新到最新的v2.0版本,使用以下代码:

        $('#func3').click(function(){
        	$('#selectPage').val('20');
        	$('#selectPage').selectPageRefresh();
        });
    回复
取消回复