jquery UI तालिका और त्र चौड़ाई के साथ क्रमबद्ध है

Question

मैं अपनी तालिका ग्रिड को क्रमबद्ध बनाने के लिए jQuery UI सॉर्टेबल का उपयोग कर रहा हूं। कोड ठीक काम करने लगता है, लेकिन क्योंकि मैं एस में चौड़ाई नहीं जोड़ tdरहा हूं, जब मैं trइसे खींचता हूं तो यह सामग्री सिकुड़ जाती है।

उदाहरण के लिए; अगर मेरी तालिका पंक्ति 500px है जब मैं खींचना शुरू करता हूं, तो यह 300px हो जाता है। मुझे लगता है कि ऐसा इसलिए हो रहा है क्योंकि ग्रिड में कोई चौड़ाई परिभाषित नहीं है। ऐसा इसलिए है क्योंकि मैं tdएस ( fixऔर liquid) के लिए दो वर्गों का उपयोग कर रहा हूं ।

fixवर्ग में आता है tdसामग्री की चौड़ाई के बराबर और liquidबनाता tdचौड़ाई 100%। यह ग्रिड तालिका के लिए मेरा दृष्टिकोण है tdएस को चौड़ाई आवंटित करने के बिना ।

किसी भी विचार कैसे मेरे दृष्टिकोण के साथ क्रमबद्ध काम करने के लिए?

Comments

यारोस्लाव का जवाब है असली mvp!

— ब्रद

मेरे पास एक ही मुद्दा था, मुझे लगता है कि @ यारोस्लाव के पास तालिकाओं से निपटने के लिए सही उत्तर है जो कि ओपी के बारे में पूछ रहा है

— दर्ज़नों

Answer 1

मुझे यहाँ उत्तर मिला ।

मैंने पंक्ति को क्लोन करने के लिए इसे थोड़ा संशोधित किया, मूल में चौड़ाई जोड़ने के बजाय:

  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;
  },

Comments

@ जेम्स मिलर आप प्लेसहोल्डर विकल्प को कैसे काम करेंगे?

— शॉन ५

डेव, इसे साझा करने के लिए धन्यवाद, मैंने मूल, संशोधित और लागू नहीं किए गए फिक्स के बीच अंतर दिखाने के लिए एक jsField बनाया है: jsfiddle.net/bgrins/tzYbU । मैं आपके समाधान के साथ मूल पोस्ट को भी अपडेट करूंगा।

— ब्रायन ग्रिनस्टेड

यह काफी अच्छी तरह से काम करता है, लेकिन मुझे लगता है कि अभी भी एक मामूली समस्या है; जब आप पंक्ति को खींच रहे हैं / छोड़ रहे हैं, तो अनुपलब्ध पंक्ति के कारण तालिका के शेष स्तंभ चौड़ाई बदल सकते हैं। मुझे लगता है कि उनकी चौड़ाई भी तय करने की जरूरत है ...

— जेजे

इससे मेरा बहुत काम बच गया। इसे सही उत्तर के रूप में चिह्नित किया जाना चाहिए।

— एंड्रयू बेसा

मैंने पाया कि चौड़ाई गद्देदार कोशिकाओं में हुई थी, जो सही नहीं थी। मैंने $(this).width($originals.eq(index).outerWidth());

— बैरी कार्लाइन

Answer 2

मुझे लगता है कि यह मदद कर सकता है:

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

Comments

यह शीर्ष उत्तर कैसे नहीं है? CSS की एक सरल रेखा मेरे लिए इसे ठीक करती है।

— jcrowson

मैं सहमत हूँ! आप विश्वास नहीं करेंगे कि कैसे सीएसएस की एक सरल रेखा आपकी सॉर्ट करने योग्य तालिका को ठीक करती है - स्टैकओवरफ़्लो विशेषज्ञ चकित हैं!

— Brade

यह उत्तर है। धन्यवाद @ यारोस्लाव

— स्टेफी

यह एक सामान्य समाधान नहीं है और इसके परिणामस्वरूप खींची गई पंक्ति के अलग-अलग रूप दिखाई देंगे

— टॉमस एम

यह समाधान बहुत अच्छा है, लेकिन यह अन्य सूचियों को प्रभावित कर सकता है जो तालिका नहीं हैं। मेरा सुझाव है कि आप अपने उत्तर को और अधिक विशिष्ट बनाने के लिए संपादित करें। इस तरह => तालिका tr.ui- सॉर्टेबल-हेल्पर {डिस्प्ले: टेबल! महत्वपूर्ण; }

— राफेल गोम्स फ्रांसिस्को

Answer 3

यहां चयनित उत्तर वास्तव में एक अच्छा समाधान है, लेकिन इसमें एक गंभीर बग है जो मूल JS fiddle ( http://jsfiddle.net/bgrins/tzYbU/ ) में स्पष्ट है : सबसे लंबी पंक्ति ( गॉड ब्लेस यू, मि। ) खींचने की कोशिश करें । रोसेवाटर ), और बाकी सेल चौड़ाई गिर जाती है।

इसका मतलब है कि घसीटे गए सेल पर सेल की चौड़ाई को ठीक करना पर्याप्त नहीं है - आपको टेबल पर चौड़ाई को ठीक करने की भी आवश्यकता है।

$(function () {
    $('td, th', '#sortFixed').each(function () {
        var cell = $(this);
        cell.width(cell.width());
    });

    $('#sortFixed tbody').sortable().disableSelection();
});

जेएस फिडल: http://jsfiddle.net/rp4fV/3/

जब आप पहले स्तंभ को खींचते हैं, तो यह तालिका के ढहने की समस्या को ठीक करता है, लेकिन एक नया परिचय देता है: यदि आप तालिका की सामग्री को बदलते हैं तो कोशिका का आकार अब निश्चित हो जाता है।

सामग्री जोड़ते या बदलते समय इसके चारों ओर काम करने के लिए आपको निर्धारित चौड़ाई साफ़ करनी होगी:

$('td, th', '#sortFixed').each(function () {
    var cell = $(this);
    cell.css('width','');
});

फिर अपनी सामग्री जोड़ें, फिर फिर से चौड़ाई तय करें।

यह अभी भी एक पूर्ण समाधान नहीं है, जैसा कि (विशेष रूप से एक तालिका के साथ) आपको एक ड्रॉप प्लेसहोल्डर की आवश्यकता है। इसके लिए हमें शुरुआत में एक फंक्शन जोड़ना होगा जो प्लेसहोल्डर का निर्माण करे:

$('#sortFixed tbody').sortable({
    items: '> tr',
    forcePlaceholderSize: true,
    placeholder:'must-have-class',
    start: function (event, ui) {
        // Build a placeholder cell that spans all the cells in the row
        var cellCount = 0;
        $('td, th', ui.helper).each(function () {
            // For each TD or TH try and get it's colspan attribute, and add that or 1 to the total
            var colspan = 1;
            var colspanAttr = $(this).attr('colspan');
            if (colspanAttr > 1) {
                colspan = colspanAttr;
            }
            cellCount += colspan;
        });

        // Add the placeholder UI - note that this is the item's content, so TD rather than TR
        ui.placeholder.html('<td colspan="' + cellCount + '">&nbsp;</td>');
    }
}).disableSelection();

जेएस फिडल: http://jsfiddle.net/rp4fV/4/

Comments

धन्यवाद, आप मेरा समय बचाते हैं

— सुपर पैन्टर सेप

यहाँ प्लेसहोल्डर तकनीक हत्यारा है! पूरी तरह से मेरी समस्या का समाधान किया।

— जेसेगैविन

यह समाधान वास्तव में अच्छा है, और प्लेसहोल्डर तकनीक वास्तव में ठोस है, यह मेरी राय में चयनित उत्तर होना चाहिए।

— क्रिस जेम्स चंपियो

यह तब भी अप्रिय व्यवहार का कारण बनता है जब आपके पास बहुत अधिक पंक्ति होती है। अन्य सभी पंक्तियाँ इसके पीछे छिपेंगी। मैं इसे प्रारंभ विधि में जोड़ $(".must-have-class").css("height", $(ui.item).outerHeight());

— दूंगा

Answer 4

ऐसा लगता है कि पंक्ति को क्लोन करना IE8 पर अच्छी तरह से काम नहीं करता है, लेकिन मूल समाधान करता है।

JsFiddle के साथ परीक्षण किया गया ।

Comments

JsFiddle को स्थापित करने के लिए धन्यवाद। मैं मूल समाधान के साथ जा रहा हूं क्योंकि चूंकि Jez ने उल्लेख किया था कि पंक्ति को खींचते समय अन्य पंक्ति कोशिकाएं चौड़ाई बदल सकती हैं।

— रोजर

Answer 5

जब आपकी तालिका छांटने के लिए तैयार हो, तो इस कोड को कॉल करें, इससे यह सुनिश्चित हो जाएगा कि आपके td तत्वों की तालिका संरचना को तोड़े बिना एक निश्चित है।

 $(".tableToSort td").each(function () {
            $(this).css("width", $(this).width());
        });  

Comments

हां, यह मेरे जवाब के समान ही है, हालांकि मेरा काम इसके लिए thभी है td। यह घसीटा हुआ पंक्ति पतन और तालिका पतन को ठीक करता है, लेकिन चौड़ाई को ठीक करने की कीमत पर।

— कीथ

Answer 6

jsFiddle

बहुत सारे प्रयासों के बाद मैंने सिर्फ एक सरल समाधान की कोशिश की, जो सबसे बड़ी पंक्ति को खींचते हुए सिकुड़ने की तालिका को रोकने के लिए डेव जेम्स मिलर के समाधान को पूरा करता है। मुझे आशा है कि यह मदद करेगा :)

// Make sure the placeholder has the same with as the orignal
var start = function(e, ui) {
    let $originals = ui.helper.children();
    ui.placeholder.children().each(function (index) {
        $(this).width($originals.eq(index).width());
    });
}
// Return a helper with preserved width of cells
var helper = function(e, tr) {
    let $helper = tr.clone();
    let $originals = tr.children();
    $helper.children().each(function (index) {
        $(this).width($originals.eq(index).outerWidth(true));
    });
    return $helper;
};

Answer 7

कीथ का समाधान ठीक है, लेकिन फ़ायरफ़ॉक्स में थोड़ा कहर पैदा किया जो कि कोलस्पैन को जोड़ नहीं पाया, लेकिन उन्हें पकड़ लिया। (घुटने में पुराने जेएस स्ट्रिंग प्रकार दर्द)

इस पंक्ति को प्रतिस्थापित करना:

 cellCount += colspan;

साथ में:

 cellCount += colspan-0;

समस्या को ठीक करता है। (जैसा कि js को स्ट्रिंग्स के बजाय संख्याओं के रूप में व्यवहार करने के लिए मजबूर किया जाता है)

Answer 8

डेव जेम्स मिलर के जवाब ने मेरे लिए काम किया, लेकिन मेरे पेज पर कंटेनर डिव के लेआउट के कारण, माउस कर्सर के साथ ड्रग करने वाला सहायक मेरे माउस की स्थिति से ऑफसेट है। इसे ठीक करने के लिए, मैंने निम्नलिखित को सहायक कॉलबैक में जोड़ा

$(document.body).append($helper);

यहां उपरोक्त पंक्ति के साथ पूरा कॉलबैक दिया गया है:

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());
  });

  // append it to the body to avoid offset dragging
  $(document.body).append($helper);

  return $helper;
}

मैंने इसे डेव के जवाब के लिए एक टिप्पणी के रूप में जोड़ा होगा, लेकिन मेरे पास इस खाते पर पर्याप्त प्रतिनिधि नहीं था।

Comments

JQuery के दस्तावेज़ को पढ़ने के बाद, मैंने पाया कि छांटने में एक "appendTo" विकल्प भी आता है जो निर्दिष्ट करता है कि सहायक किस तत्व से जुड़ा हुआ है।

— शिया रिले

Answer 9

ऐसा लगता है disableSelection()- विधि आजकल खराब है और अपवित्र है। मैं अब जैसे-सक्षम पंक्ति के अंदर पाठ इनपुट का उपयोग नहीं कर सकता Mozilla Firefox 35.0। यह अभी ध्यान देने योग्य नहीं है।

Answer 10

$(function() {
    $( "#sort tbody" ).sortable({
        update: function () {
                                var order = $(this).sortable("toArray").join();
                                $.cookie("sortableOrder", order);
                        }
    });
    if($.cookie("sortableOrder")){
        var order = $.cookie("sortableOrder").split(",");
        reorder(order, $("#sort tbody"));
    }
    function reorder(aryOrder, element){
      $.each(aryOrder, function(key, val){
              element.append($("#"+val));
      });
    }
  });

Comments

अधिक स्पष्टीकरण की आवश्यकता है!

— अफसानेफडा

Answer 11

.sortable({
    helper: function (e, ui) {
        ui.children().each(function () {
            $(this).width($(this).width());
        });
        return ui;
    }
});

Answer 12

टेबल के तत्व तत्व की तरह लागू करें और सहायक को 'क्लोन' पर सेट करें, जैसा कि jquery-ui के एपीआई में वर्णित है

$("$my-table-tbody").sortable({
    helper: "clone"
});

Comments

मदद करने के लिए प्रतीत नहीं होता है।

— एंड्रयू