jQuery EasyUI 1.0.5

Tutorial

Intruduction

This tutorial aims to use easyui framework to demonstrate how to create your web page easily.

First of all, you need to include some js and css file:

<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <script type="text/javascript" src="../jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../jquery.easyui.min.js"></script>

easyui predefines some icon CSS class which can show background image(16x16). If you wish to use it you need to include:

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

Contents

1. Menu and Button
   • Create a simple menu
   • Create a Link Button
   • Create a Menu Button
   • Create a Split Button
2. Layout
   • Build border layout for Web Pages
   • Complex layout on Panel
   • Create Accordion
   • Create Tabs
   • Create XP style left panel
3. DataGrid
   • Convert a HTML table to DataGrid
   • Add a pagination to DataGrid
   • Get selected row data from DataGrid
   • Add a toolbar to DataGrid
   • Frozen columns for DataGrid
   • Dynamic change DataGrid columns
   • Formatting DataGrid columns
   • Add sorting to DataGrid
   • Create column groups in DataGrid
   • CheckBox select on DataGrid
4. Window
   • My first window
   • Custom window tools
   • Window and Layout
   • Create Dialog
5. Tree
   • Create Tree from markup
   • Create Async Tree
   • Append nodes to tree
6. Form
   • Submit a form with Ajax
   • Add ComboTree field to a form
   • Form Validation