optimized

lib/ui/grid.html

@@ -4,6 +4,137 @@
   <p>
     创建一个统一样式的滚动列表元素。
   </p>
+  <h2>constructor</h2>
+  <code>new(container: HTMLElement): Grid</code>
+  <h3>container: HTMLElement</h3>
+  <p>
+    父容器元素，Grid 将创建在此元素之内
+  </p>
+  <h2>init</h2>
+  <code>init(container?: HTMLElement): void</code>
+  <h3>container?: HTMLElement</h3>
+  <p>
+    父容器元素，默认使用构造函数中传递的值
+  </p>
+  <h2>scrollToIndex</h2>
+  <code>scrollToIndex(index: Number): void</code>
+  <h3>index: Number</h3>
+  <p>
+    将滚动至此行
+  </p>
+  <h2>resize</h2>
+  <code>resize(force?: boolean): void</code>
+  <h3>force?: boolean</h3>
+  <p>
+    重新计算大小，参数表示是否强制重载
+  </p>
+  <h2>reload</h2>
+  <code>reload(): void</code>
+  <p>
+    重载表格元素
+  </p>
+  <h2>refresh</h2>
+  <code>refresh(): void</code>
+  <p>
+    刷新表格单元格值
+  </p>
+  <h2>resetChange</h2>
+  <code>resetChange(): void</code>
+  <p>
+    还原表格修改状态，置为未修改
+  </p>
+  <h2>sortColumn</h2>
+  <code>sortColumn(reload?: boolean): void</code>
+  <h3>reload?: boolean</h3>
+  <p>
+    根据当前设定的排序列排序，参数表示是否重载表格
+  </p>
+  <hr />
+  <h2>sortIndex</h2>
+  <code>sortIndex?: Number</code>
+  <p>
+    排序的列序号
+  </p>
+  <h2>sortDirection</h2>
+  <code>sortDirection?: keyof GridColumnDirection</code>
+  <p>
+    排序的方向，可选值为 <code>-1: desc</code>、<code>1: asc</code>
+  </p>
+  <h2>columns</h2>
+  <code>columns: Array&lt;GridColumnDefinition&gt;</code>
+  <p>
+    表格列的定义，结构为
+  <pre>interface GridColumnDefinition {
+      key?: string;
+      type?: keyof GridColumnType | typeof GridColumn;
+      caption?: string;
+      width?: Number;
+      align?: "left" | "center" | "right";
+      enabled?: boolean | string;
+      css?: { [key: string]: string };
+      styleFilter?: (item: GridItem | any) => { [key: string]: string };
+      textStyle?: { [key: string]: string };
+      visible?: boolean;
+      resizable?: boolean;
+      sortable?: boolean;
+      orderable?: boolean;
+      allcheck?: boolean;
+      events?: { [event: string]: any };
+      attrs?: { [key: string]: string } | ((item: GridItem | any) => { [key: string]: string });
+      filter?: (item: GridItem | any) => any;
+      sortFilter?: (a: GridItem | any, b: GridItem | any) => -1 | 0 | 1;
+      bgFilter?: (item: GridItem | any) => string;
+      dropOptions?: DropdownOptions;
+      source?: Array&lt;any&gt; | ((item: GridItem | any) => Array&lt;any&gt;);
+      iconType?: string;
+      text?: string;
+      tooltip?: string;
+      onallchecked?: (this: Grid, col: GridColumnDefinition, flag: boolean) => void;
+      onchanged?: (this: Grid, item: GridItem | any, value: boolean | any) => void;
+  }</pre>
+  </p>
+  <h3>key</h3>
+  <code>key?: string</code>
+  <p>关键字</p>
+  <h3>type</h3>
+  <code>type?: keyof GridColumnType | typeof GridColumn</code>
+  <p>列类型，可以为 <code>Grid.ColumnTypes</code> 枚举值表示内置的通用、输入、下拉、复选框、图标等类型
+  <pre>declare var ColumnTypes: {
+      Common: 0,
+      Input: 1,
+      Dropdown: 2,
+      Checkbox: 3,
+      Icon: 4,
+      isCheckbox(type: Number): boolean;
+  }</pre>也可以为符合 <code>GridColumn</code> 接口的类或对象表示自定义类型，接口定义如下
+  <pre>interface GridColumn {
+    static create(): HTMLElement;
+    static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement;
+    static setValue(element: HTMLElement, val: any): void;
+    static getValue(e: any): any;
+    static setStyle(element: HTMLElement, style: { [key: string]: string }): void;
+    static setEnabled(element: HTMLElement, enabled?: boolean): void;
+}</pre>
+  </p>
+  <h4>create</h4>
+  <code>static create(): HTMLElement</code>
+  <p>创建只读状态的单元格元素</p>
+  <h4>createEdit</h4>
+  <code>static createEdit(trigger: (e: any) => void, col: GridColumnDefinition, body: HTMLElement): HTMLElement</code>
+  <p>创建编辑状态的单元格元素</p>
+  <samp>trigger: (e: any) => void</samp>
+  <p>用以触发 Grid 的列修改事件 <code>columnChanged</code> 的函数代理</p>
+  <samp>col: GridColumnDefinition</samp>
+  <p>当前列的定义对象</p>
+  <samp>body: HTMLElement</samp>
+  <p>Grid 正文表格元素</p>
+  <h4>setValue</h4>
+  <code>static setValue(element: HTMLElement, val: any): void</code>
+  <p>设置单元格值时触发的函数</p>
+  <samp>element: HTMLElement</samp>
+  <p>单元格元素</p>
+  <samp>val: any</samp>
+  <p>单元格的值</p>
   <hr />
   <h2>示例</h2>
   <pre></pre>
@@ -38,7 +169,7 @@
       grid.allowHtml = true;
       grid.height = 0;
       grid.columns = [
-        { key: 'c1', caption: 'column 122222222311111111111111111' },
+        { key: 'c1', caption: 'column 122222222311111111111111111', shrink: true },
         { key: 'c2', caption: '选择', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' },
         {
           key: 'c2a',