EditTable.js 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  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 Index = 0;
  15. $.each($("table"), function (index, item) {
  16. var TableWidth = isNaN(parseFloat($(item).width())) ? 0 : parseFloat($(item).width()); // 表格宽度
  17. // 替换HTML
  18. var JqStr = ".TContain_" + Index;
  19. var BodyWidth = isNaN(parseFloat($(document).width())) ? 0 : parseFloat($(document).width()); // 界面宽度
  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. // 滚动条事件
  33. $(".TableContainer").on("touchstart", function () {
  34. pressTableFlag = true;
  35. }).on("touchmove", function () {
  36. var TableWidth = isNaN(parseFloat($(this).find("table").width())) ? 0 : parseFloat($(this).find("table").width()); // 表格宽度
  37. var BodyWidth = isNaN(parseFloat($(document).width())) ? 0 : parseFloat($(document).width()); // 界面宽度
  38. var HiddenRate = BodyWidth / TableWidth; // 滚动条比率
  39. var SLeftWdith = isNaN(parseFloat($(this)[0].scrollLeft)) ? 0 : parseFloat($(this)[0].scrollLeft);
  40. SLeftWdith *= HiddenRate;
  41. var NextClsName = $(this).next().attr("class");
  42. if (NextClsName == "PSBar") {
  43. $(this).next().find(".CSBar").css("left", SLeftWdith + "px");
  44. }
  45. });
  46. window.addEventListener("scroll", function (event) {
  47. var ClsName = event.target.className;
  48. if (ClsName == undefined) {
  49. return;
  50. }
  51. ClsName = ClsName.replace("TableContainer ", ".");
  52. var TableWidth = isNaN(parseFloat($(ClsName).find("table").width())) ? 0 : parseFloat($(ClsName).find("table").width()); // 表格宽度
  53. var BodyWidth = isNaN(parseFloat($(document).width())) ? 0 : parseFloat($(document).width()); // 界面宽度
  54. var HiddenRate = BodyWidth / TableWidth; // 滚动条比率
  55. var SLeftWdith = isNaN(parseFloat($(ClsName)[0].scrollLeft)) ? 0 : parseFloat($(ClsName)[0].scrollLeft);
  56. SLeftWdith *= HiddenRate;
  57. var NextClsName = $(ClsName).next().attr("class");
  58. if (NextClsName == "PSBar") {
  59. $(ClsName).next().find(".CSBar").css("left", SLeftWdith + "px");
  60. }
  61. }, true);
  62. };