Vamos primeiro olhar para os efeitos da tabela de bootstrap:
A tabela é usada para exibir os dados no banco de dados. Os dados são carregados do servidor através do AJAX. Ao mesmo tempo, a função de paginação é implementada por um servidor para evitar a paginação do cliente e a experiência do usuário causada pelo fraco carregamento de grandes quantidades de dados. Você também pode definir o horário de início e término dos dados de consulta para consultar dados para um determinado intervalo de tempo. A função de edição on-line é implementada estendendo a tabela de bootstrap e usando o X-editável.
Existem duas maneiras de usar a tabela de bootstrap:
1. Defina atributos de dados para tabelas comuns;
2. Ative o plug-in da tabela de bootstrap através do JavaScript.
O primeiro método é muito conveniente, mas eu prefiro o segundo método, que pode separar JS e HTML, e o código JS pode ser reutilizado.
A documentação da tabela de bootstrap é relativamente detalhada, mas existem alguns conteúdos específicos que precisam ser encontrados no código de amostra, etc.
Primeiro, poste o código de implementação para a frente e o back -end e depois a apresente em detalhes.
Os arquivos de recurso exigidos pela recepção incluem principalmente estilos relacionados ao Bootstrap3, JS, CSS, JS e JS baseado em Bootstrap, e JS: JS:
<link rel = "Stylesheet" href = "../ Assets/bootstrap/css/bootstrap.min.css"> <link rel = "Stylesheet" href = "../ Assets/bootstrap-table/src/bootstrap-table.css"> <link Rel = "Stylesheet" href = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"> </script =" ../ Assets/jquery.min.js "> </script> <script src = "../ Assets/bootstrap/js/bootstrap.min.js"> </script> <script src = "../ Assets/bootstrap-table/src/bootstrap-table.js"> </script> <script src="../assets/bootstrap-table/src/extensions/editable/bootstrap-table.js"></script><script src="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
O código HTML só precisa
<tabela id = "QueryList"> </ table>
Código JS, Código relacionado à consulta Time, Após a definição do tempo de consulta corretamente, os dados são atualizados através do método da tabela de bootstrap:
$ ('#submitgetData'). clique (function () {$ ('#msg'). html (''); var begintime_ = $ ('#beginMe'). val (); var endtime_ = $ ('#endtime'). if (DATE.PARSE (ENDTIMENTE _)-DATA.PARSE (BEGINGIMENTE_) <0) {Err = 'Erro de definição de tempo de consulta'; $ ('#Querylist').JS relacionado à mesa:
$ ('#QueryList'). Bootstraptable ({colunas: [{Field: 'MeterMeaseSeSeRHistoryId', título: 'id', classificável: true}, {field: 'value', title: 'value', editável: {type: 'text', validate: function () {if ($. }, {Field: 'Timestamp', título: 'time', editável: {type: 'text', validate: function (value) {if ($. FORMATIONAL: FUNÇÃO (VALOR, ROW, INDEX) {var s = '<a class = "salvar" href = "javascript: void (0)"> salvar </a>'; 'MeterMeaseSeSeRHistoryId', Sortorder: 'Desc', Paginação: Verdadeiro, Paginação Lateral: 'Servidor', Pagenumber: 1, PageSize: 5, Pagelist: [5, 10, 20], QueryParams: functime (paramsize) {return {MeterId: $ ('OFFERID'. $ ('#BeginTime'). Val (), EndTime: $ ('#endtime'). '/Analise/editMeterMeasurehistoryData', sucesso: function (dados) {alert ('modificado com sucesso'); }, 'clique em .remove': function (e, valor, linha, index) {$ .ajax ({type: "post", dados: linha, url: '/analze/deLeTemeTerMeasurehistoryData', sucessor: function (dados) {alert ('DeLete com sucesso'); $ ('#quyeryList'). Valores: [row.meterMeasurehistoryId]}); }};Os parâmetros das colunas definem todas as colunas da tabela e os parâmetros de cada coluna. O campo corresponde ao valor da chave dos dados retornados pelo JSON e os parâmetros da coluna na tabela de bootstrap; o nome da coluna exibido de acordo com o título; A configuração classificável é classificada de acordo com a coluna atual; O formatador define o formato de cada célula na coluna; A configuração editável é o método de edição da célula de coluna atual, e o método de verificação de validação também pode ser definido.
Portanto, a tabela real é definida como quatro colunas, classificadas de acordo com a primeira coluna, as colunas 2 e 3 podem ser editadas, o tipo é definido como texto e outros tipos podem ser usados conforme necessário. Os dados de verificação da segunda coluna não podem estar vazios e o valor da entrada de verificação da terceira coluna é o tempo; O conteúdo das colunas 1, 2 e 3 vem dos dados JSON retornados pelo servidor; A quarta coluna é a operação de dados na linha atual e o evento de audição OperateEvents é adicionado e ligado à janela.
SortName é definido como o valor do campo na coluna 1;
Sortorder está definido para reverter a ordem;
A paginação é verdadeira para a paginação;
Paginação lateral representa a paginação do servidor;
O número de pageNum indica a página de início padrão;
PageSize representa o número de dados exibidos por página;
Pagelist representa o número opcional de dados exibidos por página;
Queryparams significa que cada parâmetro enviado ao servidor pode ser adicionado aos parâmetros necessários;
URL é o endereço de solicitação dos dados.
Verifique o bootstrap-table.js e você pode ver os parâmetros dos parâmetros padrão:
Bootstraptable.prototype.initServer = function (silencioso, consulsão) {var thats = this, data = {}, params = {Pagesize: this.options.pagesize === this.options.formatallRows ()? this.options.TotalRows: this.options.pagesize, pagenumber: this.options.pageNumber, SearchText: this.searchText, className: this.options.sortName, Sortorder: this.options.sorTorder}; if (! this.options.url) {return; } if (this.options.QueryParamStype === 'LIMIT') {params = {search: params.searchText, classificar: params.sortName, ordem: params.sorTorder}; if (this.options.pagination) {params.limit = this.options.pagesize === this.options.formatallRows ()? this.options.totalrows: this.options.pagesize; params.offset = this.options.pagesize === this.options.formatallRows () ?: this.options.pagesize * (this.options.pageNumber - 1); }}O segundo plano do servidor implementa três funções, uma é carregar com base nos dados, bem como modificar e excluir dados.
public ActionResult getjsonHistoryDatas () {var displaystart = int.parse (request ["offset"]); var displayLength = int.Parse (request ["PageSize"]); var meterID = int.Parse (solicitação ["meterID"]); var peder = request ["sortorder"]; Var HistoryDatas = DB.MeterMeasureHistories. Onde (p => p.MeterMeasure.MeterId == MEERID). OrderByDescending (P => P.Timestamp). Skip (displaystart). Take (DisplayLength) .Tolist (); // Mostra os dados mais recentes do DisplayLength if ("ASC" == Ordem) {HistoryDatas = DB.MeterMeasureHistories. Onde (p => p.MeterMeasure.MeterId == MEERID). Ordem (p => p.timestamp). Skip (displaystart). Take (DisplayLength) .Tolist (); // Mostra os primeiros dados DisplayLength} int historyDatatotal = DB.MeterMeasureHistories. Onde (p => p.MeterMeasure.MeterId == MEERID) .COUNT (); // Número total de dados // filtragem de tempo if (! String.isnullorEmpty (request ["BeginTime"])) {DateTime BeginTime = DateTime.Parse (request ["BeginTime"]); DateTime EndTime = DateTime.Parse (request ["EndTime"]); HistoryDatas = DB.MeterMeasurehistories. Onde (p => p.MeterMeasure.MeterId == MEERID). Onde (p => p.timestamp> beginTime && p.timestamp <endtime). OrderByDescending (P => P.Timestamp). Skip (displaystart). Take (DisplayLength) .Tolist (); // Mostra os dados de tira de display de comprimento mais recentes if ("ASC" == Ordem) {HistoryDatas = DB.MeterMeasureHistories. Onde (p => p.MeterMeasure.MeterId == MEERID). Onde (p => p.timestamp> beginTime && p.timestamp <endtime). Ordem (p => p.timestamp). Skip (displaystart). Take (DisplayLength) .Tolist (); // Mostra os primeiros dados DisplayLength} historyDatatotal = DB.MeterMeasureHistories. Onde (p => p.MeterMeasure.MeterId == MEERID). Onde (p => p.timestamp> beginMe && foreach (var item em historyDatas) {listMeterMeasurehistories.add (new MeterMeasurehistoryDataviewModels {MeterMeaseSefardhistoryId = item.MeterMeaseSeSeSeterHHistoryId, value = item.value, timestamp = item.timestamp.tostring ()}); } String jSondatAtable = jsonConvert.SerializeObject (new {total = historyDatatotal, linhas = listMeterMeasurehistories}); Retornar conteúdo (JSondatatable);}Ele implementa a consulta de paginação e dados e retorna dados JSON. Os dados JSON retornados incluem dois objetos: Total e linhas. O total representa o número total de dados e linhas representa os dados a serem exibidos. MeterMeasureHistoryDateView é o seguinte, correspondente ao valor do campo na tabela:
classe pública MetermeasurehistoryDataviewModels {public int MeterMeasurehistoryId {get; definir; } public duplo valor {get; definir; } public string timestamp {get; definir; }}Função de modificação de dados:
[Httppost] public jsonResult editMeterMeasurehistoryData () {var meterestehistoryId = int.parse (solicitação ["MeterMeaseHistoryId"]); var meterestehistoryValue = duplo.parse (request ["value"]); var meterestehistorytime = dateTime.parse (request ["timestamp"]); var meterestehistoryindb = db.meterMeasurehistory.find (meterestehistoryId); meteresteasehistoryindb.value = meteresteasehistoryValue; meteresteasehistoryindb.timestamp = meteresteasehistorytime; db.SaveChanges (); var alteroData = new MeterMeasurehistoryDatAViewModels {MeterMeasurehistoryId = meteresteasehistoryIndb.MeterMeasurehistoryId, value = meteresteasehistoryindb.value, timestamp = meteresteresces. JSONRESULT JS = novo JSONRESULT (); js.data = JSON (alterado); devolver js;}Função de exclusão de dados:
[Httppost] public jsonResult DeleTemeterMeasurehistoryData () {var meterestehistoryId = int.parse (solicitação ["MeterMeaseHistoryId"]); db.MeterMeasurehistory.Remove (db.meterMeasurehistory.find (meterestehistoryId)); db.SaveChanges (); var deLETEDDATA = new MeterMeasurehistoryDatAViewModels {MeterMeasureHistoryId = meteresteasehistoryId, value = 0, timestamp = null}; JSONRESULT JS = novo JSONRESULT (); js.data = deletedData; devolver js;}Depois que o servidor é excluído, o primeiro plano exclui a linha de dados especificada através do método da tabela de bootstrap.
Eu usei essas coisas no momento. Para resumir o processo de aprendizado, estou procurando documentos oficiais, exemplos, consulte o código -fonte e aprenda a usar ferramentas de desenvolvedor do Chrome para visualizar fontes e rede.
O exposto acima é o resumo do aplicativo de paginação e edição on -line do servidor de bootstrap e edição introduzida pelo editor. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!