Sigma Grid 簡介

Sigma Grid 是純javascript實(shí)現(xiàn)的網(wǎng)頁grid，支持?jǐn)?shù)據(jù)修改，排序，分頁，滾動，顯示chart等等，功能比較全面，且易于與其他網(wǎng)頁language整合。

研究版本：Sigma Grid 2.4

Grid目錄結(jié)構(gòu)：
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
|????? |?????? |--->p_w_picpaths
|????? |?????? |????? |--button_bg.gif
|????? |?????? |????? |-- 略……(.gif)
|????? |?????? |--skinstyle.css
|????? |---->mac
|????? |?????? |--->p_w_picpaths
|????? |?????? |????? |--button_bg.gif
|????? |?????? |????? |-- 略……(.gif)
|????? |?????? |--skinstyle.css
|????? |---->vista
|????? |?????? |--->p_w_picpaths
|????? |?????? |????? |--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 p_w_picpaths? 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 p_w_picpath 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 p_w_picpath 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.

?

轉(zhuǎn)載于:https://blog.51cto.com/tinyking/646093

總結(jié)

以上是生活随笔為你收集整理的Sigma Grid 2.4 探究 1的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。