grid.tbltogrid.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. /**
  2. Transform a table to a jqGrid.
  3. Peter Romianowski <peter.romianowski@optivo.de>
  4. If the first column of the table contains checkboxes or
  5. radiobuttons then the jqGrid is made selectable.
  6. */
  7. /*jslint browser: true, plusplus: true, white: true */
  8. /*global jQuery, define, exports, module, require */
  9. // Addition - selector can be a class or id
  10. (function (global, factory) {
  11. "use strict";
  12. if (typeof define === "function" && define.amd) {
  13. // AMD. Register as an anonymous module.
  14. define([
  15. "jquery",
  16. "./grid.base"
  17. ], function ($) {
  18. return factory($, global);
  19. });
  20. } else if (typeof module === "object" && module.exports) {
  21. // Node/CommonJS
  22. module.exports = function (root, $) {
  23. if (!root) {
  24. root = window;
  25. }
  26. if ($ === undefined) {
  27. // require("jquery") returns a factory that requires window to
  28. // build a jQuery instance, we normalize how we use modules
  29. // that require this pattern but the window provided is a noop
  30. // if it's defined (how jquery works)
  31. $ = typeof window !== "undefined" ?
  32. require("jquery") :
  33. require("jquery")(root);
  34. }
  35. require("./grid.base");
  36. return factory($, root);
  37. };
  38. } else {
  39. // Browser globals
  40. factory(jQuery, global);
  41. }
  42. }(typeof window !== "undefined" ? window : this, function ($, window) {
  43. "use strict";
  44. // begin module grid.tbltogrid
  45. window.tableToGrid = function (selector, options) {
  46. $(selector).each(function () {
  47. var self = this, $self = $(this), w, inputCheckbox, inputRadio, selectMultiple, selectSingle, selectable, a, id,
  48. colModel = [], colNames = [], data = [], rowIds = [], rowChecked = [];
  49. if (self.grid) {
  50. return;//Adedd by Tony Tomov
  51. }
  52. // This is a small "hack" to make the width of the jqGrid 100%
  53. $self.width("99%");
  54. w = $self.width();
  55. // Text whether we have single or multi select
  56. inputCheckbox = $("tr td:first-child input[type=checkbox]:first", $self);
  57. inputRadio = $("tr td:first-child input[type=radio]:first", $self);
  58. selectMultiple = inputCheckbox.length > 0;
  59. selectSingle = !selectMultiple && inputRadio.length > 0;
  60. selectable = selectMultiple || selectSingle;
  61. //var inputName = inputCheckbox.attr("name") || inputRadio.attr("name");
  62. // Build up the columnModel and the data
  63. $("th", $self).each(function () {
  64. if (colModel.length === 0 && selectable) {
  65. colModel.push({
  66. name: "__selection__",
  67. index: "__selection__",
  68. width: 0,
  69. hidden: true
  70. });
  71. colNames.push("__selection__");
  72. } else {
  73. colModel.push({
  74. name: $(this).attr("id") || $.trim($.jgrid.stripHtml($(this).html())).split(" ").join("_"),
  75. index: $(this).attr("id") || $.trim($.jgrid.stripHtml($(this).html())).split(" ").join("_"),
  76. width: $(this).width() || 150
  77. });
  78. colNames.push($(this).html());
  79. }
  80. });
  81. $("tbody > tr", $self).each(function () {
  82. var row = {}, rowPos = 0;
  83. $("td", $(this)).each(function () {
  84. if (rowPos === 0 && selectable) {
  85. var input = $("input", $(this)), rowId = input.attr("value");
  86. rowIds.push(rowId || data.length);
  87. if (input.is(":checked")) {
  88. rowChecked.push(rowId);
  89. }
  90. row[colModel[rowPos].name] = input.attr("value");
  91. } else {
  92. row[colModel[rowPos].name] = $(this).html();
  93. }
  94. rowPos++;
  95. });
  96. if (rowPos > 0) {
  97. data.push(row);
  98. }
  99. });
  100. // Clear the original HTML table
  101. $self.empty();
  102. $self.jqGrid($.extend({
  103. datatype: "local",
  104. width: w,
  105. colNames: colNames,
  106. colModel: colModel,
  107. multiselect: selectMultiple
  108. //inputName: inputName,
  109. //inputValueCol: imputName != null ? "__selection__" : null
  110. }, options || {}));
  111. // Add data
  112. for (a = 0; a < data.length; a++) {
  113. id = null;
  114. if (rowIds.length > 0) {
  115. id = rowIds[a];
  116. if (id && id.replace) {
  117. // We have to do this since the value of a checkbox
  118. // or radio button can be anything
  119. id = encodeURIComponent(id).replace(/[.\-%]/g, "_");
  120. }
  121. }
  122. if (id === null) {
  123. id = $.jgrid.randId();
  124. }
  125. $self.jqGrid("addRowData", id, data[a]);
  126. }
  127. // Set the selection
  128. for (a = 0; a < rowChecked.length; a++) {
  129. $self.jqGrid("setSelection", rowChecked[a]);
  130. }
  131. });
  132. };
  133. // end module grid.tbltogrid
  134. return window.tableToGrid;
  135. }));