colResizable प्लगइन के साथ कॉलम चौड़ाई

Question

colResizable समायोज्य कॉलम चौड़ाई के लिए एक महान प्लगइन प्रतीत होता है।

दुर्भाग्य से, यह मूल रूप से सेट की गई चौड़ाई को हटा देता है। मैं whitespace: nowrap का उपयोग कर रहा था क्योंकि मेरे पास कुछ छोटे कॉलम और कुछ बड़े हैं। अब colResizable प्लगइन के साथ सभी कॉलम एक ही आकार में समायोजित कर रहे हैं।

प्लगइन लाभ लेने से पहले कॉल चौड़ाई पढ़ने और बाद में उन्हें रीसेट करने से पहले मैंने काम करने की कोशिश की। सबसे पहले यह अच्छा लग रहा है, लेकिन फिर पकड़ के साथ कुछ अजीब चीजें होती हैं। पकड़ने का कोर्स निश्चित रूप से रहता है जहां वे एक ही आकार के कॉलम के साथ रहे हैं।

var columnWidths = new Array(); 
// store original col widths in array 
$.each($("th", table), function() { 
    columnWidths.push($(this).width()); 
}); 

// Make cols resizable 
$(function() { 
    table.colResizable({ 
     liveDrag: true, 
     gripInnerHtml: "<div class='grip'></div>", 
     draggingClass: "dragging" 
    }); 
}); 

// reset columns to original width 
for (var i = 0; i < columnWidths.length; i++) { 
    $('th:nth-child(' + (i + 1) + ')', table).css({ width: columnWidths[i] + "px" }); 
} 

क्या कोई बेहतर समाधान के बारे में सोच सकता है?

Answer 1

github से स्रोत का अध्ययन करने के बाद, मुझे एक बेहतर तरीका मिला।

तालिका के लेआउट पहले जब तालिका हस्ताक्षर वर्ग जो बस उस से पहले, मैं एक नया सरणी में मूल स्तंभ चौड़ाई जोर दे रहा हूँ शामिल असाइन किया गया है बदल जाता है। यह सरणी createGrips फ़ंक्शन को पास कर दी गई है।

/* init function */ 
// ... 

var originalColumnWidths = new Array(); 
$.each($('th', t), function() { 
    originalColumnWidths.push($(this).width()); 
}); 

// t.addClass(SIGNATURE) ... 

createGrips(t, originalColumnWidths); 

जब createGrips समारोह में कॉलम के माध्यम से पाशन, मैं सरणी से मान निर्दिष्ट कर रहा हूँ करने के लिए नए jQuery वर्तमान स्तंभ चौड़ाई के बजाय स्तंभ वस्तु लपेटा।

// Change the signature 
var createGrips = function (t, originalColumnWidths) { 
// ... 

// Replace that line 
c.w = c.width(); 
// with the following 
c.w = originalColumnWidths[i]; 

यह मेरे लिए पूरी तरह से काम करता है। उम्मीद है कि यह किसी की मदद कर सकता है!