j_insert_update – zaawansowane programowanie – wstawianie tabeli

W transakcji j_insert_update można wykorzystując JQuery i funkcje StudioSystem wstawiać dowolne obiekty na formularzu. Wykorzystujemy do tego typ danych Div. Artykuł zawiera opis który w polu typu Div dodaje tablę z danymi powiązanymi.

Wstawianie tabeli przedstawię na przykładzie kartoteki kontrahenta, dla którego chcemy w dodatkowej zakładce wyświetlić w tabeli listę kontaktów.

Chcemy więc osiągnąć coś takiego, dodatkowa zakładka kontakty, a w niej tabelka:

insert_update tabelka

 

 

Krok 1 – dodaj obiekt typu Div

W konfiguracji transakcji insert_update dodajemy wiersz definiujący obiekt typu Div w następujący sposób:

  • W kolumnie nazwa przypisujemy unikalny identyfikator np. TABELKA
  • W kolumnie zakładka podajemy nową nazwę zakładki np. Kontakty
  • W kolumnie tytuł podajemy

insert_update div

 

Krok 2 – plik js

Funkcja tworząca tabelę

W dołączonym pliku js dodajemy funkcje która będzie tworzyła tabelę na podstawie zapytania, gdzie warunek where ogranicza ilość wierszy to tych które dotyczą danego kontrahenta. Zmienną unikalną danego wywołania nazywa się gcRefno i zawiera wartość przekazaną przy uruchamianiu transakcji j_insert_update.aspx w parametrze refno. Jako parametr do funkcji przekazujemy nazwę kontrolki w jakiej ma być umieszczona tabelka, w naszym przykładzie będzie to TABELKA.

 

function UstawTable(cKontrolka) {
 var idGrid = 'grid' + cKontrolka;
 $('#' + cKontrolka).html("<div id='" + idGrid + "'></div>");
 var cZrodlo = PobierzDataTable("UPPER([NRIDCRM]) AS NRIDCRM, [NAZWA],[KODPOCZTOWY],[MIEJSCOWOSC],[ULICA],[TELEFON],[MAIL],[NAZWISKO],[STANOWISKO] FROM [kncrm] where nridodn=" + gcRefno);

 var source =
 {
 datatype: "json",
 datafields: [
 { name: 'NAZWA', type: 'string' },
 { name: 'KODPOCZTOWY', type: 'string' },
 { name: 'MIEJSCOWOSC', type: 'string' },
 { name: 'ULICA', type: 'string' },
 { name: 'TELEFON', type: 'string' },
 { name: 'MAIL', type: 'string' },
 { name: 'NAZWISKO', type: 'string' },
 { name: 'STANOWSIKO', type: 'string' }
 ],
 localdata: cZrodlo,
 id: 'NRIDCRM'
 };
 var dataAdapter = new $.jqx.dataAdapter(source);

 $("#" + idGrid).jqxGrid(
 {
 theme: 'energyblue',
 height: '90%',
 width: '100%',
 source: dataAdapter,
 altrows: true,
 columns: [
 { text: 'Nazwisko', datafield: 'NAZWISKO', width: 200 },
 { text: 'Nazwa', datafield: 'NAZWA', width: 200 },
 { text: 'Kod', datafield: 'KODPOCZTOWY', width: 80 },
 { text: 'Miejscowość', datafield: 'MIEJSCOWOSC', width: 150 },
 { text: 'Ulica', datafield: 'ULICA', width: 150 },
 { text: 'Telefon', datafield: 'TELEFON', width: 150 },
 { text: 'e-mail', datafield: 'MAIL', width: 250 },
 { text: 'Stanowisko', datafield: 'STANOWISKO', width: 200 }
 ]
 });

 JqxFormatujGrid('#' + idGrid);
}

 

Uruchomienie funkcji tworzącej tabelkę

W celu pojawienia się tabelki na formularzu w funkcji uruchamianej  onload dodajemy jej wykonanie, w raz nazwę kontrolki w jakiej tabela ma się pojawić np.:

function MojaOnLoad() {
UstawTable('TABELKA');
}