javascript - jQuery dragging (reordering) table rows between multiple tbodies -

-

i'm great css largely suck @ jquery. have our limitations...

ok admission out of way i'll begin. have "favourite products" table, can sectionalize categories (eg, booze, sheep, spoons). each category . each row (excluding ) product.

i want enable user drag , drop (reorder) table rows, between tbodies. i've looked @ table drag , drop (dnd) plugin jquery disappointed find doesn't support dragging between tbodies - , hasn't been updated quite time.

here basic table structure:

<table>   <thead>     <tr>       <th>favourite</th>     </tr>   </thead>   <tbody>     <tr>       <th>spoons</th> <!-- secion title, not draggable -->     </tr>     <tr>       <td>wooden spoon</td>     </tr>     <tr>       <td>metal spoon</td>     </tr>     <tr>       <td>plastic spoon</td>     </tr>   </tbody>   <tbody>     <tr>       <th>nuclear bombs</th> <!-- seciont title, not draggable -->     </tr>     <tr>       <td>us nukes</td>     </tr>     <tr>       <td>soviet nukes</td>    </tr>  </tbody> </table>

i'm going need turn of "dragability" of rows such first row in - being section title.

is there better version of jquery plugin out there can need? if can find better plugin please share , win "favourite person of week" award.

thank you.

your going want use jqueryui's sortable plugin , use option 

connectwith: '.connectedsortable'

to connect different table bodies.

the plugin designed lists, work on tables, mostly. i've used success on table before.

here's link documentation on jquery ui's sortable:

http://jqueryui.com/demos/sortable/#connect-lists

edit:

you'll want use items option specify rows sortable

items: 'tr:not(.dontincludeme)'

Comments

Post a Comment

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

-
right now, have tool tip pops when hover on edit box. problem tool tip contains multiple error messages , in 1 long line. need have each error message on own line. error messages contained in cstring new line seperating them. my existing code below. bool ontooltiptext(uint, nmhdr* pnmhdr, lresult* presult) { assert(pnmhdr->code == ttn_needtexta || pnmhdr->code == ttn_needtextw); // need handle both ansi , unicode versions of message tooltiptexta* pttta = (tooltiptexta*)pnmhdr; tooltiptextw* ptttw = (tooltiptextw*)pnmhdr; // tchar szfulltext[256]; cstring strtiptext=_t(""); uint nid = pnmhdr->idfrom; if (pnmhdr->code == ttn_needtexta && (pttta->uflags & ttf_idishwnd) || pnmhdr->code == ttn_needtextw && (ptttw->uflags & ttf_idishwnd)) { // idfrom hwnd of tool nid = ::getdlgctrlid((hwnd)nid); } //m_errprojaccel[ch] contains 1 or more error messages each...
Read more

asp.net - In javascript how to find the height and width -

-
i having .aspx , masterpage page. in masterpage loading aspx page . in aspx page design using generating table structure using code-behind server in javascript how find height , width . regards, kumar if you're looking table height , width, should it var tbl = document.getelementbyid('tbldemo'); alert(tbl.offsetwidth + '\n' + tbl.offsetheight);
Read more

c# - DataTable to EnumerableRowCollection -

-
i have datatable according client requirement can contain invalid date "00/00/1999",null,empty string.(typed datset) when collect them enumerables wish convert of invalid forms empty string. (i.e) enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || (how check date invalid date) ? string.empty : order.field<datetime>("orderdate") } how check whether date valid date or not? datetime.tryparse...like given current code: datetime date; enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || !datetime.tryparse(convert.tostring(order.field<datetime...
Read more