• select2插件的使用


     <select id="prd_tech_for_load" class="selectable" style="180px;">
    </select>

    不需要分页时,直接在select内添加option列表

    如果要分页的话

    $(function () {
        $("#prd_tech_for_load").select2();
        var sel_tech = $("#prd_tech_for_load").select2({
            placeholder: abp.localization.values['ICT'].SelTechReq,
            ajax: {
                url: '../PDE/GetProductList',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        queryText: params.term // search term
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.result.data,
                        pagination: {
                            more: 1 < data.totalPages
                        }
                    };
                },
                cache: true
            },
            //disabled: true,
            escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
            minimumInputLength: 0,
            templateResult: function (item) { // 显示查询结果
                var display = '';
                if (item.technology != null) display += item.technology;
                //if (item.customerName != null) display += '(' + item.customerName + ')';
                return display;
            },
            templateSelection: function (item) { // 显示选中的对象
                var display = '';
                if (item.technology != null) display += item.technology;
                if (item.customerName != null) display += '(' + item.customerName + ')';
                return display || item.text;
            }
        });
    
        sel_tech.on("select2:select", function (e) {
            defaultVue.ProductID = e.params.data.productId;
        });
    });

    这里要注意的一个问题是,后台返回的数据列表必须含有id这个字段,不然会出现问题,一直不能选中数据。

    这个不知道的人,被坑死了!

  • 相关阅读:
    [转载] IE8+兼容小结
    vue添加,删除内容
    vue跳转的两种方法
    checked 完整版全选,单选,反选
    网页特殊符号HTML代码大全
    利用css 实现 视觉差效果
    css 自定义滚动条样式
    js 模拟键盘
    css 动画 transition和animation
    浅谈浏览器垃圾回收机制
  • 原文地址:https://www.cnblogs.com/hongdada/p/6149493.html
Copyright © 2020-2023  润新知