Sigma Grid 2.4 探究 1

Sigma Grid 简介

Sigma Grid 是纯javascript实现的网页grid，支持数据修改，排序，分页，滚动，显示chart等等，功能比较全面，且易于与其他网页language整合。

研究版本：Sigma Grid 2.4

Grid目录结构：
grid
|--->calendar
|      |--calendar.js
|      |--calendar-blue.css
|      |--calendar-cn.js
|      |--calendar-cn-utf8.js
|      |--calendar-en.js
|      |--calendar-setup.js
|      |--simple-1.html
|--> flashchart
|      |---->fusioncharts
|      |       |--->charts
|      |       |      |--FCF_Area2D.swf
|      |       |      |--略……(.swf)
|      |       |--ChangeDataXML.html
|      |       |--Chart.html
|      |       |--ChartChange.html
|      |       |--FusionCharts.js
|--->skin
|      |---->default
|      |       |--->images
|      |       |      |--button_bg.gif
|      |       |      |-- 略……(.gif)
|      |       |--skinstyle.css
|      |---->mac
|      |       |--->images
|      |       |      |--button_bg.gif
|      |       |      |-- 略……(.gif)
|      |       |--skinstyle.css
|      |---->vista
|      |       |--->images
|      |       |      |--cell_index_bg.gif
|      |       |      |-- 略……(.gif)
|      |       |--skinstyle.css
|--gt_grid_all.js
|--gt_grid_height.css
|--gt_grid.css
|--gt_msg_cn.js
|--gt_msg_en.js

Integration Samples

Master/Details
In a master-detail case you have at least two grids. One is linked to the other somehow. In this demo, we have a list of customers, and sales for each customer.
Cell phones shop
In the mockup, you will see how to change row height, display images  and create button in cells.

 

Cell Editor &  Renderer

User defined cell renderer
This demo shows how to customize cells presentation. In fact, you can display data with formate as you wish. 
Cell editor customization
This sample shows how to pop up a dialog for complex user input. Enhanced in version 2.2.
Image cell - Hyper link cell 
These two samples demonstrate how to display image and hyper link in cells.
Long text in cell
Simga grid allow you to store a long text in a cell. A tip box will pop up when mouse is over those cells. 
Various cell editor
Text input, downdown list and calendar are built in for cell input.
Data validation
This feature help you validate input before the content is accepted.

Export

Export To PDF
This example show how sigma grid export data to pdf files.  New in version 2.2.
Export To Excel
This example show how sigma grid export data to excel files.  New in version 2.2.
Export To XML
This example show how sigma grid export data to xml files.  New in version 2.2.
Export To CSV
This example show how sigma grid export data to csv files.  New in version 2.2.

Filtering

Dynamic search
Data filter enables sigma grid to present the data users are interested in only.
Filters combination
Developer can apply a couple of filters to one grid in the same time.  

Formular

Math formulas for cells
Developer can specify some cells to be a formula instead of a value. What is more, whether a cell is editable could depend on a boolean formula.

 

Grid 

Show and hide grid
This is a basic example showing how to show or hide a grid in run time.
Main menu
This sample demonstrates built-in main menu with many functionalities.
Resizable grid
End user can resize grid by dragging and dropping the right bottom angle.
CSS Based Themes
The Datagrid look is controled via CSS. Choose from existing themes, or create your own.
Event
Plentiful attibutes and event handlers give you more flexibility without coding too much.
Customized Button 
Developer can make his/her own button on the grid tool bar, just like a native button.

Header

Controls in header
The feature allows your to place controls in header.
Nested headers
Span the grid column headers. Useful to group columns under a category.
Add image to header
The feature provides end users with a vivid description of header by inserting a picture to it.

Huge datasets

Paging
Sigma grid enables easy paging through data. When using the built-in paging functionality you do not need to much coding work. You can set the grid to use paging and specify a page size (number of records to display).
Checkbox in paginal grid
This feature enables the grid to save checkbox status in paginal grid.

Printing & Chart

Print
The feature helps end users to print out the grid.
Print complex grids
The feature helps end users to print out complex grids.
Charts and graghs
Bar diagram, line diagram and pie diagram built in. Translation tabular data into diagram without any server-side coding. 

Rows

Selectable Single or Multiple Rows
This Online orders example demonstrates the ability to select multiple rows in the grid.
Change row height
The cell phone shop sample show ability of sigma grid to change it's row height.
Highlight row on mouse over
Sigma grid provides the functionality to highlight the row by adding a dazzle underline.
Highlight row in condition
Sigma grid provides the functionality to highlight the row by specifying a customization property. New in version 2.2.
Row number
Sigma grid provides the functionality to show row numbers in the left.
Add or delete a row
The feature enables end users to add or delete a row easily.
Row striple
The feature facilitates grid viewing by striped rows.

Column

Lockable header and column
This feature enable you to keep some columns and/or header always visible in spite of user scrolling grid. Similar to the window freeze panes option in MS Excel.
Movable columns
The feature enables end user to move any column to a new location in the grid.
Resizable columns
The feature enables end user to resize the column widths.
Sortable columns
The feature enables end user to End users can sort the table by clicking on the header of a column.
Customized Sorting
Sample shows how to sort column with a specific rule.
Grouping by column
This sample shows how to group by column.

Server Side Helper

Remote paging

This feature enable you to keep some columns and/or header always visible in spite of user scrolling grid. Similar to the window freeze panes option in MS Excel.

Enhanced in version 2.2.
Remote sorting

The feature enables end user to move any column to a new location in the grid.

Enhanced in version 2.2.