Datatables Editor, Adicionar Etapas via modal

14/05/2019

0

estou tentando criar um modal onde segue um fluxo de edição de dados, porem não consigo nem o mesmo manipular os botões do modal gerado pelo datatable.

$('#btnfiltrar').on('click', function() {
	tableCliente.ajax.reload();
});

var editortableClienteNew = new $.fn.dataTable.Editor({
	ajax: BASE_URL + "/ajaxClientes/buscaClientes",
	table: "#tableCliente",
	fields: [{
					label: 'Nome Completo:',
					name: 'Cliente.Nome',
					type: 'text'
			},
			{
					label: "CodiNome:",
					name: "Cliente.CodiNome",
					type: "text"
			},
			{
					label: "Data Nascimento:",
					name: "Cliente.DataNasc",
					type: 'datetime',
					keyInput: true,
					format: 'DD/MM/YYYY',
					attr: {
							autocomplete: "off"
					},
					opts: {
							yearRange: 100,
							maxDate: new Date()
					}
			},			
			{
					label: "Sexo",
					name: "Cliente.Sexo",
					type: "select",
					options: [{
									label: "Masculino",
									value: "0"
							},
							{
									label: "Feminino",
									value: "1"
							}
					]
			},
			{
					label: 'Indicante:',
					fieldInfo: 'Busque o cliente para ser indicante através do seu nome.',
					name: 'Cliente.IndicanteID',
					type: 'selectize',
					opts: {
							labelField: 'label',
							valueField: 'value',
							load: function(query, callback) {
									if (!query.length)
											return callback();

									$.ajax({
											url: BASE_URL + '/ajaxEquipe/buscaAutoCompleteClientes',
											type: 'POST',
											dataType: 'json',
											data: {
													'term': query
											},
											success: function(res) {
													callback(res);
											},
											error: function() {
													callback();
											}
									});
							}
					}
			}
	]
});

var editortableClientePessoais = new $.fn.dataTable.Editor({
	ajax: BASE_URL + "/ajaxClientes/buscaClientes",
	table: "#tableCliente",
	fields: [{
					label: 'Nome Completo:',
					name: 'Cliente.Nome',
					type: 'text',
			},
			{
					label: 'CodiNome:',
					name: 'Cliente.CodiNome',
					type: 'text',
					attr: {
							maxlength: 11
					},
			},
			{
					label: "Sexo",
					name: "Cliente.Sexo",
					type: "select",
					options: [{
									label: "Masculino",
									value: "0"
							},
							{
									label: "Feminino",
									value: "1"
							}
					]
			},
			{
					label: "Data Nascimento:",
					name: "Cliente.DataNasc",
					type: 'datetime',
					keyInput: true,
					format: 'DD/MM/YYYY',
					attr: {
							autocomplete: "off"
					},
					opts: {
							yearRange: 100,
							maxDate: new Date()
					}
			},
			{
					name: 'ClienteDados.ClienteID',
					type: 'hidden'
			},
			{
					label: "CPF:",
					name: "ClienteDados.CPF",
					attr: {
							maxlength: 11
					},
					type: "mask",
					mask: "000.000.000-00",
					maskOptions: {
							reverse: true,
							placeholder: "000.000.000-00"
					}
			},
			{
					label: "RG:",
					name: "ClienteDados.RG",
					type: "mask",
					mask: "00.000.000-0",
					maskOptions: {
							reverse: true,
							placeholder: "00.000.000-0"
					},
					attr: {
							maxlength: 12
					}
			},
			{
					label: "E-mail:",
					name: "ClienteDados.Email1",
					type: "text",
					attr: {
							maxlength: 50
					}
			},
			{
					label: "Telefone Residencial:",
					name: "ClienteDados.Telefone1",
					attr: {
							maxlength: 10
					},
					type: "mask",
					mask: "00 0000-0000",
					maskOptions: {
							reverse: true,
							placeholder: "00 0000-0000"
					}
			},
			{
					label: "Telefone Celular:",
					name: "ClienteDados.Telefone2",
					attr: {
							maxlength: 11
					},
					type: "mask",
					mask: "00 00000-0000",
					maskOptions: {
							reverse: true,
							placeholder: "00 00000-0000"
					}
			},
			{
					label: 'Nome da Mãe:',
					name: 'ClienteDados.NomeMae',
					type: 'text',
			},
			{
					label: 'Nome do Pai:',
					name: 'ClienteDados.NomePai',
					type: 'text',
			},
			{
					label: 'Religião:',
					name: 'ClienteDados.ReligiaoID',
					type: 'select',

			},
			{
					label: 'Nome do conjuge:',
					name: 'ClienteDados.NomeConjuge',
					type: 'text',
			},
			{
					label: 'Indicante:',
					fieldInfo: 'Busque o cliente para ser indicante através do seu nome.',
					name: 'Cliente.IndicanteID',
					type: 'selectize',
					opts: {
							labelField: 'label',
							valueField: 'value',
							load: function(query, callback) {
									if (!query.length)
											return callback();

									$.ajax({
											url: BASE_URL + '/ajaxEquipe/buscaAutoCompleteClientes',
											type: 'POST',
											dataType: 'json',
											data: {
													'term': query
											},
											success: function(res) {
													callback(res);
											},
											error: function() {
													callback();
											}
									});
							}
					}
			}
	]
});
var tableCliente = $('#tableCliente').DataTable({
	processing: false,
	responsive: true,
	paging: true,
	searching: false,
	dom: "Bfrtip",
	order: [
			[0, 'asc']
	],
	select: true,
	ajax: {
			"url": BASE_URL + "/ajaxClientes/buscaClientes",
			"type": "POST",
			"data": function(d) {
					return $('#frmSearchNomeCliente').serialize();
			}
	},
	columns: [{data: 'Cliente.Nome'},
			{data: 'Cliente.CodiNome'},
			{data: 'Cliente.DataNasc'},
			{"data": "Cliente.Sexo",
				render: function(data, type, row) {
					return data == 1 ? "Feminino" : "Masculino";
				}
			},
			{data: 'CL.Nome'},
			{data: 'CL2.Nome'}
	],
	buttons: [
			{
					extend: "create",
					text: "Novo",
					editor: editortableClienteNew
			},
			{
					extend: "edit",
					text: "Dados",
					editor: editortableClientePessoais
			},
			{
					extend: "edit",
					text: "Profissão",
					editor: editortableClienteProfissao
			},
			{
					extend: "edit",
					text: "Endereço",
					editor: editortableClienteEndereco
			},
			{
					extend: "edit",
					text: "Treinamento",
					editor: editortableClienteTreinamento
			}
			
			
	]
});

editortableCliente.on('postSubmit', function(e, json, data) {
	tableCliente.ajax.reload();

});



[image]
https://i.stack.imgur.com/Puu1s.png
[/image]

gostaria de adicionar no rodapé um botão onde conseguiria chamar as outras modais, ou que poderia adicionar os botões como abas dentro do modal para fazer as modificações
Guilherme Bitencourt

Guilherme Bitencourt

Responder

Posts

20/05/2019

William Nascimento

estou tentando criar um modal onde segue um fluxo de edição de dados, porem não consigo nem o mesmo manipular os botões do modal gerado pelo datatable.

$('#btnfiltrar').on('click', function() {
	tableCliente.ajax.reload();
});

var editortableClienteNew = new $.fn.dataTable.Editor({
	ajax: BASE_URL + "/ajaxClientes/buscaClientes",
	table: "#tableCliente",
	fields: [{
					label: 'Nome Completo:',
					name: 'Cliente.Nome',
					type: 'text'
			},
			{
					label: "CodiNome:",
					name: "Cliente.CodiNome",
					type: "text"
			},
			{
					label: "Data Nascimento:",
					name: "Cliente.DataNasc",
					type: 'datetime',
					keyInput: true,
					format: 'DD/MM/YYYY',
					attr: {
							autocomplete: "off"
					},
					opts: {
							yearRange: 100,
							maxDate: new Date()
					}
			},			
			{
					label: "Sexo",
					name: "Cliente.Sexo",
					type: "select",
					options: [{
									label: "Masculino",
									value: "0"
							},
							{
									label: "Feminino",
									value: "1"
							}
					]
			},
			{
					label: 'Indicante:',
					fieldInfo: 'Busque o cliente para ser indicante através do seu nome.',
					name: 'Cliente.IndicanteID',
					type: 'selectize',
					opts: {
							labelField: 'label',
							valueField: 'value',
							load: function(query, callback) {
									if (!query.length)
											return callback();

									$.ajax({
											url: BASE_URL + '/ajaxEquipe/buscaAutoCompleteClientes',
											type: 'POST',
											dataType: 'json',
											data: {
													'term': query
											},
											success: function(res) {
													callback(res);
											},
											error: function() {
													callback();
											}
									});
							}
					}
			}
	]
});

var editortableClientePessoais = new $.fn.dataTable.Editor({
	ajax: BASE_URL + "/ajaxClientes/buscaClientes",
	table: "#tableCliente",
	fields: [{
					label: 'Nome Completo:',
					name: 'Cliente.Nome',
					type: 'text',
			},
			{
					label: 'CodiNome:',
					name: 'Cliente.CodiNome',
					type: 'text',
					attr: {
							maxlength: 11
					},
			},
			{
					label: "Sexo",
					name: "Cliente.Sexo",
					type: "select",
					options: [{
									label: "Masculino",
									value: "0"
							},
							{
									label: "Feminino",
									value: "1"
							}
					]
			},
			{
					label: "Data Nascimento:",
					name: "Cliente.DataNasc",
					type: 'datetime',
					keyInput: true,
					format: 'DD/MM/YYYY',
					attr: {
							autocomplete: "off"
					},
					opts: {
							yearRange: 100,
							maxDate: new Date()
					}
			},
			{
					name: 'ClienteDados.ClienteID',
					type: 'hidden'
			},
			{
					label: "CPF:",
					name: "ClienteDados.CPF",
					attr: {
							maxlength: 11
					},
					type: "mask",
					mask: "000.000.000-00",
					maskOptions: {
							reverse: true,
							placeholder: "000.000.000-00"
					}
			},
			{
					label: "RG:",
					name: "ClienteDados.RG",
					type: "mask",
					mask: "00.000.000-0",
					maskOptions: {
							reverse: true,
							placeholder: "00.000.000-0"
					},
					attr: {
							maxlength: 12
					}
			},
			{
					label: "E-mail:",
					name: "ClienteDados.Email1",
					type: "text",
					attr: {
							maxlength: 50
					}
			},
			{
					label: "Telefone Residencial:",
					name: "ClienteDados.Telefone1",
					attr: {
							maxlength: 10
					},
					type: "mask",
					mask: "00 0000-0000",
					maskOptions: {
							reverse: true,
							placeholder: "00 0000-0000"
					}
			},
			{
					label: "Telefone Celular:",
					name: "ClienteDados.Telefone2",
					attr: {
							maxlength: 11
					},
					type: "mask",
					mask: "00 00000-0000",
					maskOptions: {
							reverse: true,
							placeholder: "00 00000-0000"
					}
			},
			{
					label: 'Nome da Mãe:',
					name: 'ClienteDados.NomeMae',
					type: 'text',
			},
			{
					label: 'Nome do Pai:',
					name: 'ClienteDados.NomePai',
					type: 'text',
			},
			{
					label: 'Religião:',
					name: 'ClienteDados.ReligiaoID',
					type: 'select',

			},
			{
					label: 'Nome do conjuge:',
					name: 'ClienteDados.NomeConjuge',
					type: 'text',
			},
			{
					label: 'Indicante:',
					fieldInfo: 'Busque o cliente para ser indicante através do seu nome.',
					name: 'Cliente.IndicanteID',
					type: 'selectize',
					opts: {
							labelField: 'label',
							valueField: 'value',
							load: function(query, callback) {
									if (!query.length)
											return callback();

									$.ajax({
											url: BASE_URL + '/ajaxEquipe/buscaAutoCompleteClientes',
											type: 'POST',
											dataType: 'json',
											data: {
													'term': query
											},
											success: function(res) {
													callback(res);
											},
											error: function() {
													callback();
											}
									});
							}
					}
			}
	]
});
var tableCliente = $('#tableCliente').DataTable({
	processing: false,
	responsive: true,
	paging: true,
	searching: false,
	dom: "Bfrtip",
	order: [
			[0, 'asc']
	],
	select: true,
	ajax: {
			"url": BASE_URL + "/ajaxClientes/buscaClientes",
			"type": "POST",
			"data": function(d) {
					return $('#frmSearchNomeCliente').serialize();
			}
	},
	columns: [{data: 'Cliente.Nome'},
			{data: 'Cliente.CodiNome'},
			{data: 'Cliente.DataNasc'},
			{"data": "Cliente.Sexo",
				render: function(data, type, row) {
					return data == 1 ? "Feminino" : "Masculino";
				}
			},
			{data: 'CL.Nome'},
			{data: 'CL2.Nome'}
	],
	buttons: [
			{
					extend: "create",
					text: "Novo",
					editor: editortableClienteNew
			},
			{
					extend: "edit",
					text: "Dados",
					editor: editortableClientePessoais
			},
			{
					extend: "edit",
					text: "Profissão",
					editor: editortableClienteProfissao
			},
			{
					extend: "edit",
					text: "Endereço",
					editor: editortableClienteEndereco
			},
			{
					extend: "edit",
					text: "Treinamento",
					editor: editortableClienteTreinamento
			}
			
			
	]
});

editortableCliente.on('postSubmit', function(e, json, data) {
	tableCliente.ajax.reload();

});



[image]
https://i.stack.imgur.com/Puu1s.png
[/image]

gostaria de adicionar no rodapé um botão onde conseguiria chamar as outras modais, ou que poderia adicionar os botões como abas dentro do modal para fazer as modificações


Olá Guilherme, acho que você está procurando algo como isso, aqui:
https://github.com/orige/jquery-bootstrap-modal-steps
, um modal step-by-step
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar