2017-11-16 23 views
10

मेरे पास अलग-अलग पंक्तियों और फ़ील्ड वाली एक तालिका है। एक पंक्ति में मेरे पास display:none; के साथ दो फ़ील्ड हैं और जब मैं इस पंक्तियों का ड्रैग करता हूं, तो <tbody> और <thead> में पार्श्व पैडिंग जैसे प्रभाव होता है, तालिका कम नहीं होती है, तालिका के तत्व हां।JQueryUI क्रमबद्ध थाड और टैब्ड छिपे हुए दो फ़ील्ड के साथ पंक्ति खींचते समय

पहली पंक्ति में अगले जेएसफ़िल्ड में सही ढंग से काम नहीं करता है, लेकिन दूसरी पंक्ति में केवल display:none; के साथ एक फ़ील्ड है।

यदि कोई प्रश्न पूछता है तो।

त्रुटियाँ उदाहरण enter image description here

टेबल जबकि खींच:

enter image description here

पहले तो मैंने सोचा कि यह वर्ग .hidden-td साथ <td> तत्वों की संख्या की तलाश में (द्वारा हल किया जा सकता है कक्षा जिसमें display: none; है) और कक्षा .placeholder-style के साथ तत्व की तलाश करें (है उस श्रेणी में <tr> है जो ड्रैग करते समय उत्पन्न होता है) और जोड़ें क्योंकि <tr> में हैं जो मैं चल रहा हूं, लेकिन नहीं, काम नहीं कर रहा है।

मैं जानता हूँ कि कितना क्षेत्रों इस लाइन के साथ है clase .hidden-td

var numcells = $('.hidden-td').length;

समस्या

मैं पहली पंक्ति में और दूसरे में मैं अपने समारोह में 8. राशि 9 तत्व start() मैंने अपने प्लेसहोल्डर में केवल एक कॉलम छुपाया है, इसलिए जब मैं पहली पंक्ति के ड्रैग करता हूं तो कक्षा .hidden-td को लागू किए बिना एक कॉलम छोड़ा जाता है और यही कारण है कि कॉलम के अंत में एक स्थान है।

मैं इसे कैसे ठीक कर सकता हूं?

https://jsfiddle.net/w52m5ggb/20/

+0

https://stackoverflow.com/questions/39171688/jquery-ui-sortable-table-and-cell-is- पर एक नजर डालें shrinking-while-dragging-tr क्या यह आपकी समस्या का समाधान करता है? – Magisch

+0

जेएसएफडल में समस्या को ठीक करें लेकिन असली कोड में नहीं, उदाहरण देखें कि मैं प्रश्न में संलग्न होगा। –

+0

मुझे लगता है कि मुझे पता है कि मेरे असली कोड में क्यों काम नहीं करते हैं, ऐसा लगता है कि मेरे पास दो फ़ील्ड हैं, यदि दो फ़ील्ड 'डिस्प्ले' के साथ हैं: कोई नहीं; 'यह काम नहीं कर रहा है। https://jsfiddle.net/w52m5ggb/19/ –

उत्तर

1

sortable प्लगइन के साथ अपने आप को पिछले कुछ दिनों के लिए संघर्ष करने के बाद, मुझे लगता है कि निम्न परिवर्तन किए जाने की जरूरत है:

  1. बनाने के लिए सहायक समारोह जोड़ें सही आकार रखने के लिए सहायक (ड्रैगगेबल ऑब्जेक्ट) पर सही आकार।

  2. प्रारंभ समारोह में, प्लेसहोल्डर मूल के समान रहने के लिए, प्लेसहोल्डर HTML पर आइटम HTML जोड़ें।

कोड:

$("#tbodyproject").sortable({ 
    items: "> tr", 
    appendTo: "parent", 
    helper: "clone", 
    placeholder: "placeholder-style", 
    start: function(event, ui) { 
     $(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td') 

     //copy item html to placeholder html 

     ui.placeholder.html(ui.item.html()); 

     //hide the items but keep the height/width. 
     ui.placeholder.css('visibility', 'hidden'); 
    }, 
    stop: function(event, ui) { 
     ui.item.css('display', '') 
    }, 

    //add helper function to keep draggable object the same width 
    helper: function(e, tr) 
    { 
     var $originals = tr.children(); 
     var $helper = tr.clone(); 
     $helper.children().each(function(index) 
     { 
     // Set helper cell sizes to match the original sizes 
     $(this).width($originals.eq(index).width()); 
     }); 
     return $helper; 
    }, 
    update: function(event, ui) { 
     let newOrder = $(this).sortable('toArray'); 
     $.ajax({ 
      type: "POST", 
      url:'/admin/projects/updateOrder', 
      data: {ids: newOrder} 
     }) 
     .done(function(msg) { 
     location.reload();   
     }); 
    } 
}).disableSelection(); 

Updated fiddle

0

जब प्लेसहोल्डर बनाई गई है, यह केवल पंक्ति में सेल की संख्या लेता है और उन कोशिकाओं के साथ एक खाली पंक्ति बनाएं।

आप कक्षा hidden-td कक्षा 2 में कक्षा जोड़ रहे हैं, इसलिए आप एक सेल छुपा रहे हैं। यह पंक्तियों 2 और ऊपर के लिए ठीक है, लेकिन पहली पंक्ति के लिए नहीं, क्योंकि आपके पास उस पंक्ति में एक और सेल है। पहली पंक्ति के लिए

<td colspan="1">&nbsp;</td><td colspan="1" class="hidden-td">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td> 

: पंक्ति 2 के लिए प्लेसहोल्डर देखें

<td colspan="1">&nbsp;</td><td colspan="1" class="hidden-td">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td><td colspan="1">&nbsp;</td> 

आप क्या कर सकते प्लेसहोल्डर की हर कोशिका छिपाने के लिए और केवल संख्या की जरूरत है दिखाने के लिए है।यह सीएसएस के साथ किया जा सकता है, इस तरह:

.placeholder-style td { 
    display: none; 
} 

.placeholder-style td:nth-child(-n+7) { 
    display: table-cell; 
} 

परिणाम: https://jsfiddle.net/3g3bt80e/1/

+1

मुझे यह पसंद है कि आप इसे करते हैं लेकिन एक समस्या है। इस संस्करण को जांचें https://jsfiddle.net/3g3bt80e/2/ मैंने कुछ सीएसएस जोड़ा, जैसे कि मेरे असली कोड में है। –

0

आप नीचे दिए गए स्निपेट में दृष्टिकोण की कोशिश कर सकते।

$("#tabs").tabs(); 
 

 
$("#tbodyproject").sortable({ 
 
    items: "> tr", 
 
    appendTo: "parent", 
 
    helper: "clone", 
 
    placeholder: "placeholder-style", 
 
    start: function(event, ui) { 
 
     ui.helper.css('display', 'table'); 
 
    // console.log(ui.placeholder.html()) 
 
    }, 
 
    stop: function(event, ui) { 
 
     ui.item.css('display', '') 
 
    }, 
 
    update: function(event, ui) { 
 
     let newOrder = $(this).sortable('toArray'); 
 
     $.ajax({ 
 
      type: "POST", 
 
      url:'/admin/projects/updateOrder', 
 
      data: {ids: newOrder} 
 
     }) 
 
     .done(function(msg) { 
 
     location.reload();   
 
     }); 
 
    } 
 
}).disableSelection();
img { 
 
    width: 100px; 
 
} 
 
.hidden-td{ 
 
    display:none; 
 
} 
 
.table{ 
 
    background-color:green; 
 
    border:0; 
 
    width:100%; 
 
} 
 
.trdrag{ 
 
    background-color:yellow; 
 
} 
 
.trdrag.ui-sortable-handle td.tdslug, .trdrag.ui-sortable-handle td.tdslug img{ 
 
    text-align:center; 
 
    align-items:center; 
 
    display: table-cell; 
 
    justify-content: center; 
 
} 
 
.trdrag.ui-sortable-handle td.tdslug{ 
 
    white-space:normal; 
 
    word-wrap: break-word; 
 
} 
 
.trdrag.ui-sortable-handle td.tdslug img{ 
 
    padding-left:1rem; 
 
} 
 
.trdrag.ui-sortable-handle { 
 
    text-align:center; 
 
    align-items:center; 
 
    display: table-row; 
 
    justify-content: center; 
 
    width:100%; 
 
    margin-left: .3rem; 
 
} 
 
    
 
.thcenter{ 
 
    background-color:grey !important; 
 
} 
 
.ui-sortable-helper { 
 
    left:0px!important; 
 
} 
 
.idrow{ 
 
    width:5%; 
 
} 
 
.tdvisible{ 
 
    width:5%; 
 
} 
 
.tdslug{ 
 
    width:10%; 
 
} 
 
.tdimg{ 
 
    width:15%; 
 
} 
 
.tdorder{ 
 
    width:20%; 
 
} 
 
.tdacciones{ 
 
    width:40%; 
 
} 
 

 
.placeholder-style td { 
 
    display: none; 
 
} 
 

 
.placeholder-style td:nth-child(-n+7) { 
 
    display: table-cell; 
 
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div id="tabs"> 
 
     <div class="col-md-12"> 
 
      <div id="table1"> 
 
       <table class="table"> 
 
       <thead> 
 
        <tr> 
 
        <th class="thcenter">ID</th> 
 
        <th class="thcenter">Visible</th> 
 
        <th class="thcenter">Nombre</th> 
 
        <th class="thcenter">Header</th> 
 
        <th class="thcenter">Home</th> 
 
        <th class="thcenter">Orden</th> 
 
        <th class="thcenter"><span class="glyphicon glyphicon-cog"></span>Acciones</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody id="tbodyproject"> 
 
        <tr id="id1" class="trdrag"> 
 
         <td class="idrow tdcenter"><p id="margindata">1</p></td> 
 
         <td class="hidden-td" style="display:none;">Testing</td> 
 
         <td class="hidden-td" style="display:none;">Testing2</td> 
 
         <td class="tdcenter tdvisible"> 
 
         Yes 
 
         </td> 
 
         <td class="tdslug"><p id="margindata">Slug</p></td> 
 
         <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td> 
 
         <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td> 
 
         <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td> 
 
         <td class="tdacciones"> 
 
         <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()"> 
 
          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
 
          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata"> 
 
          <input type="hidden" name="_token" value="Token 1">Delete 
 
         </form> 
 
        </td> 
 
        </tr> 
 
        <tr id="id1" class="trdrag"> 
 
         <td class="idrow tdcenter"><p id="margindata">2</p></td> 
 
         <td style="display:none;">Testing</td> 
 
         <td class="tdcenter tdvisible"> 
 
         Yes 
 
         </td> 
 
         <td class="tdslug"><p id="margindata">Slug</p></td> 
 
         <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td> 
 
         <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td> 
 
         <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td> 
 
         <td class="tdacciones"> 
 
         <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()"> 
 
          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
 
          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata"> 
 
          <input type="hidden" name="_token" value="Token 1">Delete 
 
         </form> 
 
        </td> 
 
        </tr> 
 
        <tr id="id1" class="trdrag"> 
 
         <td class="idrow tdcenter"><p id="margindata">3</p></td> 
 
         <td style="display:none;">Testing</td> 
 
         <td class="tdcenter tdvisible"> 
 
         Yes 
 
         </td> 
 
         <td class="tdslug"><p id="margindata">Slug</p></td> 
 
         <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td> 
 
         <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td> 
 
         <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td> 
 
         <td class="tdacciones"> 
 
         <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()"> 
 
          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
 
          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata"> 
 
          <input type="hidden" name="_token" value="Token 1">Delete 
 
         </form> 
 
        </td> 
 
        </tr> 
 
        <tr id="id1" class="trdrag"> 
 
         <td class="idrow tdcenter"><p id="margindata">1</p></td> 
 
         <td style="display:none;">Testing</td> 
 
         <td class="tdcenter tdvisible"> 
 
         Yes 
 
         </td> 
 
         <td class="tdslug"><p id="margindata">Slug</p></td> 
 
         <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td> 
 
         <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td> 
 
         <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td> 
 
         <td class="tdacciones"> 
 
         <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()"> 
 
          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
 
          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata"> 
 
          <input type="hidden" name="_token" value="Token 1">Delete 
 
         </form> 
 
        </td> 
 
        </tr> 
 
        <tr id="id1" class="trdrag"> 
 
         <td class="idrow tdcenter"><p id="margindata">4</p></td> 
 
         <td style="display:none;">Testing</td> 
 
         <td class="tdcenter tdvisible"> 
 
         Yes 
 
         </td> 
 
         <td class="tdslug"><p id="margindata">Slug</p></td> 
 
         <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td> 
 
         <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td> 
 
         <td class="tdcenter tdorder"><p id="margindata">Order 1</p></td> 
 
         <td class="tdacciones"> 
 
         <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()"> 
 
          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
 
          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata"> 
 
          <input type="hidden" name="_token" value="Token 1">Delete 
 
         </form> 
 
        </td> 
 
        </tr> 
 
        <tr id="id2" class="trdrag"> 
 
         <td class="idrow tdcenter"><p id="margindata">5</p></td> 
 
         <td class="tdcenter tdvisible"> 
 
         Yes 
 
         </td> 
 
         <td class="tdslug"><p id="margindata">Slug</p></td> 
 
         <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td> 
 
         <td class="tdimg"><img src="http://via.placeholder.com/350x150" class="sizehome"></td> 
 
         <td class="tdcenter tdorder"><p id="margindata">Order 2</p></td> 
 
         <td class="tdacciones"> 
 
         <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()"> 
 

 
          <a href="#" class="btn btn-success btn-sm" id="margindata">Edit</a> 
 
          <input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata"> 
 
          <input type="hidden" name="_token" value="Token 2">Delete 
 
         </form> 
 
         </td> 
 
        </tr> 
 
       </tbody> 
 
       </table> 
 
       <br><br> 
 
      </div> 
 
     </div>

संबंधित मुद्दे