List box ( Grid Table ) : Table Grid « GUI Components « JavaScript DHTML






List box ( Grid Table )

 
<html>

<script language="JavaScript" src="widgets/jsobjects.js"></script>
<script>
  //Definindo linguagem - pt = portugues. Mensagens de erro serao apresentadas nesta lingua
  lang = "pt";

  //criando o documento base para adicionar os objetos
  docbody      = new JsDocument("docbody");

  //Funcoes extras para mostrar a adicao de eventos aos objetos:
  //Esta funcaum eh adicionada ao evento change do combobox
  function testeChange(e)
  {
    alert("mudou");
  }

  //funcao utilizada pelos botoes para transferir itens de um listbox para outro
  function transfer1_2()
  {
    transferListItens(listbox1, listbox2);
  }

  //funcao utilizada pelos botoes para transferir itens de um listbox para outro
  function transfer2_1()
  {
    transferListItens(listbox2, listbox1);
  }

  //funcao so para retornar o valor atual do calendario
  function teste(e)
  {
    alert(cal.getValue());
  }
  
  //funcao para ver se o treeview esta retornando ok
  function toolbarClick()
  {
    alert("Clicou no toolbar");
  }

  //funcaum para adicionar itens no listview
  function lstvaddItems()
  {
    //gerador de valor randomico para o nome dos objetos criados
    itemname = randomizer();

    //Menu do Item
    menu = eval(itemname + "_menu = new JsMenu('"+itemname+"_menu');");
    menu_adicionar = eval(itemname + "_menu_adicionar = new JsMenuItem('" + itemname + "_menu_adicionar')");
    menu_adicionar.setValue('Adicionar');
    menu_adicionar.setIcon('images/new.gif');
    menu_adicionar.setEvent('click', lstvaddItems);
    menu.addItem(menu_adicionar);
    menu_remover = eval(itemname + "_menu_remover = new JsMenuItem('" + itemname + "_menu_remover')");
    menu_remover.setValue('Remover');
    menu_remover.setIcon('images/delete.gif');
    menu_remover.setEvent('click', lstvdelItems);
    menu_remover.setAttribute('lstparent',itemname);
    menu.addItem(menu_remover);

    listviewitem = eval (itemname + " = new JsListViewItem('"+itemname+"');");
    list_teste.addItem(listviewitem);
    check = eval ("check_test"+itemname+" = new JsCheckBox('check_test"+itemname+"')");
    check.setLabel('Teste');
    check.setValue('true');
    listviewitem.addItem(randomizer(),'',true);
    listviewitem.addItem(check);
    listviewitem.addItem('Vai!!! Da um duplo clique logo!','',true);

    listviewitem.setMenu(menu);
  }

  //funcaum para remover itens do listview
  function lstvdelItems(e)
  {  
    if (browserType == "ie")
    {
      e = window.event;
      obj = e.srcElement;
    }
    else
    {
      obj = e.target;
    }

    var lsitem = eval(obj.lstparent);

    list_teste.delItem(lsitem);

    temMudanca = true;
  }
  
  function treeaddItems()
  {
    //gerador de valor randomico para o nome dos objetos criados
    itemname = randomizer();

    //Menu do Item
    menu = eval(itemname + "_menu = new JsMenu('"+itemname+"_menu');");
    menu_adicionar = eval(itemname + "_menu_adicionar = new JsMenuItem('" + itemname + "_menu_adicionar')");
    menu_adicionar.setValue('Adicionar');
    menu_adicionar.setIcon('images/new.gif');
    menu_adicionar.setEvent('click', treeaddItems);
    menu.addItem(menu_adicionar);
    menu_adicionarsub = eval(itemname + "_menu_adicionarsub = new JsMenuItem('" + itemname + "_menu_adicionarsub')");
    menu_adicionarsub.setValue('Adicionar SubItem');
    menu_adicionarsub.setIcon('images/new.gif');
    menu_adicionarsub.setEvent('click', treeaddSubItems);
    menu_adicionarsub.setAttribute('lstparent',itemname);
    menu.addItem(menu_adicionarsub);
    menu_remover = eval(itemname + "_menu_remover = new JsMenuItem('" + itemname + "_menu_remover')");
    menu_remover.setValue('Remover');
    menu_remover.setIcon('images/delete.gif');
    menu_remover.setEvent('click', treedelItems);
    menu_remover.setAttribute('lstparent',itemname);
    menu.addItem(menu_remover);

    listviewitem = eval (itemname + " = new JsListViewItem('"+itemname+"');");
    tree_teste.addItem(listviewitem);
    check = eval ("check_test"+itemname+" = new JsCheckBox('check_test"+itemname+"')");
    check.setLabel('Teste');
    check.setValue('true');
    listviewitem.addItem(randomizer(),'',true);
    listviewitem.addItem(check);
    listviewitem.addItem('Vai!!! Da um duplo clique logo!','',true);

    listviewitem.setMenu(menu);
  }
  
  function treeaddSubItems(e)
  {
    if (browserType == "ie")
    {
      e = window.event;
      obj = e.srcElement;
    }
    else
    {
      obj = e.target;
    }

    var lsitem = eval(obj.lstparent);
    
    //gerador de valor randomico para o nome dos objetos criados
    itemname = randomizer();

    //Menu do Item
    menu = eval(itemname + "_menu = new JsMenu('"+itemname+"_menu');");
    menu_adicionar = eval(itemname + "_menu_adicionar = new JsMenuItem('" + itemname + "_menu_adicionar')");
    menu_adicionar.setValue('Adicionar');
    menu_adicionar.setIcon('images/new.gif');
    menu_adicionar.setEvent('click', treeaddItems);
    menu.addItem(menu_adicionar);
    menu_adicionarsub = eval(itemname + "_menu_adicionarsub = new JsMenuItem('" + itemname + "_menu_adicionarsub')");
    menu_adicionarsub.setValue('Adicionar SubItem');
    menu_adicionarsub.setIcon('images/new.gif');
    menu_adicionarsub.setEvent('click', treeaddSubItems);
    menu_adicionarsub.setAttribute('lstparent',itemname);
    menu.addItem(menu_adicionarsub);
    menu_remover = eval(itemname + "_menu_remover = new JsMenuItem('" + itemname + "_menu_remover')");
    menu_remover.setValue('Remover');
    menu_remover.setIcon('images/delete.gif');
    menu_remover.setEvent('click', treedelItems);
    menu_remover.setAttribute('lstparent',itemname);
    menu.addItem(menu_remover);

    listviewitem = eval (itemname + " = new JsListViewItem('"+itemname+"');");
    lsitem.addItem(listviewitem);
    check = eval ("check_test"+itemname+" = new JsCheckBox('check_test"+itemname+"')");
    check.setLabel('Teste');
    check.setValue('true');
    listviewitem.addItem(randomizer(),'',true);
    listviewitem.addItem(check);
    listviewitem.addItem('Vai!!! Da um duplo clique logo!','',true);

    listviewitem.setMenu(menu);
  }
  
  function treedelItems(e)
  {
    if (browserType == "ie")
    {
      e = window.event;
      obj = e.srcElement;
    }
    else
    {
      obj = e.target;
    }
    
    var lsitem = eval(obj.lstparent);

    lsitem.parent.delItem(lsitem);

    temMudanca = true;
  }

  //MenuBar
  menubar = new JsMenuBar("menubar");

  menubaritem1 = new JsMenu("menubaritem1");
  menubaritem2 = new JsMenu("menubaritem2");
  submenubaritem2 = new JsMenu("submenubaritem2");

  menubaritemsubitem1_1 = new JsMenuItem("menubaritemsubitem1_1");
  menubaritemsubitem1_2 = new JsMenuItem("menubaritemsubitem1_2");
  menubaritemsubitem1_3 = new JsMenuItem("menubaritemsubitem1_3");
  menubaritemsubitem1_4 = new JsMenuItem("menubaritemsubitem1_4");

  menubaritemsubitem2_1 = new JsMenuItem("menubaritemsubitem2_1");
  menubaritemsubitem2_2 = new JsMenuItem("menubaritemsubitem2_2");
  menubaritemsubitem2_3 = new JsMenuItem("menubaritemsubitem2_3");
  menubaritemsubitem2_4 = new JsMenuItem("menubaritemsubitem2_4");

  submenubaritemsubitem2_1 = new JsMenuItem("submenubaritemsubitem2_1");
  submenubaritemsubitem2_2 = new JsMenuItem("submenubaritemsubitem2_2");
  submenubaritemsubitem2_3 = new JsMenuItem("submenubaritemsubitem2_3");
  submenubaritemsubitem2_4 = new JsMenuItem("submenubaritemsubitem2_4");

  menubaritem1.setValue("Menu 1");
  menubaritemsubitem1_1.setValue("Item 1");
  menubaritemsubitem1_2.setValue("Item 2");
  menubaritemsubitem1_3.setValue("Item 3");
  menubaritemsubitem1_4.setValue("Item 4");

  menubaritem2.setValue("Menu 2");
  menubaritemsubitem2_1.setValue("Item 1");
  menubaritemsubitem2_2.setValue("Item 2");
  menubaritemsubitem2_3.setValue("Item 3");
  menubaritemsubitem2_4.setValue("Item 4");

  submenubaritem2.setValue("SubMenu 2");
  submenubaritemsubitem2_1.setValue("SubItem 1");
  submenubaritemsubitem2_2.setValue("SubItem 2");
  submenubaritemsubitem2_3.setValue("SubItem 3");
  submenubaritemsubitem2_4.setValue("SubItem 4");

  menubar.addItem(menubaritem1);
  menubar.addItem(menubaritem2);

  menubaritem1.addItem(menubaritemsubitem1_1);
  menubaritem1.addItem(menubaritemsubitem1_2);
  menubaritem1.addItem(menubaritemsubitem1_3);
  menubaritem1.addItem(menubaritemsubitem1_4);

  menubaritem2.addItem(menubaritemsubitem2_1);
  menubaritem2.addItem(menubaritemsubitem2_2);
  menubaritem2.addItem(menubaritemsubitem2_3);
  menubaritem2.addItem(menubaritemsubitem2_4);
  menubaritem2.addItem(submenubaritem2);

  submenubaritem2.addItem(submenubaritemsubitem2_1);
  submenubaritem2.addItem(submenubaritemsubitem2_2);
  submenubaritem2.addItem(submenubaritemsubitem2_3);
  submenubaritem2.addItem(submenubaritemsubitem2_4);

  docbody.addItem(menubar);

  //Toolbar
  toolbar = new JsToolBar("toolbar");

  toolbarbt1 = new JsToolBarButton("toolbarbt1");
  toolbarbt2 = new JsToolBarButton("toolbarbt2");
  toolbarbt3 = new JsToolBarButton("toolbarbt3");

  toolbarbt1.setSource("images/filenew.gif");
  toolbarbt2.setSource("images/fileopen.gif");
  toolbarbt3.setSource("images/trash.gif");
  
  toolbarbt1.setEvent("click",toolbarClick);

  toolbar.addItem(toolbarbt1);
  toolbar.addItem(toolbarbt2);
  toolbar.addDiv();
  toolbar.addItem(toolbarbt3);

  docbody.addItem(toolbar);

  //Grid principal, e de conteudo, que contera o tab
  //Serve pricipalmente para fazer o alinhamento dos elementos na tela
  maingrid = new JsWidgetGrid("grid");
  maingrid.setHeight(300);
  maingrid.addRow();
  maingrid.addCell("100%","10","center","top");
  maingrid.addRow();
  maingrid.addCell("100%","","center","top");
  docbody.addItem(maingrid);

  contentgrid = new JsWidgetGrid("grid");
  contentgrid.setWidth("95%");
  contentgrid.addRow();
  contentgrid.addCell("100%","","","top");
  maingrid.addItem(contentgrid);

  //Exemplo de tab
  tab_teste = new JsTab("tab_teste");
  tab_teste.addTab("Listview e TreeView (menu de contexto)");
  tab_teste.addTab("Combobox e Lineedit");
  tab_teste.addTab("Listbox e botao");
  tab_teste.addTab("Calendario e dateedit");
  tab_teste.setWidth("100%");
  tab_teste.setHeight("450");
  contentgrid.addItem(tab_teste);

  //Exemplo de listview com menu de contexto
  adigenmenu      = new JsMenu("adigenmenu");
  adigenmenuitem    = new JsMenuItem("adigenmenuitem");

  adigenmenuitem.setValue("Adicionar");
  adigenmenuitem.setIcon("images/new.gif");
  adigenmenuitem.setEvent("click", lstvaddItems);
  adigenmenu.addItem(adigenmenuitem);

  list_teste = new JsListView("list_teste");
  list_teste.setHeight(190)
  list_teste.addColumn("Coluna 1",200);
  list_teste.addColumn("Coluna 2",300);
  list_teste.addColumn("Coluna 3",400);
  
  list_label = new JsLabel("list_label");
  list_label.setValue("ListView");
  list_label.setHeight(30);

  list_teste.setMenu(adigenmenu);

  tab_teste.addItemToTab(list_label,0);
  tab_teste.addItemToTab(list_teste,0);
  
  //Exemplo de TreeView com menu de contexto
  adigentreemenu      = new JsMenu("adigentreemenu");
  adigentreemenuitem    = new JsMenuItem("adigentreemenuitem");

  adigentreemenuitem.setValue("Adicionar");
  adigentreemenuitem.setIcon("images/new.gif");
  adigentreemenuitem.setEvent("click", treeaddItems);
  adigentreemenu.addItem(adigentreemenuitem);
  
  tree_teste = new JsListView("tree_teste");
  tree_teste.setTreeView();
  tree_teste.setHeight(190)
  tree_teste.addColumn("Coluna 1",200);
  tree_teste.addColumn("Coluna 2",300);
  tree_teste.addColumn("Coluna 3",400);
  
  tree_label = new JsLabel("tree_label");
  tree_label.setValue("TreeView");
  tree_label.setHeight(30);
  
  tree_teste.setMenu(adigentreemenu);
  
  tab_teste.addItemToTab(tree_label,0);
  tab_teste.addItemToTab(tree_teste,0);

  //Exemplo de lineedit
  //criamos um grid para distribuir melhor os elementos na tela
  lineeditgrid = new JsWidgetGrid("lineeditgrid");
  lineeditgrid.setHeight(60);

  //label 1
  label1 = new JsLabel("label1");
  label2 = new JsLabel("label2");

  lineedit1 = new JsLineEdit("lineedit1");
  lineedit2 = new JsLineEdit("lineedit2");

  label1.setValue("Label 1");
  label2.setValue("Label 2");

  lineeditgrid.addRow();
  lineeditgrid.addCell("60");
  lineeditgrid.addItem(label1);
  lineeditgrid.addCell();
  lineeditgrid.addItem(lineedit1);
  lineeditgrid.addRow();
  lineeditgrid.addCell("60");
  lineeditgrid.addItem(label2);
  lineeditgrid.addCell();
  lineeditgrid.addItem(lineedit2);

  tab_teste.addItemToTab(lineeditgrid,1);

  //Exemplo de combobox
  combobox_teste = new JsComboBox("combobox_teste");
  for (var i=1; i < 20; i++)
    combobox_teste.addItem(i, "test - " + i, "images/user_small.gif");
  combobox_teste.setEvent("change", testeChange);

  tab_teste.addItemToTab(combobox_teste,1);

  //listbox example
  lsitboxgrid = new JsWidgetGrid("lsitboxgrid");

  listbox_bt1 = new JsPushButton("listbox_bt1");
  listbox_bt1.setValue("&gt;&gt;");
  listbox_bt1.setEvent("click", transfer1_2);
  listbox_bt1.setWidth("50");

  listbox_bt2 = new JsPushButton("listbox_bt2");
  listbox_bt2.setValue("&lt;&lt;");
  listbox_bt2.setEvent("click", transfer2_1);
  listbox_bt2.setWidth("50");

  listbox1 = new JsListBox("listbox1");
  listbox1.setHeight("300");
  listbox1.setWidth("100%");

  listbox2 = new JsListBox("listbox2");
  listbox2.setHeight("300");
  listbox2.setWidth("100%");

  for (var i=0; i < 20; i++)
    listbox1.addItem("test - " + i, "","");

  lsitboxgrid.addRow();
  lsitboxgrid.addCell("45%");
  lsitboxgrid.addItem(listbox1);
  lsitboxgrid.addCell(10);
  lsitboxgrid.addCell(50,null,"center");
  lsitboxgrid.addItem(listbox_bt1);
  lsitboxgrid.addItem(listbox_bt2);
  lsitboxgrid.addCell(10);
  lsitboxgrid.addCell("45%");
  lsitboxgrid.addItem(listbox2);

  tab_teste.addItemToTab(lsitboxgrid,2);

  //Calendario
  cal    = new JsCalendar("cal");
  data  = new JsDateEdit("data");
  cal.setEvent("click", teste);

  tab_teste.addItemToTab(data,3);
  tab_teste.addItemToTab(cal,3);
  

  //for (i=0;i<50;i++)
    //lstvaddItems();

</script>
</html>


           
         
  








jsobjects.zip( 366 k)

Related examples in the same category

1.Table Sorter Proof of Concept
2.Create 100 random rows and do the column sorting
3.Sortable table column
4.Table row style with 'mouse roll over' effect
5.Pagable Table
6.Repeat table column at the table bottom
7.Editable table cell
8.Table row with mouse roll over
9.Adding a table row
10.List view (Selection between two list)
11.Basic Grid (Table)
12.Grid (Table) with colored cells
13.Build a Grid (Table) from CSV data file
14.Build a Grid (Tree) from a tab separated file
15.Build a Grid (Table) from yahoo quotes (IE only)
16.Grid (Table) with image in cells
17.Grid (Table) with multiple selection
18.Grid (Table) with row header and tooltips
19.One page two grid (Table)
20.Data in Grid (Table) from XML file
21.Grid (Table) with Data Island and Column highlight
22.Grid (Table) with cell format and XML data set
23.Grid (Table) data from RSS (IE only)
24.Grid (Table) data from xml file 2
25.Grid (Table) with news feeder (IE only)
26.Grid (Table) with quotes feeder (IE only)
27.Grid (Table) in Unix style
28.Sortable Grids (table)
29.Selectable Cells Grid Table
30.Editable Grid Table cell
31.Call back action in Grid Table
32.Table Grid Rows Selection
33.Grid Table Columns Resize
34.Table Grid Column Renderers
35.Sorting for each column or double click to edit its contents.
36.Table Grid style and sort the style
37.Table in JavaScript
38.Web Data Grid Table
39.Sortable Tables from Scratch with MochiKit
40.Ajax Table
41.Drag and drop table columns
42.Dynamic data grid: add a row, remove a row and sort column
43.super table
44.GUI for table creation
45.Table sorter
46.Sortable Table