EditTable.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. var AdjustTableFunc = function () {
  2. var Index = 0;
  3. $.each($("table"), function (index, item) {
  4. var TableWidth = isNaN(parseFloat($(item).width())) ? 0 : parseFloat($(item).width()); // 表格宽度
  5. // 替换HTML
  6. var ChildHtmlStr = $(item).prop("outerHTML")
  7. var HtmlStr = "<div class='TableContainer TContain_" + Index + "'></div>";
  8. $(item).after(HtmlStr);
  9. $(item).remove();
  10. var JqStr = ".TContain_" + Index;
  11. $(JqStr).append(ChildHtmlStr);
  12. Index += 1;
  13. });
  14. var BodyWidth = isNaN(parseFloat($(document).width())) ? 0 : parseFloat($(document).width()); // 界面宽度
  15. var Index = 0;
  16. $.each($("table"), function (index, item) {
  17. var TableWidth = isNaN(parseFloat($(item).width())) ? 0 : parseFloat($(item).width()); // 表格宽度
  18. // 替换HTML
  19. var JqStr = ".TContain_" + Index;
  20. $(JqStr).css("width", BodyWidth + "px");
  21. if (TableWidth > BodyWidth) {
  22. // 额外显示滚动条
  23. var SHtmlStr = "<div class='PSBar' style='width: " + BodyWidth + "px;'></div>";
  24. $(JqStr).after(SHtmlStr);
  25. var HiddenRate = BodyWidth / TableWidth; // 滚动条比率
  26. var HiddenWidth = BodyWidth - (TableWidth - BodyWidth) * HiddenRate; // 现滚动条大小
  27. var CSHtmlStr = "<div class='CSBar' style='width: " + HiddenWidth + "px;'></div>";
  28. $(JqStr).next().append(CSHtmlStr);
  29. }
  30. Index += 1;
  31. });
  32. $.each($(".container-table"), function (index, item) {
  33. $(item).css("width", BodyWidth + "px");
  34. });
  35. // 滚动条事件
  36. $(".TableContainer").on("touchstart", function () {
  37. pressTableFlag = true;
  38. }).on("touchmove", function () {
  39. var TableWidth = isNaN(parseFloat($(this).find("table").width())) ? 0 : parseFloat($(this).find("table").width()); // 表格宽度
  40. BodyWidth = isNaN(parseFloat($(document).width())) ? 0 : parseFloat($(document).width()); // 界面宽度
  41. var HiddenRate = BodyWidth / TableWidth; // 滚动条比率
  42. var SLeftWdith = isNaN(parseFloat($(this)[0].scrollLeft)) ? 0 : parseFloat($(this)[0].scrollLeft);
  43. SLeftWdith *= HiddenRate;
  44. var NextClsName = $(this).next().attr("class");
  45. if (NextClsName == "PSBar") {
  46. $(this).next().find(".CSBar").css("left", SLeftWdith + "px");
  47. }
  48. });
  49. window.addEventListener("scroll", function (event) {
  50. var ClsName = event.target.className;
  51. if (ClsName == undefined) {
  52. return;
  53. }
  54. ClsName = ClsName.replace("TableContainer ", ".");
  55. var TableWidth = isNaN(parseFloat($(ClsName).find("table").width())) ? 0 : parseFloat($(ClsName).find("table").width()); // 表格宽度
  56. BodyWidth = isNaN(parseFloat($(document).width())) ? 0 : parseFloat($(document).width()); // 界面宽度
  57. var HiddenRate = BodyWidth / TableWidth; // 滚动条比率
  58. var SLeftWdith = isNaN(parseFloat($(ClsName)[0].scrollLeft)) ? 0 : parseFloat($(ClsName)[0].scrollLeft);
  59. SLeftWdith *= HiddenRate;
  60. var NextClsName = $(ClsName).next().attr("class");
  61. if (NextClsName == "PSBar") {
  62. $(ClsName).next().find(".CSBar").css("left", SLeftWdith + "px");
  63. }
  64. }, true);
  65. };