add resizable columns demo

esvit · Dec 15, 2013 · 107138b · 107138b
1 parent f7c0ee7
commit 107138b
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 6 deletions.
diff --git a/examples/demo26.html b/examples/demo26.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>
+<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>
+<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>
+<html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!-->
+<html class="no-js"> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
+    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
+    <script src="js/angular.min.js"></script>
+    <script src="../ng-table.src.js"></script>
+    <script src="js/ng-table-resizable-columns.js"></script>
+    <link rel="stylesheet" href="../ng-table.css">
+</head>
+<body ng-app="main">
+
+<h1>Table with custom header class</h1>
+
+<div ng-controller="DemoCtrl">
+
+    <table ng-table="tableParams" show-filter="true" class="table ng-table-resizable-columns ng-table-rowselected">
+        <tr ng-repeat="user in $data"
+            ng-click="user.$selected = !user.$selected; changeSelection(user)"
+            ng-class="{'active': user.$selected}">
+            <td data-title="'Name'" header-class="text-left" sortable="'name'" filter="{ 'name': 'text' }">
+                {{user.name}}
+            </td>
+            <td data-title="'Age'" header-class="text-right" class="text-right" sortable="'age'" filter="{ 'age': 'text' }">
+                {{user.age}}
+            </td>
+        </tr>
+    </table>
+
+<style>
+.ng-table th.text-right {
+    text-align: right;
+}
+.ng-table th.text-left {
+    text-align: left;
+}
+</style>
+
+<script>
+    var app = angular.module('main', ['ngTable', 'ngTableResizableColumns']).
+            controller('DemoCtrl', function ($scope, $filter, ngTableParams) {
+                var data = [
+                    {name: "Moroni", age: 50},
+                    {name: "Tiancum", age: 43},
+                    {name: "Jacob", age: 27},
+                    {name: "Nephi", age: 29},
+                    {name: "Enos", age: 34},
+                    {name: "Tiancum", age: 43},
+                    {name: "Jacob", age: 27},
+                    {name: "Nephi", age: 29},
+                    {name: "Enos", age: 34},
+                    {name: "Tiancum", age: 43},
+                    {name: "Jacob", age: 27},
+                    {name: "Nephi", age: 29},
+                    {name: "Enos", age: 34},
+                    {name: "Tiancum", age: 43},
+                    {name: "Jacob", age: 27},
+                    {name: "Nephi", age: 29},
+                    {name: "Enos", age: 34}
+                ];
+                $scope.data = data;
+
+                $scope.tableParams = new ngTableParams({
+                    page: 1,            // show first page
+                    count: 10,          // count per page
+                    filter: {
+                        //name: 'M'       // initial filter
+                    },
+                    sorting: {
+                        //name: 'asc'     // initial sorting
+                    }
+                }, {
+                    total: data.length, // length of data
+                    getData: function ($defer, params) {
+                        // use build-in angular filter
+                        var filteredData = params.filter() ?
+                                $filter('filter')(data, params.filter()) :
+                                data;
+                        var orderedData = params.sorting() ?
+                                $filter('orderBy')(filteredData, params.orderBy()) :
+                                data;
+
+                        params.total(orderedData.length); // set total for recalc pagination
+                        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
+                    }
+                });
+
+                $scope.changeSelection = function(user) {
+                    // console.info(user);
+                }
+            })
+</script>
+
+<style>
+.rc-handle-container {
+  position: relative; }
+
+.rc-handle {
+  position: absolute;
+  width: 7px;
+  cursor: ew-resize;
+  margin-left: -3px;
+  z-index: 2; }
+
+table.rc-table-resizing {
+  cursor: ew-resize; }
+  table.rc-table-resizing thead, table.rc-table-resizing thead > th, table.rc-table-resizing thead > th > a {
+    cursor: ew-resize; }
+</style>
+
+</div>
+
+
+</body>
+</html>
diff --git a/examples/js/ng-table-resizable-columns.js b/examples/js/ng-table-resizable-columns.js