Win a copy of Escape Velocity: Better Metrics for Agile Teams this week in the Agile and Other Processes forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Tim Cooke
  • Paul Clapham
  • Jeanne Boyarsky
Sheriffs:
  • Ron McLeod
  • Frank Carver
  • Junilu Lacar
Saloon Keepers:
  • Stephan van Hulst
  • Tim Moores
  • Tim Holloway
  • Al Hobbs
  • Carey Brown
Bartenders:
  • Piet Souris
  • Frits Walraven
  • fred rosenberger

Dynamic Table Issue

 
Ranch Hand
Posts: 2153
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have a list of line items in a table form a remote data source. Each line item represents a task to perform. I need a way to rearrange the line items, move an item up or down in the table rows. Then I will run a schedule program that will calculate the start dates of each line item.

Can someone give advise and example on how to do this? I already have the table of line items.
 
Sheriff
Posts: 67671
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Personally, I'd probably keep the line item data in a JavaScript construct that was easy to re-arrange, and update the table display from this "backing store" whenever it changes based up [on user input (clicking arrows or whatever other UI artifacts you are going to use).
 
Steve Dyke
Ranch Hand
Posts: 2153
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Can you give me more detail or an example on how to set this up?
 
Bear Bibeault
Sheriff
Posts: 67671
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I assume that the data's coming from the server? JSP perhaps? php? Regardless, use the server to write the initial JavaScript data structure. An array of the entries would probably suffice.

Write a JavaScript function to take the data in the array and emit a <table> from the data (highly recommend use of jQuery). Each row would contain controls (up and down arrows) that the user could click to "move" the row,

When the user clicks on an up-arrow control in the table (except on the first row), the event listener swaps the array entry corresponding to the clicked row with its predecessor. Then it calls the function that replaces the table with the new one.

Similar functionality for moving in the other direction.

I think it's just easier to keep the array sorted, and create the table from the array, than to try to sort table rows in the DOM.
 
Bear Bibeault
Sheriff
Posts: 67671
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
If you don't really need the sorted data (for later submission for example), and you are just doing this for visual effect, you could also use the brute force approach of dis-attaching the clicked row from the table, and re-attaching it after the predecessor/successor.
 
Yeah, but how did the squirrel get in there? Was it because of the tiny ad?
Garden Master Course kickstarter
https://coderanch.com/t/754577/Garden-Master-kickstarter
reply
    Bookmark Topic Watch Topic
  • New Topic