No artigo anterior, o resumo da experiência da estrutura de desenvolvimento baseado no processamento de paginação Metronic [II] da List [II] e o uso do plug-in JSTee, o processamento da paginação de dados foi introduzido, foi utilizado o plug-in de paginador de bootstrap e foi utilizado o plug-in jSTEE. Este artigo continua a introduzir o controle de controle comumente usado2 na página de edição. Esse controle pode enriquecer o controle de lista suspensa tradicional selecionado, fornecendo mais funções e uma melhor experiência do usuário.
1. Introdução ao Select2 Control
Este plug-in é um plug-in de extensão com base no Select, que pode fornecer funções mais ricas e experiência do usuário. O endereço oficial do site do Github é: https://select2.github.io/. Para casos de uso específicos, consulte o endereço: https://select2.github.io/examples.html.
Em toda a estrutura, usamos muitos controles Select2 para lidar com a exibição de conteúdo, incluindo uma lista suspensa de seleção única (incluindo uma caixa de seleção em cascata), uma lista suspensa selecionada, uma lista suspensa de árvore etc. O efeito da interface é o seguinte.
1) O efeito da interface em cascata de províncias, cidades e regiões administrativas na interface de edição . Se você selecionar uma província, a cidade sob a província correspondente será carregada. Se você selecionar uma cidade, as regiões administrativas da cidade continuarão a carregar, alcançando assim o efeito da lista suspensa da correlação multinível.
2) Lista suspensa de seleção múltipla na interface de edição
Mas quando selecionamos o conteúdo, o sistema exibirá automaticamente os dados da lista sem seleção, o que é muito intuitivo e amigável, como mostrado abaixo.
3) Lista suspensa da lista de árvores
Às vezes, alguns de nossos dados podem ter relacionamentos hierárquicos, como a organização, a lista de nível superior, etc.
2. Análise do código de uso real do Select2 Control
1) Código e operação básicos da interface
Use o controle Select2, geralmente no controle de seleção regular, basta defini -lo (defina sua classe como selecionada2).
<div> <div> <breting> Nível importante </elabel> <div> <select id = "importância" name = "importância" placeholder = "importância ..."> </leclect> </div> </div> </div> <div> <div> <belt> reconhecimento <leck> </bel> <div> <select Id = "reconhecimento" Nome = "Reconhecion" Placeolder = "
Se for uma lista fixa, será apenas definido seu conteúdo de opção, como mostrado abaixo.
<div> <div> <breting> fumando </crety> <div> <select id = "fumando" name = "fumando" tipo = "text" placeholder = "fumando ..."> <pution> fumando </pption> <pution> não fuma </pption> </leclect> </div> </div> </div>
O código de inicialização simples de controle Select2 é o seguinte.
$ (document) .ready (function () {$ (".De um modo geral, se vários itens puderem ser selecionados, defina múltiplo = "múltiplo", como mostrado no código a seguir.
<select id = "Responsedemand" name = "Responsedemand" múltiplo = "múltiplo"> </leclect>
2) operação de ligação de dados assíncronos
De um modo geral, os dados de nosso controle de seleção são carregados dinamicamente no banco de dados, para que os dados sejam geralmente obtidos e ligados através do AJAX.
Com base na consideração da reutilização de código, escrevemos uma função JS comum para reduzir o código das operações de ligação e melhorar a reutilização do código.
// vinte o conteúdo do dicionário à função de controle de seleção especificada BindSelect (CtrlName, URL) {var Control = $ ('#' + CtrlName); // set Select2 Control de processamento.Select2 ({allowClear: true, formatResult: formatResult, formatSelection: formatSelection, escapeMarkup: function (m) {return m;}}); // vincula o conteúdo de ajax $ .getjson (url, function (dados) {control.empty (); // limpe a caixa suspensa $ .ECH (Data, function (i, item) {control.append ("<opção value = '" + item.value + "'>" + item.text + "</option>");}); });Dessa forma, os dados vinculados ao módulo de dicionário público podem ser mais encapsulados e processados da seguinte forma.
// liga o conteúdo do dicionário à função de controle especificada bindDictiTem (ctrlName, dicttypeName) {var url = '/dictData/getDictjson? BindSelect (CtrlName, URL);}Dessa maneira, inicializamos o controle Select2 e ligamos dinamicamente o valor do dicionário correspondente ou outros dados. Isso pode ser alcançado através do seguinte código de inicialização. Entre eles, o BindDictItem é a operação que liga diretamente o conteúdo do dicionário, o BindSelect é a operação que obtém e vincula dados com base no URL e $ ("#Província"). ON ("alteração", função (e) {}); é a operação do processamento de funções, como $ ("#província"). Lida com a operação de ligação que lida com as alterações no conteúdo selecionado.
// Inicialize informações sobre o dicionário (lista suspensa) Função initDicTItem () {// Segunda atribuição de referência BindDictItem ("área", "Partição de mercado"); BindDictItem ("Indústria", "Indústria do Cliente"); BindDictItem ("grau", "nível do cliente"); BindDictItem ("CustomerType", "Tipo de cliente"); BindDictItem ("fonte", "fonte do cliente"); BindDictItem ("CreditStatus", "Classificação de crédito"); BindDictItem ("estágio", "estágio do cliente"); BindDictItem ("status", "status do cliente"); BindDictItem ("importância", "nível de importância"); // Bind Província, Cidade e Região Administrativa (Processamento de Link) BindSelect ("Província", "Província/GetAllProvincenamedictjson"); $ ("#Província"). ON ("Mudança", função (e) {var ProvinceName = $ ("#Província"). $ ("#City"). On ("alteração", função (e) {var cityName = $ ("#city"). }Quanto aos dados retornados pelo controlador MVC, retornamos uma lista de dados JSON à página front-end e seu formato de dados é o seguinte.
[{"Text": "", "Value": ""}, {"text": "Academic Conference", "Value": "Academic Conference"}, {"Text": "Friend Introdução", "Valor": "Amigo Introdução"}, {"Text": "Advertising Media", "Valor": "Publision Media"}]Dessa forma, quando a página front-end vincula o controle Select2, as propriedades do objeto JSON são usadas.
// vincula o conteúdo de ajax $ .getjson (url, function (dados) {control.empty (); // limpe a caixa suspensa $ .ECH (Data, function (i, item) {control.append ("<opção value = '" + item.value + "'>" + item.text + "</option>");});O código de implementação do controlador é o seguinte:
/// <summary> /// Obtenha os dados do dicionário correspondentes de acordo com o tipo de dicionário para facilitar a ligação de controles da interface do usuário /// </summary> /// <param name = "dicttypename"> dictionary name </param> // <retorno> </returns> Lista <ClistItem> (); Clistitem pnode = new Clistitem ("", ""); Treelist.insert (0, pnode); Dicionário <string, string> dict = bllFactory <dictData> .instance.getDictByDictType (dicttypeName); foreach (chave de string em dict.keys) {treelist.add (new Clistitem (chave, dict [key])); } retornar parajsonContent (Treelist); }3) Operação de ligação da lista de árvores
Para listas de atributos, como dados hierárquicos de suas empresas, departamentos e instituições afiliados, suas operações vinculativas também são semelhantes, como mostrado no código a seguir.
// bindSelect ("Company_id", "/User/getMyCompanyDictjson? UserId ="+@session ["UserID"]); $ ("#Company_Id"). $ ("#Dept_id"). On ("alteração", function (e) {var deptId = $ ("#dept_id").São apenas os dados que eles retornam, apenas o usamos como conteúdo de exibição recuado.
[ { "Text": "iqidi Group", "Value": "1" }, { "Text": "Guangzhou Branch", "Value": "3" }, { "Text": "Shanghai Branch", "Value": "4" }, { "Text": "Beijing Branch", "Value": "5" } ]Ou como mostrado abaixo
[ { "Text": "Guangzhou Branch", "Value": "3" }, { "Text": "General Manager's Office", "Value": "6" }, { "Text": "Financial Department", "Value": "7" }, { "Text": "Engineering Department", "Value": "8" }, { "Text": "Product R&D Department", "Value": "9" }, { "Texto": "Desenvolver um grupo", "Valor": "14"}, {"text": "Desenvolver um grupo 2", "valor": "15"}, {"text": "Test Group 2", "Value": "15"}, {"text": "Test Group 2," Value ":" 16 "}, {" "": "Text": "Test Group 2," Value ":" 16 "}, {" "": "" ":" Testes ":" Test Group 2, "Value": "16"}, {{"": "" ":" Text ":" Test Group 2, "Value": "16"}, {"" ":" departamento "": "Marketing 2", "" 16: "16"} "{" departamento ":" 1 "," Value ":" 23 "}, {" text ":" Departamento de Mercado 2 "," Valor ":" 24 "}, {" text ":" Departamento Abrangente "," Valor ":" 11 "}, {" Texto ":" Departamento de Produção "" ":" 12 "}," "Text": "Departamento de Recursos Humanos", "" "13:" ":" 12 "}," "Text": "Human Department" "" 13: "Value": "12"}, "" ":" Departamento de Recursos Humanos "," "Para resumir as duas partes acima, podemos ver que o conteúdo de seu texto é aumentar os espaços de acordo com o relacionamento hierárquico, percebendo assim a exibição do relacionamento hierárquico.
No entanto, em termos do efeito da interface, esse processamento não é realmente tão bom quanto a exibição da árvore da lista suspensa em Easyui. Talvez um plug-in melhor de bootstrap possa ser usado para exibir esse conteúdo em forma de árvore.
4) Processamento de atribuição de controle Select2
Os métodos introduzidos acima são sobre a inicialização dos dados relacionados ao controle e vinculação do Select2. Portanto, se vincularmos o valor da interface de edição após a inicialização da interface, precisamos atribuir o valor ao controle para deixá -lo exibir os itens que realmente precisam ser exibidos.
O método de limpeza do controle é o seguinte.
// Limpe o valor do controle Select2 $ ("#pid"). Select2 ("val", ""); $ ("#Company_id"). Select2 ("val", ""); $ ("#Dept_id"). Select2 ("val", "");Se vários controles precisarem ser liberados, você pode usar a coleção para processá -la
var select2Ctrl = ["Area", "Industry", "Grade", "CustomerType", "Source", "CreditStatus", "Stage", "Status", "importância"]; $ .ECH (select2Ctrl, function (i, item) {var ctrl = $ ("#" + item); ctrl.select2 ("val", "");});Atribua um valor ao controle Select2 para exibir os itens com o conteúdo do valor correspondente e a operação será semelhante ao acima.
$ ("#CustomerType"). Select2 ("val", info.customerType); $ ("#GRADE"). Select2 ("val", info.grade); $ ("#CreditStatus"). Select2 ("val", info.creditstatus); $ ("#Importância"). Select2 ("val", info.ispublic);Se você precisar exibi -lo de uma maneira em cascata, adicione um processamento de função de onChange, como segue o processamento de atribuição do seguinte código em cascata.
$ ("#Província"). Select2 ("val", info.province) .trigger ('alteração'); // link $ ("#city"). Select2 ("val", info.city) .trigger ('alteração'); // link $ ("#distrito"). Select2 ("Val", info.district); $ ("#Company_id1"). Select2 ("val", info.company_id) .trigger ('alteração'); $ ("#Dept_id1"). Select2 ("val", info.dept_id) .trigger ('alteração'); $ ("#Pid1"). Select2 ("val", info.pid);Finalmente, existem dois efeitos de interface integrados para referência.
O exposto acima é o resumo da experiência da estrutura de desenvolvimento metrônico de Bootstrap com base na lista suspensa [três] do conteúdo relevante do uso do plug-in SELElect2. Espero que seja útil para todos. Se você quiser saber mais informações, preste atenção ao site wulin.com!