URL de referencia: https://www.cnblogs.com/landeanfen/p/7457283.html#_label1
Leer la tabla de contenido
1. Dirección de código abierto del componente y descripción de API
2. Ejemplo de efecto de componente
3. Ejemplo de uso
1. Ejemplo básico
2. Otros ejemplos de efecto
3. Asignación de valor de componente
4. Uso de otro componente
5. Empaquetado de componente
4. Descarga de código fuente
5. Resumen
texto
Prólogo: He compartido dos componentes de cuadro desplegable de arranque antes: Serie de componentes JS: dos tipos de competencia de componentes de selección múltiple de arranque y serie de componentes JS: resumen de uso del componente Bootstrap Select2, recibí mucha atención y preguntas de amigos del jardín, y finalmente resumido Esto Los componentes del cuadro desplegable en los dos artículos tienen algunos problemas grandes y pequeños, como los dos componentes de selección múltiple de arranque, el efecto de representación de la interfaz es ligeramente peor; por ejemplo, algunos problemas de compatibilidad de select2, la asignación de valor de selecciones múltiples, Están molestando a los blogueros. Además de muchos amigos del jardín, el cuadro desplegable del proyecto fue reemplazado por el componente presentado hoy, ¡así que se lo presentaré hoy y dejaré que todos tengan una opción más! ¡Gracias por su continua atención!
Di algo fuera de tema. Este artículo se preparó originalmente para escribir, pero recientemente el proyecto tomará la ruta de desarrollo de front-end, pero el blogger está ocupado. Durante un tiempo, Node.js, npm, webpack, react, react-router, ant.design y otras tecnologías son todo lo que tienes que aprender. El cerebro es algo realmente bueno. Puede acomodar tanto conocimiento nuevo a la vez. Aunque no es adecuado para todo tipo de cosas, se irá acostumbrando gradualmente con el tiempo. Afortunadamente , los blogueros suelen prestar atención a esta área de la tecnología, por lo que no la han aprendido. En cuanto a vue y react, muchos amigos del grupo han hablado de sus ventajas y desventajas. De hecho, los blogueros sienten que no pueden decir qué componente es mejor. La clave depende de la ecología a la que se adapte el proyecto. Gran parte de la razón por la que elegir reaccionar es porque tenemos ant.design elegante, el efecto y la rica biblioteca de componentes. De acuerdo, estoy fuera de tema y hablaré más sobre ello cuando los blogueros compartan el entorno de front-end.
1. Dirección de código abierto del componente y descripción de la API dirección de código abierto
bootstrap-select: https://github.com/silviomoreto/bootstrap-select
ejemplo de uso de bootstrap-select: http://silviomoreto.github.io/bootstrap-select/examples /
bootstrap -Seleccione la descripción del documento: http://silviomoreto.github.io/bootstrap-select/options/
2. Ejemplos de efectos de componentes a
primera vista,
efectos de selección múltiple
Función de búsqueda configurable
Selección de grupo
Configurar hasta 2 elementos seleccionados
Personalizar el título, por ejemplo, lo definimos como "Seleccione una provincia" En
algunos casos, si el número de selecciones múltiples es relativamente grande, podemos mostrar el "Modo de acceso directo". Por ejemplo, cuando se seleccionan dos o más
Estilo personalizado
Mostrar iconos y texto
Mostrar etiquetas de colores
Expandir para mostrar el número máximo de elementos configurables, es mejor mostrar hasta 3 elementos
Seleccionar todo e invertir
Las anteriores son algunas de las funciones más utilizadas, ¡y se pueden ver más efectos en ejemplos oficiales!
Tres, usa ejemplos
1. Ejemplo básico
Dado que es bootstrap-select, el componente debe depender de bootstrap y bootstrap depende de jquery, por lo que se debe hacer referencia a los siguientes archivos para usar el componente.
<link href="Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="Content/jquery-1.9.1.min.js"></script>
<script src="Content/bootstrap/js/bootstrap.min.js"></script>
<script src="Content/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="Content/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>
El último archivo, defaults-zh_CN.min.js, no es necesario y solo se debe hacer referencia a él cuando se cultiva en el componente.
Es incluso más simple de usar, sin ningún js existente, puede inicializarlo directamente usando la clase.
<select class="selectpicker">
<option value="1">广东省</option>
<option value="2">广西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山东省</option>
</select>
Simplemente agregue el estilo de selector de selección a una etiqueta de selección.
No es necesario decir más de una opción
<select class="selectpicker" multiple>
<option value="1">广东省</option>
<option value="2">广西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山东省</option>
</select>
2. Ejemplos de otros efectos
Lo anterior es la forma más fácil de usar. A continuación, se proporcionan algunos efectos de uso común como ejemplos de código. Los expertos deben omitir esta sección.
Agregar función de búsqueda a componentes
<select class="selectpicker" multiple data-live-search="true">
<option value="1">广东省</option>
<option value="2">广西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山东省</option>
</select>
Agrupación de opciones
<select class="form-control selectpicker" data-live-search="true" multiple>
<optgroup label="广东省">
<option value="1">广州市</option>
<option value="2">深圳市</option>
<option value="3">珠海市</option>
</optgroup>
<optgroup label="广西">
<option value="1">南宁市</option>
<option value="2">柳州</option>
<option value="3">桂林市</option>
</optgroup>
<optgroup label="山东">
<option value="1">烟台</option>
<option value="2">青岛</option>
<option value="3">济南</option>
</optgroup>
</select>
Configurar hasta 2 elementos seleccionados
<select class="selectpicker" multiple data-live-search="true" data-max-options="2">
<option value="1">广东省</option>
<option value="2">广西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山东省</option>
</select>
Modo abreviado, por ejemplo, cuando el valor seleccionado es mayor que 3, solo se muestra el número de elementos seleccionados. Tenga en cuenta que este atributo solo es válido para selecciones múltiples
<select class="selectpicker" multiple data-live-search="true" data-selected-text-format="count > 3">
<option value="1">广东省</option>
<option value="2">广西省</option>
<option value="3">福建省</option>
<option value="4">湖南省</option>
<option value="5">山东省</option>
</select>
Mostrar etiquetas de colores
<select class="form-control selectpicker" title="请选择省份" multiple>
<option data-content="<span class='label label-success'>广东省</span>">广东省</option>
<option data-content="<span class='label label-info'>广西省</span>">广西省</option>
<option data-content="<span class='label label-warning'>福建省</span>">福建省</option>
<option data-content="<span class='label label-danger'>山东省</span>">山东省</option>
</select>
Selección de estilo predeterminado
<select class="selectpicker" data-style="btn-primary">
...
</select>
<select class="selectpicker" data-style="btn-info">
...
</select>
<select class="selectpicker" data-style="btn-success">
...
</select>
<select class="selectpicker" data-style="btn-warning">
...
</select>
<select class="selectpicker" data-style="btn-danger">
...
</select>
3. Asignación de valor de componente
Lo anterior son algunas cosas para la inicialización del componente. En general, necesitamos obtener y asignar valores al componente. ¿Cómo debemos operarlo?
3.1, valor del componente
Respecto al valor del componente manteniendo el método jquery original, como var value = $ ('# sel'). Val (); ¿Es esto muy simple? Cabe señalar que si se trata de selección múltiple, la variable valor obtenida aquí es una matriz Variable, como ['1', '2', '3'].
3.2, asignación de componentes
La asignación del componente debe cambiarse ligeramente. Si directamente $ ('# sel'). Val ('1'), la asignación no será válida. El método de asignación correcto es:
$ ('. selectpicker'). selectpicker ('val', '1');
En algunos escenarios de uso de selección en cascada, a menudo es necesario activar el evento de cambio del componente al asignar un valor.
$ ('. selectpicker'). selectpicker ('val', '1'). trigger ("cambiar");
Si es una asignación de opción múltiple, lo mismo es cierto.
$ ('. selectpicker'). selectpicker ('val', ['1', '2', '3']). trigger (“cambiar”);
4. Otro uso de componentes
Seleccionar todo: $ ('. Selectpicker'). Selectpicker ('selectAll');
Invertir selección: $ ('. Selectpicker'). Selectpicker ('deselectAll');
Adaptarse al modo de teléfono móvil: $ ('. Selectpicker'). selectpicker ('móvil');
Componente deshabilitado:
$ ('. disable-example'). prop ('desactivado', verdadero);
$ ('. disable-example'). selectpicker ('actualizar');
Activación de componentes:
$ ('. disable-example'). prop ('desactivado', falso);
$ ('. disable-example'). selectpicker ('actualizar');
Destrucción de componentes:
$ ('. selectpicker'). selectpicker ('destruir');
5. Embalaje de componentes
Hay tantas introducciones sobre la inicialización de los componentes anteriores, todos los cuales se inicializan a través de class = 'selectpicker'. En muchos casos, las opciones de nuestra selección se obtienen dinámicamente y luego se inicializan, por lo que el blogger busca cuidadosamente la api, consulte si hay acceso remoto a los datos en él. Desafortunadamente, el componente no es compatible con este método de acceso remoto a los datos. No importa, ¿qué tan difícil es encapsular una solicitud ajax por nosotros mismos y luego construir dinámicamente la opción? Aquí tengo que mencionar el artículo original sobre encapsular componentes js, solo necesitamos encapsular uno de acuerdo con la idea de ese artículo. A continuación se proporciona una referencia.
(function ($) {
//1.定义jquery的扩展方法bootstrapSelect
$.fn.bootstrapSelect = function (options, param) {
if (typeof options == 'string') {
return $.fn.bootstrapSelect.methods[options](this, param);
}
//2.将调用时候传过来的参数和default参数合并
options = $.extend({}, $.fn.bootstrapSelect.defaults, options || {});
//3.添加默认值
var target = $(this);
if (!target.hasClass("selectpicker")) target.addClass("selectpicker");
target.attr('valuefield', options.valueField);
target.attr('textfield', options.textField);
target.empty();
var option = $('<option></option>');
option.attr('value', '');
option.text(options.placeholder);
target.append(option);
//4.判断用户传过来的参数列表里面是否包含数据data数据集，如果包含，不用发ajax从后台取，否则否送ajax从后台取数据
if (options.data) {
init(target, options.data);
}
else {
//var param = {};
options.onBeforeLoad.call(target, options.param);
if (!options.url) return;
$.getJSON(options.url, options.param, function (data) {
init(target, data);
});
}
function init(target, data) {
$.each(data, function (i, item) {
var option = $('<option></option>');
option.attr('value', item[options.valueField]);
option.text(item[options.textField]);
target.append(option);
});
options.onLoadSuccess.call(target);
}
target.unbind("change");
target.on("change", function (e) {
if (options.onChange)
return options.onChange(target.val());
});
}
//5.如果传过来的是字符串，代表调用方法。
$.fn.bootstrapSelect.methods = {
getValue: function (jq) {
return jq.val();
},
setValue: function (jq, param) {
jq.val(param);
},
load: function (jq, url) {
$.getJSON(url, function (data) {
jq.empty();
var option = $('<option></option>');
option.attr('value', '');
option.text('请选择');
jq.append(option);
$.each(data, function (i, item) {
var option = $('<option></option>');
option.attr('value', item[jq.attr('valuefield')]);
option.text(item[jq.attr('textfield')]);
jq.append(option);
});
});
}
};
//6.默认参数列表
$.fn.bootstrapSelect.defaults = {
url: null,
param: null,
data: null,
valueField: 'value',
textField: 'text',
placeholder: '请选择',
};
//初始化
$(".selectpicker").each(function () {
var target = $(this);
target.attr("title", $.fn.select.defaults.placeholder);
target.selectpicker();
});
})(jQuery);
Después de esta encapsulación, podemos usar directamente el siguiente código para inicializar el componente.
$('#sel').bootstrapSelect({
url:'/a/b',
data: {},
valueField: 'value',
textField: 'text',
});
Cuatro, resumen
En este punto, este artículo ha terminado. Mirando todos los componentes seleccionados de bootstrap, este es un poco más fácil de usar. Tanto los efectos de compatibilidad como de implementación no son malos. Si está interesado, puede probarlo.
Seis, los problemas encontrados
1. El problema encontrado al usar este control en el proyecto 1: Úselo en la pestaña de la pestaña, inicialice la primera pestaña para tener un cuadro desplegable, y no hay
razón para las otras pestañas : porque solo hay un ID de elemento , y cada pestaña está debajo Hay un elemento de cuadro desplegable, y la identificación es única, por lo que al inicializar, los siguientes elementos no se pueden seleccionar.
Solución: Dar una identificación o clase diferente, inicializar: $ ('# selectContacts0' ) .selectpicker ();
2. El segundo problema encontrado al usar este espacio en el proyecto: Al hacer clic en cada pestaña, el estado seleccionado de la pestaña anterior siempre se conserva.
Razón: Cuando se hace clic en cada pestaña, la casilla de verificación debajo de la pestaña actual La pestaña debe estar limpia y
Solución de inicialización : Cuando haga clic en cada pestaña, ejecute:
$ (". selectpicker"). selectpicker ('val', ''); // Regrese al estado inicial
$ (". selectpicker). selectpicker ('actualizar');
3. Tres problemas encontrados al usar este espacio en el proyecto: selección de una tecla y selección inversa de una tecla (la pantalla de función incorporada está en inglés, puede cambiar manualmente el chino usted mismo);
solución: agregue datos-acciones en el cuadro de selección múltiple El atributo -box = "true" es la función de selección inversa. Use jquery para seleccionar el elemento de selección inversa y asigne manualmente el valor al chino
