add grid, initial version

lib/ui/grid.html

@@ -0,0 +1,49 @@
+<div>
+  <h1>grid</h1>
+  <hr />
+  <p>
+    创建一个统一样式的滚动列表元素。
+  </p>
+  <hr />
+  <h2>示例</h2>
+  <pre></pre>
+  <div id="grid-sample"></div>
+  <!-- <div style="height: 80px"></div> -->
+  <script type="text/javascript">
+    !function () {
+      const Grid = window["lib-ui"].Grid;
+
+      const grid = new Grid(document.querySelector('#grid-sample'));
+      // grid.height = 0;
+      grid.columns = [
+        { key: 'c1', caption: 'column 1' },
+        { key: 'c2', caption: 'column 2', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' },
+        { key: 'c3', caption: 'column 3', width: 90 },
+        { key: 'c4', caption: 'Note', type: Grid.ColumnTypes.Input }
+      ];
+      grid.cellClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) clicked.`);
+      grid.init();
+      const source = [];
+      for (let i = 0; i < 1000; i++) {
+        source.push(
+          { c1: 'abc', c2: true, c3: 12345, c4: 'Note note this is note', enabled: false },
+          { c1: 'abc2bbbbaaaaa', c2: false, c3: 1225, c4: 'Note note this is note' },
+          { c1: 'type', c2: false, c3: 121111 },
+          { c1: 'diff', c2: true, c3: 124445555555555555 }
+        );
+      }
+      grid.source = source;
+
+      window.grid = grid;
+    }();
+  </script>
+  <style type="text/css">
+    #grid-sample {
+      height: 400px;
+    }
+
+    #grid-sample>.grid {
+      height: 100%;
+    }
+  </style>
+</div>