Themes
Jennifer
Dark
Leave a comment
Common Styles
Typography
Forms
Icons
Navigation Bar
Panel
Bar Graph
Grid
Accordion
Default accordion
Close accordion
Multi Panel
Auto Complete
Default auto complete
Update word list
Button
Buttons Style
Radio. Get selected value
Radio. Set to the index
Radio. Set to the value
Check. Set to the index
Check. Set to the value
Color Picker
Default colorpicker
Combo Box
Get selected text
Set to the index
Custom SelectBox
Simple Select Box
Position of Select Box
Multi Selection for Select Box
Date Picker
Date Picker Style
Calendar Style
Daily date picker
Set the date range
Monthly date picker
Yearly date picker
Daily calendar
Dropdown
Vertical Menu Style
Dropdown Menu Style
Show & Hide dropdown
Auto Close prevention
Control by keyboard
Update list
Layout
Split Screens
Modal
Global modal
Inside modal
Notification
Notify Style
Notification to the top
Notification to the bottom
Paging
Paging Style
Default paging
Use the paging on the table
Progress Bar
Progress Bar Style
Horizontal progress bar
Vertical progress bar
Property View
Simple Property View
Complex Property View
Property View in Window
Property View in Panel
Property View with Accordian
Slider
Slider Style
Single slider
Double slider
Splitter
Splitter for Vertical
Splitter for Horizontal
Border Layout (with minSize)
Switch
Switch Style
Default switch
Tab
Tabs Style
Top tabs
Bottom tabs
Tab manipulation
Tab dragging
Use dropdown menu
Table
Tables Style
Default table
Cell merge in row
Use the extended area
Scroll to rows
Select to multiple rows
Mouse right-click event
Sorting rows
Editing rows
Right-click editing rows
Remove row
Append rows
Insert rows
Hide & Show columns
Export to CSV file
Import to CSV file
Append/Insert tree rows
Move/Remove/Modify tree rows
Update tree rows
Changing the row position via drag events
Tooltip
Tooltip Style
Popover Style
Default tooltip
With popover style
Tree
Tree Menu Style
Append nodes
Move/Remove/Update node
Tree dragging
Window
Window Style
Message Box Style
Move & Resizing window
Modal window
Using a different style
X-Table
Data scrolling
Data paging
Data paging & scrolling
Data filters
Horizontal scroll bar
Virtual scrolling
Virtual scrolling (Append Tree)
Virtual scrolling (Update Tree)
Code
HTML
jui.ready([ "grid.table" ], function(table) { table_13 = table("#table_13", { fields: [ null, "name", "age", "location" ], data: [ { name: "Hong", age: "20", location: "Ilsan" }, { name: "Jung", age: "30", location: "Seoul" }, { name: "Park", age: "15", location: "Yeosu" } ], scroll: true, resize: true }); table_13_submit = function() { var rows = [], nStart = new Date().getTime(); for(var i = 0; i < 100; i++) { rows.push({ name: "Alvin" + i, age: i, location: "LA" }); } table_13.insert(1, rows); var nEnd = new Date().getTime(); alert("Running time : " + (nEnd - nStart) + "ms"); } });
<button class="btn small" onclick="table_13_submit();"> <i class="icon-play"></i> Run </button> <table id="table_13" class="table classic" style="margin-top: 7px;"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Location</th> </tr> </thead> <tbody></tbody> </table> <script data-jui="#table_13" data-tpl="row" type="text/template"> <tr> <td><!= name !></td> <td><!= age !></td> <td><!= location !></td> </tr> </script>
Result
API
Leave a comment
Please enable JavaScript to view the
comments powered by Disqus.
comments powered by
Disqus
