Bảng dữ liệu (sheet) là cách hiển thị tối ưu nhất với một số lượng lớn dữ liệu có cùng thuộc tính, và trên máy tính cá nhân chúng ta có rất nhiều ứng dụng để tạo và xem dữ liệu dạng này như Microsoft Excel, OpenOffice Calc,... và cả trên điện toán đám mây với Google Spreadsheet, Zoho Sheet,... cho đến các ứng dụng trên nền tảng di động với Polaris Office, ...

Tuy nhiên, với sự phát triển ngày càng mạnh mẽ của ứng dụng trên nền web, sức mạnh của các ngôn ngữ web như JavaScript ngày càng được nâng cao, các nhà phát triển vẫn có thể tạo ra rất nhiều ứng dụng với JavaScript.

Và mục đích hôm nay là jsB@nk muốn giới thiệu với bạn bảy mã nguồn ứng dụng JavaScript có thể tạo nên các bảng dữ liệu cực kì sinh động với nhiều chức năng; các ứng dụng JavaScript được giới thiệu là: FlexiGrid, EditableGrid, jQGrid, TableSorter, DataTables, SlickGrid và Grid from jQuery UI.

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

Table has been the best way to display data. Take Microsoft Excel as an example, we can sort, arrange, edit and even filter the data easily just with a few clicks. This time, we will have a look at Grid Javascript plugin available in the web. With the application of javascript, it transforms a normal table into "Excel-like" layout which also comes with a bunch of features to load data, manipulate and viewing data.

Check out this top 7 Grid Javascript plugins, they are fully packed with features and pretty sure they will be extremely useful.

• FlexiGrid
  Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.
  • Resizable columns, height and width
  • Sortable column headers
  • Can convert an ordinary table
  • Ability to connect to an ajax data source (XML and JSON[new])
  • Paging
  • Show/Hide Columns
  • Toolbar
  • Search
  • Accessible API
• EditableGrid EditableGrid is an open source Javascript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running.
  • Load grid from XML or attach to an existing HTML table
  • Each column is typed
  • Edit cells with a suitable editor, according to the column type
  • Possibility to declare a list of possible values for the cells of a column
  • Built-in validators for data types
  • Insert and remove rows
  • Open Flash Chart integration: render charts from the grid data
  • Callbacks for all events
• jQGrid
  jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.
  • CSS BAsed themes
  • Pagination
  • Resizable Columns
  • Sorting & Various datatypes
  • Support for XML, JSON and arrays as data sources
  • Event handlers & user API
  • Multilanguage support
• TableSorter tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.
  • Multi-column sorting
  • Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates
  • Support secondary "hidden" sorting
  • Cross-browser
  • Small code size
• DataTables DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
  • Variable length pagination
  • On-the-fly filtering
  • Multi-column sorting with data type detection
  • Smart handling of column widths
  • Display data from almost any data source
  • Scrolling options for table viewport
  • jQuery UI ThemeRoller support
  • Dynamic creation of tables
  • Ajax auto loading of data
  • Hidden columns
• SlickGrid
  Quite simply, SlickGrid is a JavaScript grid/spreadsheet component. It is an advanced component and is going to be a bit more difficult to learn and configure, but once you realize its full potential, it will blow your mind!
  • Adaptive virtual scrolling
  • Extremely fast rendering speed
  • Supports jQuery UI Themes
  • Configurable & customizable
  • Column resize/reorder/show/hide
  • Pluggable cell formatters & editors
  • Support for editing and creating new rows.
  • Grouping, filtering, custom aggregators, and more!
  • Full keyboard navigation
• Grid from jQuery UI (coming soon) The jQuery UI Team is proud to announce that we are building a rich, fast grid widget that will enhance an HTML table with data linking, sorting, paging, filtering, row selection, and inline editing. Well, it's not yet released but it will be anytime soon.

• Mã nguồn
• In

• Lời bình (3)
• Viết

bởi naruto shippuden, 01/02/2012 08:02 AM
Phản hồi

oh thanks, it is free !!

bởi laphongten, 14/11/2013 03:11 PM
Phản hồi

thanks useful for me

bởi Amanda Ayers, 30/09/2016 05:09 PM
Phản hồi

Nice list! Thanks for sharing! You can also try the free ShieldUI grid controll, it offers enterprise grade performance at no price, check it out here: https://github.com/shieldui/shieldui-lite

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
Website của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới