jQueryUI तालिका पंक्तियों पर क्रमबद्ध करने पर उन्हें छिड़काया जाता है

Question

सॉर्ट करने योग्य फ़ंक्शन में खींचा जाने पर तालिका पंक्तियों का यह मुद्दा मुझे लंबे समय तक परेशान करता है। कोई उत्तर? (क्यू & ए)

पीएस टेबल पर काम करने के क्रमबद्ध करने के लिए आपको टेबल पंक्तियों के आस-पास TBODY का उपयोग करना होगा, जिसे आप सॉर्ट करना चाहते हैं और फिर युक्त TBODY पर क्रमबद्ध फ़ंक्शन को कॉल करें।

Answer 1

आपको बस इतना करना है कि तालिका कक्षों में विशिष्ट पिक्सेल वाली चौड़ाई दें। तालिका कक्षों की सामग्री को जानने के बिना हम इसे कैसे कर सकते हैं? सरल:

$(document).ready(function(){ 
    $('td').each(function(){ 
     $(this).css('width', $(this).width() +'px'); 
    }); 
}); 

Answer 2

.ui-sortable-helper { 
    display: table; 
} 

Answer 3

की पेशकश समाधान में से कोई भी मेरे लिए काम किया।

मेरे मामले में, jQuery की यूई सॉर्टेबल की गणना की ऊंचाई और चौड़ाई, गोल विशेषता के माध्यम से स्वत: गणना आयामों को गोलाकार और ओवरराइड कर दिया गया था।

यहां समस्या को ठीक करने के लिए मैंने जो किया है, जो मैंने प्रस्तावित समाधानों की तुलना में अधिक सुरुचिपूर्ण पाया है। (यह उस में !important रों है, भले ही।)

.ui-sortable-helper { 
    width: auto !important; 
    height: auto !important; 
} 

Answer 4

मैं ऑनलाइन एक समाधान पर ठोकर खाई।

var fixHelper = function(e, ui) { 
    ui.children().each(function() { 
    $(this).width($(this).width()); 
    }); 
    return ui; 
}; 
$(“#sort tbody”).sortable({ 
helper: fixHelper 
}).disableSelection(); 

Fix sortable tr from shrinking

Answer 5

src jQuery-1.12.4.js

src jQuery-ui.js

लिंक rel jQuery-ui.css

@model Servidor.CListados 
@{ 
    ViewBag.Title = "Index"; 
} 
@using (Html.BeginForm()) 
{ 
    <h2>Listados</h2> 
    <h2>@ViewBag.Mensaje</h2> 
    <table> 
      <tr> 
       <th>Campo1</th> 
       <th>Campo2</th> 
      </tr> 
     <tbody id="sortable"> 
      @foreach (var item in Model.ListaTabla1) 
      { 
       <tr > 
        <td>@Html.DisplayFor(modelItem => item.Campo1)</td> 
        <td>@Html.DisplayFor(modelItem => item.Campo2)</td> 
       </tr> 
      } 
     </tbody> 
    </table> 
    @*<ul id="sortable"> 
     @foreach (var item in Model.ListaTabla1) 
     { 
      <li>@Html.DisplayFor(modelItem => item.Campo1)</li> 
     } 
    </ul>*@ 
} 
    <script>$("#sortable").sortable();</script>