Question

In my application users define documents layouts.
These layouts are logically tables most of the time, so users specify which “property” is going to be displayed in which cell. They also can define a number of rows and columns as well as how many rows or columns a property will take (collspan and rowspan in HTML terminology).

Now for a given document layout, and a set of documents I need to display it in browser.

I would like to do it on the client side, possibly using jQuery or/and Knockout.js, or some other framework/library.

Before I start reinventing the wheel, can someone point me in the right direction of doing it?

Answer 1

Not sure if this really counts as a question. It’s quite open to interpretation but here goes.

Define your LayoutViewmodel with a set of multi-dimensional observableArrays. Each index in the multidimentional array corresponds to a Property object which holds the data about rowspan, colspan etc (not sure what data you need).

Display you layout with foreach bindings. You most likely have two of these, one for selection and one for display. Below is my attempt at the display one.

<table data-bind="foreach: rows">
   <tr data-bind="foreach: columns">
       <td data-bind="attr: { colspan: colspan, rowspan: rowspan }, text: name">
       </td>
   </tr>
</table>

Hope this helps.