Browse Source

HUE-179. Automatically sync the checked state of the first checkbox of each row in the HtmlTable with it's 'selected' state.

Aaron Newton 15 years ago
parent
commit
3cdadc4b6c

+ 68 - 0
apps/jframegallery/src/jframegallery/templates/HtmlTable.HtmlTableCheckSelected.html

@@ -0,0 +1,68 @@
+{% comment %}
+Licensed to Cloudera, Inc. under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  Cloudera, Inc. licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+{% endcomment %}
+<!DOCTYPE html>
+<html>
+<head>
+	<title>HtmlTable HtmlTableCheckSelected</title>
+</head>
+<body>
+<div class=ccs-shared>
+
+	<p>Select a row. Notice how its checkbox automatically checks itself.</p>
+	<table data-filters=HtmlTable class="multiselect selectable sortable" cellpadding=0 cellspacing=0>
+		<thead>
+			<tr>
+				<th> &radic; </th>
+				<th> ID </th>
+				<th> TimeZone </th>
+				<th> Name </th>
+				<th> GEO Latitude </th>
+				<th> GEO Longitude </th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td> <input type=checkbox value=1> </td>
+				<td> 22 </td>
+				<td> New York City </td>
+				<td> America/New_York </td>
+				<td> 40.7255 </td>
+				<td> -73.9983 </td>
+			</tr>
+			<tr>
+				<td> <input type=checkbox value=2> </td>
+				<td> 23 </td>
+				<td> San Francisco </td>
+				<td> America/Los_Angeles </td>
+				<td> 37.7587 </td>
+				<td> -122.433 </td>
+			</tr>
+			<tr>
+				<td> <input type=checkbox value=3> </td>
+				<td> 24 </td>
+				<td> Boston </td>
+				<td> America/New_York </td>
+				<td> 42.3583 </td>
+				<td> -71.0603 </td>
+			</tr>
+		</tbody>
+	</table>
+
+</div>
+</body>
+</html>

+ 43 - 0
desktop/core/static/js/Source/BehaviorFilters/Behavior.HtmlTableCheckSelected.js

@@ -0,0 +1,43 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+/*
+---
+description: Adds support for automatically selecting a hidden checkbox/radio button for each selected row of an HtmlTable.
+provides: [Behavior.HtmlTableCheckSelected]
+requires: [Widgets/Behavior.HtmlTable]
+script: Behavior.HtmlTableCheckSelected.js
+...
+*/
+;(function(){
+
+function rowFocusHandler(row, selectedRows){
+	var box = row.getElement('input[type=checkbox], input[type=radio]');
+	if (!box) return;
+	box.set('checked', selectedRows.contains(row));
+}
+
+var events = {
+	rowFocus: rowFocusHandler,
+	rowUnfocus: rowFocusHandler
+};
+
+function HtmlTableCheckSelected(element){
+	element.retrieve('HtmlTable').addEvents(events);
+}
+
+Behavior.addGlobalPlugin('HtmlTable', 'HtmlTableCheckSelected', HtmlTableCheckSelected);
+
+}());

+ 1 - 0
desktop/core/static/js/Source/CCS/CCS.JFrame.js

@@ -44,6 +44,7 @@ requires:
  - /Behavior.DataGroupToggle
  - /Behavior.FilterInput
  - /Behavior.FitText
+ - /Behavior.HtmlTableCheckSelected
  - /Behavior.HtmlTableChromeHack
  - /Behavior.HtmlTableKeyboard
  - /Behavior.HtmlTableMultiSelectMenu

+ 1 - 0
desktop/core/static/js/package.yml

@@ -52,6 +52,7 @@ sources: [
   Source/BehaviorFilters/Behavior.DataGroupToggle.js,
   Source/BehaviorFilters/Behavior.FilterInput.js,
   Source/BehaviorFilters/Behavior.FitText.js,
+  Source/BehaviorFilters/Behavior.HtmlTableCheckSelected.js,
   Source/BehaviorFilters/Behavior.HtmlTableChromeHack.js,
   Source/BehaviorFilters/Behavior.HtmlTableKeyboard.js,
   Source/BehaviorFilters/Behavior.HtmlTableMultiSelectMenu.js,