diff options
| -rw-r--r-- | archaeological_finds/templates/ishtar/sheet_find.html | 11 | ||||
| -rw-r--r-- | ishtar_common/static/js/grid.tbltogrid.js | 106 | ||||
| -rw-r--r-- | ishtar_common/templates/base.html | 1 |
3 files changed, 116 insertions, 2 deletions
diff --git a/archaeological_finds/templates/ishtar/sheet_find.html b/archaeological_finds/templates/ishtar/sheet_find.html index c5d3eb638..429a7da2b 100644 --- a/archaeological_finds/templates/ishtar/sheet_find.html +++ b/archaeological_finds/templates/ishtar/sheet_find.html @@ -102,7 +102,10 @@ {% if forloop.counter0 %}<hr/>{% endif %} {% endfor %} -<table class='simple'> +{% if not item.source.count %} + <p class='alert'>{% trans "No document associated to this find" %}</p> +{% else %} +<table class='simple' id='{{window_id}}-docs'> <caption>{%trans "Documents"%}</caption> <tr> <th>{% trans "Title" %}</th> @@ -118,8 +121,12 @@ <td class='string'>{% if doc.associated_url %}<a href='{{doc.associated_url}}'>{% trans "Link"%}</a>{% endif %}</td> </tr> {% empty %} - <tr><td colspan="4" class='no_items'>{% trans "No document associated to this find" %}</td></tr> {% endfor %} </table> +<script type='text/javascript'> +tableToGrid('#{{window_id}}-docs', {}); +</script> +{% endif %} + {% endblock %} diff --git a/ishtar_common/static/js/grid.tbltogrid.js b/ishtar_common/static/js/grid.tbltogrid.js new file mode 100644 index 000000000..addab1e48 --- /dev/null +++ b/ishtar_common/static/js/grid.tbltogrid.js @@ -0,0 +1,106 @@ +/* + Transform a table to a jqGrid. + Peter Romianowski <peter.romianowski@optivo.de> + If the first column of the table contains checkboxes or + radiobuttons then the jqGrid is made selectable. +*/ +// Addition - selector can be a class or id +function tableToGrid(selector, options) { +jQuery(selector).each(function() { + if(this.grid) {return;} //Adedd from Tony Tomov + // This is a small "hack" to make the width of the jqGrid 100% + jQuery(this).width("99%"); + var w = jQuery(this).width(); + + // Text whether we have single or multi select + var inputCheckbox = jQuery('tr td:first-child input[type=checkbox]:first', jQuery(this)); + var inputRadio = jQuery('tr td:first-child input[type=radio]:first', jQuery(this)); + var selectMultiple = inputCheckbox.length > 0; + var selectSingle = !selectMultiple && inputRadio.length > 0; + var selectable = selectMultiple || selectSingle; + //var inputName = inputCheckbox.attr("name") || inputRadio.attr("name"); + + // Build up the columnModel and the data + var colModel = []; + var colNames = []; + jQuery('th', jQuery(this)).each(function() { + if (colModel.length === 0 && selectable) { + colModel.push({ + name: '__selection__', + index: '__selection__', + width: 0, + hidden: true + }); + colNames.push('__selection__'); + } else { + colModel.push({ + name: jQuery(this).attr("id") || jQuery.trim(jQuery.jgrid.stripHtml(jQuery(this).html())).split(' ').join('_'), + index: jQuery(this).attr("id") || jQuery.trim(jQuery.jgrid.stripHtml(jQuery(this).html())).split(' ').join('_'), + width: jQuery(this).width() || 150 + }); + colNames.push(jQuery(this).html()); + } + }); + var data = []; + var rowIds = []; + var rowChecked = []; + jQuery('tbody > tr', jQuery(this)).each(function() { + var row = {}; + var rowPos = 0; + jQuery('td', jQuery(this)).each(function() { + if (rowPos === 0 && selectable) { + var input = jQuery('input', jQuery(this)); + var rowId = input.attr("value"); + rowIds.push(rowId || data.length); + if (input.is(":checked")) { + rowChecked.push(rowId); + } + row[colModel[rowPos].name] = input.attr("value"); + } else { + row[colModel[rowPos].name] = jQuery(this).html(); + } + rowPos++; + }); + if(rowPos >0) { data.push(row); } + }); + + // Clear the original HTML table + jQuery(this).empty(); + + // Mark it as jqGrid + jQuery(this).addClass("scroll"); + + jQuery(this).jqGrid(jQuery.extend({ + datatype: "local", + width: w, + colNames: colNames, + colModel: colModel, + multiselect: selectMultiple + //inputName: inputName, + //inputValueCol: imputName != null ? "__selection__" : null + }, options || {})); + + // Add data + var a; + for (a = 0; a < data.length; a++) { + var id = null; + if (rowIds.length > 0) { + id = rowIds[a]; + if (id && id.replace) { + // We have to do this since the value of a checkbox + // or radio button can be anything + id = encodeURIComponent(id).replace(/[.\-%]/g, "_"); + } + } + if (id === null) { + id = a + 1; + } + jQuery(this).jqGrid("addRowData",id, data[a]); + } + + // Set the selection + for (a = 0; a < rowChecked.length; a++) { + jQuery(this).jqGrid("setSelection",rowChecked[a]); + } +}); +}; diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html index 9339df178..8cd3c7793 100644 --- a/ishtar_common/templates/base.html +++ b/ishtar_common/templates/base.html @@ -17,6 +17,7 @@ <script language="javascript" type="text/javascript" src="{{STATIC_URL}}/js/prettyPhoto/js/jquery.prettyPhoto.js"></script> <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/i18n/grid.locale-{{COUNTRY}}.js"></script> <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/jquery.jqGrid.min.js"></script> + <script language="javascript" type="text/javascript" src="{{STATIC_URL}}js/grid.tbltogrid.js"></script> <script language="javascript" type="text/javascript" src="{{STATIC_URL}}/js/ishtar.js"></script> <link type="text/css" href="{{JQUERY_UI_URL}}jquery-ui.css" rel="stylesheet" /> <link rel="stylesheet" href="{{STATIC_URL}}/js/prettyPhoto/css/prettyPhoto.css" /> |