grid.tbltogrid.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  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. // Addition - selector can be a class or id
  8. function tableToGrid(selector, options) {
  9. jQuery(selector).each(function() {
  10. if(this.grid) {return;} //Adedd from Tony Tomov
  11. // This is a small "hack" to make the width of the jqGrid 100%
  12. jQuery(this).width("99%");
  13. var w = jQuery(this).width();
  14. // Text whether we have single or multi select
  15. var inputCheckbox = jQuery('tr td:first-child input[type=checkbox]:first', jQuery(this));
  16. var inputRadio = jQuery('tr td:first-child input[type=radio]:first', jQuery(this));
  17. var selectMultiple = inputCheckbox.length > 0;
  18. var selectSingle = !selectMultiple && inputRadio.length > 0;
  19. var selectable = selectMultiple || selectSingle;
  20. //var inputName = inputCheckbox.attr("name") || inputRadio.attr("name");
  21. // Build up the columnModel and the data
  22. var colModel = [];
  23. var colNames = [];
  24. jQuery('th', jQuery(this)).each(function() {
  25. if (colModel.length === 0 && selectable) {
  26. colModel.push({
  27. name: '__selection__',
  28. index: '__selection__',
  29. width: 0,
  30. hidden: true
  31. });
  32. colNames.push('__selection__');
  33. } else {
  34. colModel.push({
  35. name: jQuery(this).attr("id") || jQuery.trim(jQuery.jgrid.stripHtml(jQuery(this).html())).split(' ').join('_'),
  36. index: jQuery(this).attr("id") || jQuery.trim(jQuery.jgrid.stripHtml(jQuery(this).html())).split(' ').join('_'),
  37. width: jQuery(this).width() || 150
  38. });
  39. colNames.push(jQuery(this).html());
  40. }
  41. });
  42. var data = [];
  43. var rowIds = [];
  44. var rowChecked = [];
  45. jQuery('tbody > tr', jQuery(this)).each(function() {
  46. var row = {};
  47. var rowPos = 0;
  48. jQuery('td', jQuery(this)).each(function() {
  49. if (rowPos === 0 && selectable) {
  50. var input = jQuery('input', jQuery(this));
  51. var rowId = input.attr("value");
  52. rowIds.push(rowId || data.length);
  53. if (input.is(":checked")) {
  54. rowChecked.push(rowId);
  55. }
  56. row[colModel[rowPos].name] = input.attr("value");
  57. } else {
  58. row[colModel[rowPos].name] = jQuery(this).html();
  59. }
  60. rowPos++;
  61. });
  62. if(rowPos >0) { data.push(row); }
  63. });
  64. // Clear the original HTML table
  65. jQuery(this).empty();
  66. // Mark it as jqGrid
  67. jQuery(this).addClass("scroll");
  68. jQuery(this).jqGrid(jQuery.extend({
  69. datatype: "local",
  70. width: w,
  71. colNames: colNames,
  72. colModel: colModel,
  73. multiselect: selectMultiple
  74. //inputName: inputName,
  75. //inputValueCol: imputName != null ? "__selection__" : null
  76. }, options || {}));
  77. // Add data
  78. var a;
  79. for (a = 0; a < data.length; a++) {
  80. var id = null;
  81. if (rowIds.length > 0) {
  82. id = rowIds[a];
  83. if (id && id.replace) {
  84. // We have to do this since the value of a checkbox
  85. // or radio button can be anything
  86. id = encodeURIComponent(id).replace(/[.\-%]/g, "_");
  87. }
  88. }
  89. if (id === null) {
  90. id = a + 1;
  91. }
  92. jQuery(this).jqGrid("addRowData",id, data[a]);
  93. }
  94. // Set the selection
  95. for (a = 0; a < rowChecked.length; a++) {
  96. jQuery(this).jqGrid("setSelection",rowChecked[a]);
  97. }
  98. });
  99. };