Prefácio: Quando introduzi o componente inicializável antes, mencionei sua função de edição em linha, mas com o objetivo de exibir a função, assumi isso e disse que é um pecado! Recentemente, ainda pretendo usar a edição em linha no projeto, por isso estudei o componente X-Comtable novamente. Eu encontrei algumas armadilhas, então vamos gravar os poços aqui! Amigos que desejam saber sobre o Bootstraptable podem passar para a série de componentes JS - Artefato de componente da tabela: Tabela de bootstrap.
1. Introdução ao componente X-editável
O componente X-Editável é um plug-in para criar caixas pop-up editáveis. Ele suporta três estilos: Bootstrap, JQuery UI e JQuery. O efeito geral é o seguinte:
De acordo com o estilo usual do blogueiro, o primeiro deve ser escolhido aqui. Primeiro, dê o endereço de código aberto.
Endereço de código aberto do X-Editável: https://github.com/vitalets/x-editable
Endereço do documento X-Editável: http://vitalets.github.io/x-editable/docs.html
Demoção on-line X-EDIBILÍVEL: http://vitalets.github.io/x-editable/demo-bs3.html
1. Primeira experiência do X-Editável
Primeiro baixe o código -fonte com base no bootstrap na área local. Referências a arquivos relevantes.
<link href = "/Content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <link href = "~/content/bootstrap3-editable/css/bootstrap-editable.css" rel = "Stylesheet"/> <script src = "/scripts/jQuery-1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js"> </script> <script src = "~/content/bootstrap3-Editable/js/bootstrap-Ed.
Elementos da página
Copie o código da seguinte forma: <a href = "#" id = "nome de usuário" data-type = "text" data-title = "userName"> nome de usuário </a>
JS Inicialização
$ (function () {$ ('#nome de usuário'). editable ();});Exibição de efeito
O exposto acima é definir os parâmetros X-editalizados através do atributo de dados HTML. Obviamente, também posso definir os parâmetros durante a inicialização. Por exemplo, eu apenas dou uma etiqueta vazia: <a href = "#" id = "nome de usuário"> nome de usuário </a>
JS Inicialização
$(function () { $('#username').editable({ type: "text", //The type of the edit box. Support text|textarea|select|date|checklist and other titles: "Username", //The title of the edit box was disabled: false, //Doess edit emptytext: "empty text", //Default text mode of empty value: "inline", //The mode of edit box: Suporta o modo pop -up e embutido, o padrão é Pop -Up Validate: function (valor) {// Verificação de campo se (! $. Trim (valor)) {return 'não pode ser vazio';Veja o efeito
Vamos ter um um pouco mais complicado
<a href = "#" id = "departamento"> selecione Departamento </a>
$(function () { $('#department').editable({ type: "select", //The type of editing box. Support text|textarea|select|date|checklist and other sources: [{ value: 1, text: "Development Department" }, { value: 2, text: "Sales Department" }, { value: 2, text: "Sales Department" }, { value: 3, text: "Administrative Department"}], Título: "Selecione Departamento", // O título da caixa de edição desativado: false, // Não desative a edição em vazio: "Texto vazio", // O modo de texto padrão do valor vazio: "pop -up", // o modo de edição da caixa de edição: POP -UP -UP -UM; });Veja o efeito
O artigo acima fornece apenas alguns campos comumente usados. Obviamente, o componente X-editável possui muitos outros parâmetros funcionais. Se você estiver interessado, pode verificar a documentação. A documentação oficial possui descrições detalhadas para cada parâmetro.
2. Plano inicial inicial para editar em linha
Depois de conversar por um longo tempo, o exposto acima é apenas um prelúdio. Por fim, esperamos implementar a edição em linha no Bootstraptable. De acordo com as regras acima, se quisermos usar o X-Editável para implementar a edição em linha, deve haver uma tag A na célula da tabela e, em seguida, a tag A é inicializada. Com essa ideia, vamos tentar desta maneira primeiro.
Cittar arquivos relacionados
<link href = "/Content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <link href = "~/content/bootstrap3-editable/css/bootstrap-editable.css" rel = "Stylesheet"/> <link href rel = "Stylesheet"/> <script src = "/scripts/jquery-1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js"> </script> <sCript> src = "~/content/bootstrap3-editable/js/bootstrap-editable.js"> </script> <script src = "~/content/bootstrap-table/bootstrap-table.js"> </script> <script src = "/contentRah-strapt-table/localize/bootspl/bootstrap
Inicialização relacionada de bootstraptable
<script type = "text/javascript"> var Currow = {}; $(function () { $("#tb_user").bootstrapTable({ toolbar: "#toolbar", idField: "Id", pagination: true, showRefresh: true, search: true, clickToSelect: true, queryParams: function (param) { return {}; }, url: "/Editable/GetUsers", columns: [{ checkbox: true }, {Field: "UserName", Title: "UserName", Formatter: function (valor, linha, index) {return "<a href =/"#/"name =/" nome de usuário/"data-type =/" text/"data-pk =/" + row.id + "/" title =/")/"> ">"> " "Age",}, {Field: "Birthday", Title: "Birthday", Formatter: function (valor, linha, índice) {var date = Eval ('new' + avaliar (value) .Source) Data de retorno.Format ("AAYYYYY MM MÊS DDD DIA"); ONCLICKROW: function (linha, $ element) {Currow = Row; "EDIT/EDIT", Data: Currow, Datatys: 'JSON', Sucesso: Função (Dados, TextStatus, JQXHR) {alerta (salva -se bem -sucedida! 'Método de back -end
Método de teste de fundo
public jsonResult getUsers () {var lSTres = new List <suser> (); lrass.add (novo user () {id = "1", nome de usuário = "zhang san", idade = 22, aniversário = convert.todateTime ("1994-12-21"), deptid = "1", deptName = "R&D Department"}); lstres.add (new user () {id = "2", nome de usuário = "li si", idade = 28, aniversário = convert.todateTime ("1988-09-09"), deptid = "2", deptName = "departamento de vendas"}); lstres.add (new user () {id = "3", nome de usuário = "luta pelo tio", idade = 40, aniversário = convert.todateTime ("1976-09-01"), deptID = "2", deptname = "departamento de vendas"}); lrass.add (new user () {id = "4", nome de usuário = "Prawn de raios", idade = 37, aniversário = convert.todateTime ("1979-03-12"), DeptId = "4", DeptName = "Creative Department"}); lrass.add (novo user () {id = "5", nome de usuário = "han meimei", idade = 29, aniversário = convert.todateTime ("1987-05-01"), deptID = "5", deptname = "departamento de negócios"}); Return json (LSTES, JSONREQUESTBEHAVIOR.OULLGET); } public jsonResult Edit (usuário do usuário) {// Atualize o retorno após a deserivação json (novo {}, jsonRequestBehavior.allowget); }Isso pode realmente alcançar o efeito desejado, e parece que ele também pode ser editado dentro da linha, mas se não houver colunas que exijam edição dentro da linha e haja muitas colunas, é necessário que cada coluna formate da mesma maneira? E esse tipo de escrita é obviamente rígido, o que é realmente difícil para os blogueiros aceitarem. Então, procurei um exemplo e descobri que o JS Bootstrap-Table-editable.js existe na extensão do Bootstraptable.
3. Plano final de edição inicial
Bem, o blogueiro admite que o exposto acima ainda é um prelúdio, porque o blogueiro acha que essa pode ser uma idéia geral para resolver o problema, portanto a duração desses prelúdios pode ser um pouco demais. Primeiro, vamos dar uma olhada no arquivo de bootstrap-table-editable.js:
/** * @author zhixin wen <[email protected]> * Extensões: https://github.com/vitalets/x-editable */! function ($) {'use strict'; $ .Extend ($. fn.bootstraptable.defaults, {editável: true, oneditableInit: function () {return false;}, oneditablesave: function (campo, linha, OldValue, $ el) {retornar false;}, ONEDITLESHOWN: function (campo, linha, $, editable) {Falsen; retornar false;}}); $ .Extend ($. var bootstraptable = $ .fn.bootstraptable.Constructor, _inittable = bootstraptable.prototype.inittable, _initbody = bootstraptable.prototype.initbody; Bootstraptable.prototype.inittable = function () {var que = this; _inittable.Apply (this, Array.prototype.slice.apply (argumentos)); if (! this.options.editable) {return; } $ .EECH (this.columns, function (i, coluna) {if (! colun.editable) {return;} var _formatter = colun.formatter; column.formatter = function (value, linha, index) {var result = _formatter? _formatter (valuescript,: ndiccr): _burn) {var result = _Fatter? colun.field + '"', 'data-pk ="' + linha [that.options.idfield] + '"', 'data-value ="' + resultado + '"', '>' + '</a>'] .join ('');};}); }; Bootstraptable.prototype.initbody = function () {var que = this; _initbody.apply (this, array.prototype.slice.apply (argumentos)); if (! this.options.editable) {return; } $ .ECH (this.columns, function (i, coluna) {if (! colun.editable) {return;} that. $ body.find ('a [data-name = "' + colun.field + '"]'). editabtil (column.editable). isto) .Parents (TR [Index de dados] ') + '' "] '). Editável (column.editable) .off (' mostrado '). on (' mostrado ', function (e, editável) {var data = that.getData (), index = $ (this) .parents (' trig-shown). }); that.trigger ('editável oculto', column.field, linha, $ (this), razão); this.trigger ('editável init'); };} (jQuery);
Na verdade, esse JS faz um encapsulamento simples de comedidade X, adicionando atributos editáveis de colunas e editando e salvando alguns eventos. Com isso como base, o código que editamos na indústria se tornou assim.
Os arquivos que precisam ser referenciados são os seguintes:
<link href = "/Content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <link href = "~/content/bootstrap3-editable/css/bootstrap-editable.css" rel = "Stylesheet"/> <link href rel = "Stylesheet"/> <script src = "/scripts/jquery-1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js"> </script> <sCript> src = "~/content/bootstrap3-editable/js/bootstrap-editable.js"> </script> <script src = "~/content/bootstrap-table/bootstrap-table.js"> </script> <script src = "/contents-gable.js"> </script> <script src = "/contentS-gable/localize/bootspl/bootspT src = "/Content/bootstrap-table/src =" ~/content/bootstrap-table/extensions/editable/bootstrap-table-editable.js "> </script>
1. Caixa de texto
$(function () { $("#tb_user").bootstrapTable({ toolbar: "#toolbar", idField: "Id", pagination: true, showRefresh: true, search: true, clickToSelect: true, queryParams: function (param) { return {}; }, url: "/Editable/GetUsers", columns: [{ checkbox: true }, {Field: "Nome de usuário", título: "Nome de usuário", editável: {type: 'text', título: 'nome de usuário', validate: function (v) {if (! v) retornar 'nome de usuário não pode ser vazio'; Eval ('New' + Eval (valor) .Source) Data de retorno.Format ("AAAYYY-MM-DD"); "/Edit/edit", Data: Row, Datatype: 'JSON', Sucesso: função (Data, Status) {if (Status == "Sucesso") {ALERT ('Submissão bem -sucedida de dados');O método de atualização correspondente do fundo
public jsonResult Edit (usuário do usuário) {// Atualizar entidade retornar json (novo {}, jsonRequestBeHavior.allowget); }Após o teste, a coluna do nome de usuário pode ser editada livremente. Da mesma forma, a coluna de idade também pode ser alterada para isso
{Field: "Age", Title: "Age", Editável: {type: 'text', title: 'Age', validate: function (v) {if (isnan (v)) retornar 'a idade deve ser um número'; var Age = parseint (v); se (idade <= 0) o retorno 'a idade deve ser um número inteiro positivo'; }}}Nenhuma modificação é necessária para o resto.
Explicação de código: Os parâmetros editáveis estão configurados no atributo inicial de colunas acima. Observe que o objeto JSON correspondente ao atributo editável de cada coluna aqui está o objeto JSON inicializado no X-Editável. Ou seja, quais atributos podem ser configurados quando inicializamos o X-editável, e o mesmo pode ser configurado no atributo editável da coluna, por isso será muito mais agradável de usar. O método de envio editado é colocado uniformemente no evento OneDitablesave para lidar com ele uniformemente.
2. Caixa de seleção de tempo
Com o conhecimento acima como base, vamos inicializar a coluna de aniversário:
{Field: "Birthday", Title: "Birthday", Formatter: function (valor, linha, índice) {var date = Eval ('new' + avaliar (valor) .Source) Data de retorno.Format ("AAAA-MM-DD"); }, editável: {type: 'date', título: 'aniversário'}}Não são necessárias modificações em outros lugares para obter o efeito:
Este é o estilo padrão do X-Editável. Se você não se sentir feliz, pode configurá -lo sozinho. O X-Editável fornece muitos parâmetros para configurar caixas de data, como segue:
Obviamente, se o tempo for preciso para a hora, minutos e segundos, você poderá usar uma caixa de edição do tipo DateTime. A seguir, é apresentado o efeito oficial de edição de tempo, que parece muito bom.
3. Caixa para baixo
Há outra tag importante na edição de formulários, que é selecionada. Como mencionado acima, sabemos que o X-Editável nos fornece um modo de edição de caixa suspensa, por exemplo, a edição desta coluna em nosso departamento pode ser escrita assim:
{Field: "DeptId", Title: "Departamento", Editável: {Type: 'Select', Title: 'Departamento', Fonte: [{Value: "1", Text: "R&D Department"}, {Value: "2", Texto: "Departamento de Vendas"}, {Valor: "3", "Text:" Administrativo Departamento "}]}}Obtenha o efeito
Obviamente, esse método de definir fontes de dados localmente não pode atender às nossas necessidades, porque em muitos casos as opções na caixa suspensa são obtidas remotamente do banco de dados. Obviamente, o X-Editável também foi considerado para nós, por exemplo, podemos escrever isso:
{Field: "DeptId", Title: "Departamento", editável: {type: 'Select', Title: 'departamento', fonte: function () {var result = []; $ .ajax ({url: '/editável/getDepartments', assíncrono: false, type: "get", dados: {}, sucesso: function (dados, status) {$ .each (data, function (key, value) {result.push ({value: value.id, text: value.name});};};}; resultado de retorno; }}}}Configuramos um método em segundo plano
public jsonResult getDepartments () {var lStres = new List <Actemond> (); LSTES.Add (new Department () {id = "1", nome = "departamento de R&D"}); lrass.add (new Department () {id = "2", nome = "departamento de vendas"}); lrass.add (new Department () {id = "3", nome = "departamento administrativo"}); lrass.add (new Department () {id = "4", nome = "departamento criativo"}); lrass.add (new Department () {id = "5", name = "Business Unit"}); Return json (LSTES, JSONREQUESTBEHAVIOR.OULLGET); }Também pode alcançar os resultados que queremos.
Pergunta de código: Aqui está uma coisa que precisa ser explicada. Os jardineiros cuidadosos podem ter descoberto que nosso campo: "DeptID" aqui, por que devemos configurar o Deptid em vez do Departamento? É muito simples, porque precisamos corresponder ao valor do valor na fonte de dados.
4. Caixa de seleção
Além das caixas de edição comuns mencionadas acima, o X-Editável também nos fornece a edição de grupos de caixa de seleção. por exemplo:
{ field: "Hobby", title: "Host", editable: { type: "checklist", separator:",", source: [{ value: 'bsb', text: 'basketball' }, { value: 'ftb', text: 'football' }, { value: 'wsm', text: 'swimming' }], } }Obtenha o efeito:
Obviamente, se você tiver dados remotos, também poderá usar um método semelhante ao acima para recuperá -los.
5. Os "fantasmas nunca desaparecem" Select2
Falando na caixa de seleção acima, o blogueiro não pôde deixar de pensar em coisas como o MultisSelect, então ele procurou o documento com editável x e descobriu que ele não suporta multisselect, mas suporta o Select2, e não sei se isso é uma boa notícia. Com base na própria experiência de uso do blogueiro e na experiência de bate -papo no grupo de comunicação técnica, descobri que muitas pessoas encontraram vários problemas de estilo ao usar o Select2 e não é fácil de resolver.
Como os suportes X-Eductable select2, vamos experimentar. De qualquer forma, a demo oficial é muito boa. Aqui está um exemplo de uso da demonstração oficial:
Com um humor nervoso, o blogueiro tentou ele mesmo.
Referência Select2 Arquivo
<link href="~/Content/select2-bootstrap.css" rel="stylesheet" /><link href="~/Content/select2-master/dist/css/select2.min.css" rel="stylesheet" /><script src="~/Content/select2-master/dist/js/select2.full.min.js"></script>
Código tente
{Field: "Hobby", Title: "Hobby", editável: {type: 'Select2', Título: 'Hobby', Nome: 'Hobby', Posicionamento: 'Top', Sucesso: Função (Resposta, NewValue) {Depury; }, erro: function (resposta, newValue) {debugger; }, url: function (params) {debugger; }, fonte: [{id: 'bsb', texto: 'basquete'}, {id: 'ftb', text: 'futebol'}, {id: 'wsm', text: 'nadação'}], inputclass: 'input-large', select2: {allowsClear: múltiplo: verdadeiro:}Obtenha o resultado:
Acontece que o valor selecionado do select2 não pode ser passado para o plano de fundo normalmente. De qualquer forma, o blogueiro tentou vários parâmetros e, de acordo com a demo oficial, e todos terminaram em falha. Não sei como a demonstração oficial foi bem -sucedida. Esta pergunta é lançada primeiro. Se houver jardineiros que o usam, corrija e responda. Se o blogueiro resolver esse problema no futuro, ele também será atualizado aqui.
4. Resumo
Outro problema é que, após a conclusão da edição e envio, o blogueiro encontrou um problema no projeto: se houver muito conteúdo de texto após o envio, a largura do th na cabeça da tabela e a largura do TD no TBody não está certa, o que parece bastante nojento. Mas não encontrei esse problema ao escrever demos. Aqui está a solução.
Resolva seus problemas em apenas uma frase!
Este artigo apresenta o uso do Bootstraptable combinado com o X-Editável para implementar a edição em linha. Muitas das perguntas do artigo são explicadas com base na experiência do blogueiro de usá -lo. Se você planeja usá -lo, também pode experimentá -lo.
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O acima é tudo sobre este artigo. Espero que isso possa ajudá -lo a aprender melhor a tabela de bootfact de componentes da tabela JS.