En el artículo anterior, el resumen de la experiencia del marco de desarrollo basado en el procesamiento de paginación de la lista de Bootstrap Metronic [II] y el uso de Jstree enchufable, se introdujo el procesamiento de la paginación de datos, se utilizó el complemento Paginator Bootstrap y se utilizó la lista de árboles, se usó el enchufe Jstree. Este artículo continúa introduciendo el control Select2 comúnmente utilizado en la página Editar. Este control puede enriquecer el control tradicional de la lista desplegable seleccionar, proporcionando más funciones y una mejor experiencia de usuario.
1. Introducción al control Select2
Este complemento es un complemento de extensión basado en Select, que puede proporcionar funciones más ricas y experiencia del usuario. Su dirección oficial del sitio web de GitHub es: https://select2.github.io/. Para casos de uso específicos, consulte la dirección: https://select2.github.io/examples.html.
En todo el marco, hemos utilizado muchos controles Select2 para manejar la visualización de contenido, incluida una lista desplegable de selección única (incluido un cuadro de selección en cascada), una lista desplegable seleccionada, una lista desplegable de árbol, etc. El efecto de la interfaz es el siguiente.
1) El efecto de la interfaz en cascada de las provincias, ciudades y regiones administrativas bajo la interfaz de edición . Si selecciona una provincia, se cargará la ciudad bajo la provincia correspondiente. Si selecciona una ciudad, las regiones administrativas bajo la ciudad continuarán cargándose, logrando así el efecto de lista desplegable de la correlación de niveles múltiples.
2) Lista desplegable de selección múltiple en la interfaz de edición
Pero cuando seleccionamos el contenido, el sistema mostrará automáticamente los datos de la lista sin selección, lo cual es muy intuitivo y amigable, como se muestra a continuación.
3) Lista desplegable de la lista de árboles
A veces, algunos de nuestros datos pueden tener relaciones jerárquicas, como la organización, la lista de nivel superior, etc.
2. Análisis del código de uso real del control SELECT2
1) Código de interfaz básico y operación
Use el control SELECT2, generalmente en el control de selección regular, solo configúrelo (configure su clase en select2).
<Div> <Viv> <label> nivel importante </label> <div> <select id = "importancia" name = "importancia" de poseedor = "importancia ..."> </elect> </div> </div> </div> <div> <div> <belebelebel> reconocimiento </selabel> <div> <select id = "reconocimiento" name = "reconocimiento" reconocedor = "reconocimiento ..." "</select> </diviv> <viv divivin> <iven diviv> <viv> <iven diviv> <viv> <viv> <viv> <viven> <Viv diviv> <viv> Diven
Si es una lista fija, entonces solo establece su contenido de opción, como se muestra a continuación.
<Div> <Viv> <label> Smoking </label> <div> <select id = "Smoking" name = "Smoking" type = "text" PlaceHolder = "Smoking ..."> <pection> Smoking </option> <Option> No fume </opción> </select> </div> </div> </div> </div>
El simple código de inicialización de control Select2 es el siguiente.
$ (documento) .Ready (function () {$ (".En términos generales, si se permite seleccionar varios elementos, entonces configure múltiples = "múltiples" como se muestra en el siguiente código.
<Select id = "Responsedemand" name = "Responsedemand" múltiple = "múltiple"> </select>
2) Operación de enlace de datos asíncronos
En términos generales, los datos de nuestro control seleccionado se cargan dinámicamente desde la base de datos, por lo que los datos generalmente se obtienen y se unen a través de AJAX.
Según la consideración de la reutilización del código, escribimos una función JS común para reducir el código de operaciones vinculantes y mejorar la reutilización del código.
// Binde el contenido del diccionario a la función de control Select especificada BindSelect (CtrlName, URL) {var control = $ ('#' + ctrlname); // Establecer el control de procesamiento de Select2 // Binde el contenido de Ajax $ .getJson (url, function (data) {control.empty (); // borrar el cuadro desplegable $ .each (data, function (i, item) {control.append ("<opción valor = '" + item.value + "'>" + item.text + "</ppection>");});}); });De esta manera, los datos vinculados al módulo de diccionario público pueden encapsularse y procesarse aún más de la siguiente manera.
// Binde el contenido del diccionario a la función de control especificada BindDictem (ctrlName, dictypeName) {var url = '/dictData/getDictjson? DictypeName =' + encodeuri (dictypeName); Bindselect (ctrlname, url);}De esta manera, inicializamos el control SELECT2 y vinculamos dinámicamente el valor del diccionario u otros datos correspondientes. Esto se puede lograr a través del siguiente código de inicialización. Entre ellos, BindEdtitem es la operación que une directamente el contenido del diccionario, BindSelect es la operación que obtiene y une datos basados en la URL, y $ ("#Provincia"). On ("Cambio", función (e) {}); es el funcionamiento del procesamiento de funciones como $ ("#provincia"). on ("cambio", función (e) {}); Maneja la operación de enlace que maneja los cambios en el contenido seleccionado.
// Inicializar información del diccionario (lista desplegable) Función initDictItem () {// Segunda referencia de asignación BindDictem ("Área", "Partición del mercado"); BindDictive ("Industria", "Industria al cliente"); BindDictem ("grado", "nivel de cliente"); BindDictem ("CustomerType", "Tipo de cliente"); BindDictem ("fuente", "fuente del cliente"); BindDictem ("CreditStatus", "Calificación crediticia"); BindDictem ("etapa", "etapa del cliente"); BindDictem ("estado", "estado del cliente"); BindDictem ("importancia", "nivel de importancia"); // Bind Province, City y Administrative Region (Procesamiento de enlaces) BindSelect ("Provincia", "/Provincia/GetAllProvincenamedictjson"); $ ("#Provincia"). On ("cambio", función (e) {var provinceName = $ ("#provincia"). Val (); bindselect ("ciudad", "/ciudad/getcitysbyprovincenamedictjson? Provincename ="+ provincename);}); $ ("#City"). On ("Change", function (e) {var cityName = $ ("#city"). Val (); bindselect ("distrito", "/distrito/getDistrictByCityNamedictjson? CityName ="+ CityName);}); }En cuanto a los datos devueltos por el controlador MVC, devolvemos una lista de datos JSON a la página de front-end, y su formato de datos es el siguiente.
[{"Texto": "", "valor": ""}, {"texto": "conferencia académica", "valor": "conferencia académica"}, {"texto": "introducción de amigos", "valor": "introducción de amigos"}, {"texto": "medios de anuncio", "valor": "medios de anuncios"}}De esta manera, cuando la página frontal une el control SELECT2, se utilizan las propiedades del objeto JSON.
// Binde el contenido de Ajax $ .getJson (url, function (data) {control.empty (); // borrar el cuadro desplegable $ .each (data, function (i, item) {control.append ("<opción valor = '" + item.value + "'>" + item.text + "</ppection>");});});El código de implementación del controlador es el siguiente:
//// <summary> /// Obtenga los datos del diccionario correspondientes de acuerdo con el tipo de diccionario para facilitar la unión de los controles de ui //// </summary> /// <param name = "dictypename"> name de tipo de diccionario </param> /// <<churnsurns> public ActionResult Getdictjson (string string DictTypename) Lista <CLISTITEM> (); Clistitem pnode = new Clistitem ("", ""); treelist.insert (0, pnode); Diccionario <String, String> Dict = BllFactory <SiCtData> .instance.getDictbyDicttype (dictypename); foreach (clave de cadena en dict.keys) {treeList.add (new Clistitem (clave, dict [clave])); } return tojsonContent (treeList); }3) Operación vinculante de la lista de árboles
Para las listas de atributos, como los datos jerárquicos de sus empresas, departamentos e instituciones afiliadas, sus operaciones vinculantes también son similares, como se muestra en el siguiente código.
// bindSelect ("Company_id", "/user/getMyCompanyDicTjson? UserId ="+@Session ["UserId"]); $ ("#Company_id"). On ("Change", Function (E) {var CompanyId = $ ("#Company_id"). Val (); BindSelect ("Dept_id", "/User/GetDeptDictjson? ParentId ="+ CompanyId);}); $ ("#Dept_id"). On ("Change", function (e) {var dePTID = $ ("#de departamento"). Val (); bindselect ("pid", "/user/getUserDictjson? DePTID ="+ dePTID);});Son solo los datos que devuelven, solo los usamos como contenido de visualización de sangría.
[{"Texto": "Grupo Iqidi", "Valor": "1"}, {"Text": "Guangzhou Branch", "Valor": "3"}, {"Texto": "Branch de Shanghai", "Valor": "4" ", {" Texto ":" Beijing Branch "," Valor ":" 5 "}]O como se muestra a continuación
[{"Texto": "rama de guangzhou", "valor": "3"}, {"texto": "oficina del gerente general", "valor": "6"}, {"text": "departamento financiero", "valor": "7"}, {"text": "departamento de ingeniería", "valor": "8"}, {"text": "producto r & d de departamento", "valor", "9" 9 "9". "Text": "Develop a Group", "Value": "14" }, { "Text": "Develop a Group 2", "Value": "15" }, { "Text": "Test Group 2", "Value": "15" }, { "Text": "Test Group 2", "Value": "16" }, { "Text": "Market Department", "Value": "10" }, { "Text": "Market Department 1 "," Valor ":" 23 "}, {" Texto ":" Departamento de mercado 2 "," Valor ":" 24 "}, {" Texto ":" Departamento integral "," Valor ":" 11 "}, {" Texto ":" Departamento de producción "," Valor ":" 12 "}, {" Texto ":" Departamento de recursos humanos "," Valor ":" 13 ""}}}}}}}]Para resumir las dos partes anteriores, podemos ver que el contenido de su texto es aumentar los espacios de acuerdo con la relación jerárquica, dando así la visualización de la relación jerárquica.
Sin embargo, en términos del efecto de la interfaz, este procesamiento no es tan bueno como la visualización del árbol de lista desplegable en EasyUi. Quizás se pueda usar un mejor complemento de Bootstrap para mostrar este contenido en forma de árbol.
4) Procesamiento de asignación del control SELECT2
Los métodos introducidos anteriormente se tratan de inicializar el control SELECT2 y los datos relacionados con la unión. Entonces, si vinculamos el valor de la interfaz de edición después de inicializar la interfaz, debemos asignar el valor al control para permitirle mostrar los elementos que realmente deben mostrarse.
El método para borrar el control es el siguiente.
// Borrar el valor del control select2 $ ("#pid"). Select2 ("val", ""); $ ("#Company_id"). Select2 ("Val", ""); $ ("#Dept_id"). Select2 ("Val", "");Si se deben borrar múltiples controles, puede usar la colección para procesarla
var select2ctrl = ["área", "industria", "grado", "customerType", "fuente", "creditStatus", "etapa", "estado", "importancia"]; $ .each (select2ctrl, function (i, item) {var ctrl = $ ("#" + item); ctrl.select2 ("val", "");});Asigne un valor al control SELECT2 para mostrar los elementos con el contenido de valor correspondiente, y la operación será similar a la anterior.
$ ("#CustomerType"). Select2 ("Val", info.customerType); $ ("#Grado"). Select2 ("Val", info.grade); $ ("#CreditStatus"). Select2 ("Val", Info.CreditStatus); $ ("#Importancia"). Select2 ("Val", Info.ispublic);Si necesita mostrarlo de una manera en cascada, agregue un procesamiento de la función Onchange, como sigue el procesamiento de asignación del siguiente código en cascada.
$ ("#Provincia"). Select2 ("val", info.province) .trigger ('cambio'); // enlace $ ("#city"). Select2 ("val", info.city) .trigger ('cambio'); // enlace $ ("#distrito"). Select2 ("val", info.district); $ ("#Company_id1"). SELECT2 ("Val", info.comPany_id) .trigger ('Change'); $ ("#Dept_id1"). SELECT2 ("Val", info.dept_id) .Tirger ('Change'); $ ("#Pid1"). Select2 ("Val", info.pid);Finalmente, hay dos efectos de interfaz integrados para referencia.
Lo anterior es el resumen de la experiencia del marco de desarrollo metrónico de Bootstrap basado en la lista desplegable [tres] del contenido relevante del uso del complemento SELECT2. Espero que sea útil para todos. Si desea saber más información, ¡preste atención al sitio web de Wulin.com!