jquery ইউআই টেবিল এবং টিআর প্রস্থ সঙ্গে বাছাইযোগ্য

Question

আমি আমার টেবিলের গ্রিডকে বাছাইযোগ্য করতে jQuery UI বাছাইযোগ্য ব্যবহার করছি। কোডটি ঠিকঠাকভাবে কাজ করছে বলে মনে হচ্ছে তবে কারণ আমি প্রস্থটি যুক্ত করছি না td, যখন আমি trএটি টেনে আছি তবে সামগ্রীটি সঙ্কুচিত হয়।

উদাহরণ স্বরূপ; আমি টানতে শুরু করার পরে যদি আমার টেবিলের সারিটি 500px হয় তবে এটি 300px হয়ে যায়। আমি ধরে নিচ্ছি যে এটি ঘটছে কারণ গ্রিডে কোনও প্রস্থ নির্ধারণ করা হয়নি। এর কারণ আমি tdএস ( fixএবং liquid) এর জন্য দুটি ক্লাস ব্যবহার করছি ।

fixবর্গ তোলে tdসামগ্রীর প্রস্থ সমান এবং liquidতোলে tdপ্রস্থ 100%। এটির প্রস্থ নির্ধারণ না করে গ্রিড টেবিলের জন্য আমার দৃষ্টিভঙ্গি td।

আমার পদ্ধতির সাথে বাছাইয়ের পদ্ধতি কীভাবে করবেন তার কোনও ধারণা?

Comments

ইয়ারোস্লাভের উত্তরটি সত্যই এমভিপি!

— ব্রেড

আমারও একই সমস্যা ছিল, আমি মনে করি @ ইয়ারোস্লাভের টেবিলগুলির সাথে ডিলের জন্য সঠিক উত্তর রয়েছে যা ওপি সম্পর্কে যা জিজ্ঞাসা করছে

— লজ ৮87

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

@ ডেভ জেমস মিলার আপনি প্লেসোল্ডার বিকল্পটি কীভাবে কাজ করবেন?

— শান 5

ডেভ, এটি ভাগ করে নেওয়ার জন্য ধন্যবাদ, আমি আসল, পরিবর্তিত এবং কোনও স্থির প্রয়োগের মধ্যে পার্থক্যগুলি দেখানোর জন্য একটি জেএসফিডাল তৈরি করেছি: jsfiddle.net/bgrins/tzYbU । আমি আপনার সমাধান সহ মূল পোস্টটি আপডেট করব।

— ব্রায়ান গ্রিনস্টেড

এটি বেশ সুন্দরভাবে কাজ করে তবে আমি মনে করি এখনও একটি সামান্য সমস্যা আছে; আপনি যখন সারিটি টেনে আনছেন / ছাড়ছেন তখন সারণীটির বাকী কলামগুলি প্রস্থের পরিবর্তিত হতে পারে missing আমার ধারণা তাদের প্রস্থগুলিও ঠিক করা দরকার ...

— জেজ

এটি আমাকে এত কাজ বাঁচিয়েছে। এটি সঠিক উত্তর হিসাবে চিহ্নিত করা উচিত।

— অ্যান্ড্রু বেসা

আমি দেখতে পেলাম যে প্রস্থটি প্যাডড কোষগুলির ফলস্বরূপ কুইট সঠিক নয় in আমি পরিবর্তিত হয়েছি$(this).width($originals.eq(index).outerWidth());

— ব্যারি কার্লিয়ন

Answer 2

আমি মনে করি এটি সাহায্য করতে পারে:

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

Comments

এটি কীভাবে শীর্ষ উত্তর নয়? সিএসএসের একটি সহজ লাইন আমার জন্য এটি ঠিক করে।

— জ্যাকারসন 23

আমি রাজী! সিএসএসের একটি সাধারণ লাইন কীভাবে আপনার বাছাইযোগ্য টেবিলটি ঠিক করে - আপনি বিশ্বাস করবেন না - স্ট্যাকওভারফ্লো বিশেষজ্ঞরা হতবাক!

— ব্রেড

এই উত্তর। ধন্যবাদ @ ইয়ারোস্লাভ

— স্টেফি

এটি কোনও সাধারণ সমাধান নয় এবং এর ফলে টানা টানা সারির বিভিন্ন চেহারা হবে

— টমাস এম

এই সমাধানটি খুব ভাল তবে এটি অন্যান্য তালিকাতে প্রভাব ফেলতে পারে যা টেবিল নয়। আমার পরামর্শ হ'ল আপনি আরও নির্দিষ্ট করে দেওয়ার জন্য আপনার উত্তরটি সম্পাদনা করুন। এটির মতো => টেবিল ট্র.উই-বাছাইযোগ্য-সহায়ক {প্রদর্শন: টেবিল! গুরুত্বপূর্ণ; }

— রাফায়েল গোমেস ফ্রান্সিসকো

Answer 3

এখানে নির্বাচিত উত্তরটি সত্যিই দুর্দান্ত সমাধান, তবে এটির মধ্যে একটি গুরুতর বাগ রয়েছে যা মূল জেএস ফ্রিডল ( http://jsfiddle.net/bgrins/tzYbU/ ) এ দৃশ্যমান : দীর্ঘতম সারিটি টেনে আনার চেষ্টা করুন ( Godশ্বর আশীর্বাদ করুন মিঃ । গোলাপ জল ) এবং কক্ষের বাকী অংশের দৈর্ঘ্য ধসে পড়ে।

এর অর্থ হ'ল টানা ঘরের উপরের সেল প্রস্থগুলি ঠিক করা যথেষ্ট নয় - আপনাকে টেবিলে প্রস্থও ঠিক করতে হবে।

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

— Itzik বেন হত্তা

Answer 4

দেখে মনে হচ্ছে যে সারিটি ক্লোনিং করা IE8 তে ভাল কাজ করে না, তবে আসল সমাধানটি করে।

জেফিডাল দিয়ে পরীক্ষিত ।

Comments

JsFood স্থাপন করার জন্য ধন্যবাদ। আমি আসল সমাধানটি নিয়ে যাচ্ছি কারণ জেজ হিসাবে উল্লেখ করা হয়েছে যে সারি টেনে আনার সময় অন্যান্য সারির ঘরগুলি প্রস্থ পরিবর্তন করতে পারে।

— রজার

Answer 5

আপনার টেবিলটি সাজানোর জন্য প্রস্তুত হলে এই নিম্নলিখিত কোডটি কল করুন, এটি আপনার টিডি উপাদানগুলি টেবিলের কাঠামো ভঙ্গ না করে স্থির করেছে তা নিশ্চিত করবে।

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

Comments

হ্যাঁ, এটি আমার উত্তর হিসাবে প্রায় একই, যদিও আমার thপাশাপাশি কাজ করে td। এটি টানা টানা সারির পতন এবং টেবিলের পতন সংশোধন করে তবে প্রস্থগুলি ঠিক করার জন্য ব্যয় করে।

— কিথ

Answer 6

jsFiddle

বিভিন্ন প্রচেষ্টার পরে আমি কেবল একটি সহজ সমাধান চেষ্টা করেছিলাম যা ড্যাভ জেমস মিলারের সলিউশনটি সম্পূর্ণ করে যখন সবচেয়ে বড় সারিটি টানছে inking আমি আশা করি এটি সাহায্য করবে :)

// 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;

সমস্যা সমাধান করে। (জেএস যেমন স্ট্রিংয়ের পরিবর্তে ভেরিয়েবলকে সংখ্যা হিসাবে বিবেচনা করতে বাধ্য হয়)

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 এর API তে বর্ণিত হিসাবে কেবল সহায়কটিকে 'ক্লোন' এ সেট করুন

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

Comments

সাহায্য বলে মনে হচ্ছে না।

— অ্যান্ড্রু