Tag Archives: easyUI

Download jQuery EasyUI 1.5.1

ChangeLog

Bug
  • datagrid: The selecting and checking flags will lose after calling ‘updateRow’ method. fixed.
  • tabs: The trip tools have a wrong position when calling ‘update’ method. fixed.
  • window: When the height is set to ‘auto’, it will disappear after moving the window. fixed.
  • messager: When display the progress message window and then close it immediately, an exception occurs. fixed.
  • form: The ‘clear’ method does not clear the selected drop-down items of the combobox. fixed.
Improvement
  • textbox: The ‘cls’ property is available to add a custom style to textbox.
  • numberbox: Allow the user to format currency in Italian.
  • combo: Add ‘multivalue’ property that allows the user to determine how to submit the multiple values.
  • combobox: Add ‘reversed’ property.
  • combobox: Add ‘onClick’ event.
  • combogrid: Add ‘reversed’ property.
  • treegrid: Enable multiple selection with the shift key.
New Plugins
  • tagbox: Allows the user to add tags to a form field.

Download EasyUI Package

There are two editions of EasyUI package:

Freeware Edition

The Freeware Edition is available under Freeware License, you can use it in any freeware-licensed projects. Download jQuery EasyUI under freeware license:

Download

Download jQuery EasyUI 1.4.4

ChangeLog

Bug
  • filebox: The ‘clear’ and ‘reset’ methods do not work properly in IE9. fixed.
  • messager: After calling $.messager.progress() with no arguments, the $.messager.progress(‘close’) does not work properly. fixed.
  • timespinner: The value does not display properly in IE8 while clicking the spin buttons. fixed.
  • window: The window does not display when calling ‘options’ method in ‘onMove’ event. fixed.
  • treegrid: The ‘getLevel’ method does not accept the parameter value of 0. fixed.
Improvement
  • layout: The ‘collapsedContent’,’expandMode’ and ‘hideExpandTool’ properties are supported in region panel.
  • layout: The ‘hideCollapsedContent’ property can be set to display the vertical title bar on collapsed panel.
  • layout: Add ‘onCollapse’,’onExpand’,’onAdd’,’onRemove’ events.
  • datagrid: Display the ‘up-down’ icon on the sortable columns.
  • datagrid: Add ‘gotoPage’ method.
  • propertygrid: Add ‘groups’ method that allows to get all the data groups.
  • messager: Auto scroll feature is supported when displaying long messages.
  • tabs: The ‘disabled’ property is supported when defining a disabled tab panel.
  • tabs: The percentange size is supported now.

Download EasyUI Package

There are two editions of EasyUI package:

Freeware Edition

The Freeware Edition is available under Freeware License, you can use it in any freeware-licensed projects. Download jQuery EasyUI under freeware license:

Download

Commercial Edition

The Commercial Edition is also available under Commercial License, you can use it in a commercial project.

Purchase

Other Versions

The other released versions of jQuery EasyUI are also available. Click here to view a listing and choose which version you would like to download.

Download jQuery EasyUI 1.3.5

Current Version: 1.3.5

ChangeLog

Bug
  • searchbox: The ‘searcher’ function can not offer ‘name’ parameter value correctly. fixed.
  • combo: The ‘isValid’ method can not return boolean value. fixed.
  • combo: Clicking combo will trigger the ‘onHidePanel’ event of other combo components that have hidden drop-down panels. fixed.
  • combogrid: Some methods can not inherit from combo. fixed.
Improvement
  • datagrid: Improve performance on checking rows.
  • menu: Allows to append a menu separator.
  • menu: Add ‘hideOnUnhover’ property to indicate if the menu should be hidden when mouse exits it.
  • slider: Add ‘clear’ and ‘reset’ methods.
  • tabs: Add ‘unselect’ method that will trigger ‘onUnselect’ event.
  • tabs: Add ‘selected’ property to specify what tab panel will be opened.
  • tabs: The ‘collapsible’ property of tab panel is supported to determine if the tab panel can be collapsed.
  • tabs: Add ‘showHeader’ property, ‘showHeader’ and ‘hideHeader’ methods.
  • combobox: The ‘disabled’ property can be used to disable some items.
  • tree: Improve loading performance.
  • pagination: The ‘layout’ property can be used to customize the pagination layout.
  • accordion: Add ‘unselect’ method that will trigger ‘onUnselect’ event.
  • accordion: Add ‘selected’ and ‘multiple’ properties.
  • accordion: Add ‘getSelections’ method.
  • datebox: Add ‘sharedCalendar’ property that allows multiple datebox components share one calendar component.

License: GPL License Commercial License

Plugins

draggable
droppable
resizable
panel
tabs
accordion
layout
linkbutton
menubutton
splitbutton
menu
form
combo
combobox
combotree
combogrid
numberbox
validatebox
searchbox
messager
progressbar
spinner
numberspinner
timespinner
window
dialog
datagrid
propertygrid
pagination
tree
treegrid
calendar
datebox
datetimebox
slider
tooltip
parser

Download this EasyUI package:

Download jQuery EasyUI 1.3.4

Download jQuery EasyUI 1.3.4

Current Version: 1.3.4

ChangeLog

Bug
  • combobox: The onLoadSuccess event fires when parsing empty local data. fixed.
  • form: Calling ‘reset’ method can not reset datebox field. fixed.
Improvement
  • mobile: The context menu and double click features are supported on mobile devices.
  • combobox: The ‘groupField’ and ‘groupFormatter’ options are available to display items in groups.
  • tree: When append or insert nodes, the ‘data’ parameter accepts one or more nodes data.
  • tree: The ‘getChecked’ method accepts a single ‘state’ or an array of ‘state’.
  • tree: Add ‘scrollTo’ method.
  • datagrid: The ‘multiSort’ property is added to support multiple column sorting.
  • datagrid: The ‘rowStyler’ and column ‘styler’ can return CSS class name or inline styles.
  • treegrid: Add ‘load’ method to load data and navigate to the first page.
  • tabs: Add ‘tabWidth’ and ‘tabHeight’ properties.
  • validatebox: The ‘novalidate’ property is available to indicate whether to perform the validation.
  • validatebox: Add ‘enableValidation’ and ‘disableValidation’ methods.
  • form: Add ‘enableValidation’ and ‘disableValidation’ methods.
  • slider: Add ‘onComplete’ event.
  • pagination: The ‘buttons’ property accepts the existing element.

License: GPL License Commercial License

Plugins

draggable
droppable
resizable
panel
tabs
accordion
layout
linkbutton
menubutton
splitbutton
menu
form
combo
combobox
combotree
combogrid
numberbox
validatebox
searchbox
messager
progressbar
spinner
numberspinner
timespinner
window
dialog
datagrid
propertygrid
pagination
tree
treegrid
calendar
datebox
datetimebox
slider
tooltip
parser

Download this EasyUI package:

Download jQuery EasyUI 1.3.3

Current Version: 1.3.3

ChangeLog

Bug
  • datagrid: Some style features are not supported by column styler function. fixed.
  • datagrid: IE 31 stylesheet limit. fixed.
  • treegrid: Some style features are not supported by column styler function. fixed.
  • menu: The auto width of menu item displays incorrect in ie6. fixed.
  • combo: The ‘onHidePanel’ event can not fire when clicked outside the combo area. fixed.
Improvement
  • datagrid: Add ‘scrollTo’ and ‘highlightRow’ methods.
  • treegrid: Enable treegrid to parse data from element.
  • combo: Add ‘selectOnNavigation’ and ‘readonly’ options.
  • combobox: Add ‘loadFilter’ option to allow users to change data format before loading into combobox.
  • tree: Add ‘onBeforeDrop’ callback event.
  • validatebox: Dependent on tooltip plugin now, add ‘deltaX’ property.
  • numberbox: The ‘filter’ options can be used to determine if the key pressed was accepted.
  • linkbutton: The group button is available.
  • layout: The ‘minWidth’,’maxWidth’,’minHeight’,’maxHeight’ and ‘collapsible’ properties are available for region panel.
New Plugins
  • tooltip: Display a popup message when moving mouse over an element.

License: GPL License Commercial License

Plugins

draggable
droppable
resizable
panel
tabs
accordion
layout
linkbutton
menubutton
splitbutton
menu
form
combo
combobox
combotree
combogrid
numberbox
validatebox
searchbox
messager
progressbar
spinner
numberspinner
timespinner
window
dialog
datagrid
propertygrid
pagination
tree
treegrid
calendar
datebox
datetimebox
slider
tooltip
parser

Download this EasyUI package:

Download jQuery EasyUI 1.3.2

Current Version: 1.3.2

ChangeLog

Bug
  • datagrid: The loading message window can not be centered when changing the width of datagrid. fixed.
  • treegrid: The ‘mergeCells’ method can not work normally. fixed.
  • propertygrid: Calling ‘endEdit’ method to stop editing a row will cause errors. fixed.
  • tree: Can not load empty data when ‘lines’ property set to true. fixed.
Improvement
  • RTL feature is supported now.
  • tabs: Add ‘scrollBy’ method to scroll the tab header by the specified amount of pixels.
  • tabs: Add ‘toolPosition’ property to set tab tools to left or right.
  • tabs: Add ‘tabPosition’ property to define the tab position, possible values are: ‘top’,’bottom’,’left’,’right’.
  • datagrid: Add a column level property ‘order’ that allows users to define different default sort order per column.
  • datagrid: Add a column level property ‘halign’ that allows users to define how to align the column header.
  • datagrid: Add ‘resizeHandle’ property to define the resizing column position, by grabbing the left or right edge of the column.
  • datagrid: Add ‘freezeRow’ method to freeze some rows that will always be displayed at the top when the datagrid is scrolled down.
  • datagrid: Add ‘clearChecked’ method to clear all checked records.
  • datagrid: Add ‘data’ property to initialize the datagrid data.
  • linkbutton: Add ‘iconAlgin’ property to define the icon position, supported values are: ‘left’,’right’.
  • menu: Add ‘minWidth’ property.
  • menu: The menu width can be automatically calculated.
  • tree: New events are available including ‘onBeforeDrag’,’onStartDrag’,’onDragEnter’,’onDragOver’,’onDragLeave’,etc.
  • combo: Add ‘height’ property to allow users to define the height of combo.
  • combo: Add ‘reset’ method.
  • numberbox: Add ‘reset’ method.
  • spinner: Add ‘reset’ method.
  • spinner: Add ‘height’ property to allow users to define the height of spinner.
  • searchbox: Add ‘height’ property to allow users to define the height of searchbox.
  • form: Add ‘reset’ method.
  • validatebox: Add ‘delay’ property to delay validating from the last inputting value.
  • validatebox: Add ‘tipPosition’ property to define the tip position, supported values are: ‘left’,’right’.
  • validatebox: Multiple validate rules on a field is supported now.
  • slider: Add ‘reversed’ property to determine if the min value and max value will switch their positions.
  • progressbar: Add ‘height’ property to allow users to define the height of progressbar.

License: GPL License Commercial License

Plugins

draggable
droppable
resizable
panel
tabs
accordion
layout
linkbutton
menubutton
splitbutton
menu
form
combo
combobox
combotree
combogrid
numberbox
validatebox
searchbox
messager
progressbar
spinner
numberspinner
timespinner
window
dialog
datagrid
propertygrid
pagination
tree
treegrid
calendar
datebox
datetimebox
slider
parser

Download this EasyUI package:

Download jQuery EasyUI 1.3

Download jQuery EasyUI 1.3

Current Version: 1.3

ChangeLog

Bug
  • combogrid: When set to ‘remote’ query mode, the ‘queryParams’ parameters can’t be sent to server. fixed.
  • combotree: The tree nodes on drop-down panel can not be unchecked while calling ‘clear’ method. fixed.
  • datetimebox: Setting ‘showSeconds’ property to false cannot hide seconds info. fixed.
  • datagrid: Calling ‘mergeCells’ method can’t auto resize the merged cell while header is hidden. fixed.
  • dialog: Set cache to false and load data via ajax, the content cannot be refreshed. fixed.
Improvement
  • The HTML5 ‘data-options’ attribute is available for components to declare all custom options, including properties and events.
  • More detailed documentation is available.
  • panel: Prevent script on panel body from running twice.
  • accordion: Add ‘getPanelIndex’ method.
  • accordion: The tools can be added on panel header.
  • datetimebox: Add ‘timeSeparator’ option that allows users to define the time separator.
  • pagination: Add ‘refresh’ and ‘select’ methods.
  • datagrid: Auto resize the column width to fit the contents when the column width is not defined.
  • datagrid: Double click on the right border of columns to auto resize the columns to the contents in the columns.
  • datagrid: Add ‘autoSizeColumn’ method that allows users to adjust the column width to fit the contents.
  • datagrid: Add ‘getChecked’ method to get all rows where the checkbox has been checked.
  • datagrid: Add ‘selectOnCheck’ and ‘checkOnSelect’ properties and some checking methods to enhance the row selections.
  • datagrid: Add ‘pagePosition’ property to allow users to display pager bar at either top,bottom or both places of the grid.
  • datagrid: The buffer view and virtual scroll view are supported to display large amounts of records without pagination.
  • tabs: Add ‘disableTab’ and ‘enableTab’ methods to allow users to disable or enable a tab panel.

License: GPL License Commercial License

Plugins

draggable
droppable
resizable
panel
tabs
accordion
layout
linkbutton
menubutton
splitbutton
menu
form
combo
combobox
combotree
combogrid
numberbox
validatebox
searchbox
messager
progressbar
spinner
numberspinner
timespinner
window
dialog
datagrid
propertygrid
pagination
tree
treegrid
calendar
datebox
datetimebox
slider
parser

Download this EasyUI package:

Extends two methods of EasyUI tree get parents nodes

$.extend($.fn.tree.methods,{
getCheckedExt: function(jq){
var checked = $(jq).tree(“getChecked”);
var checkbox2 = $(jq).find(“span.tree-checkbox2”).parent();
$.each(checkbox2,function(){
var node = $.extend({}, $.data(this, “tree-node”), {
target : this
});
checked.push(node);
});
return checked;
},
getSolidExt:function(jq){
var checked =[];
var checkbox2 = $(jq).find(“span.tree-checkbox2”).parent();
$.each(checkbox2,function(){
var node = $.extend({}, $.data(this, “tree-node”), {
target : this
});
checked.push(node);
});
return checked;
}
});

[demos]Build CRUD Application with jQuery EasyUI

It has become a common necessily for web application to collect data and manage it properly. CRUD allows us to generate pages to list and edit database records. This tutorial will show you how to implement a CRUD DataGrid using jQuery EasyUI framework.

We will use following plugins:

  • datagrid: show the user list data.
  • dialog: create or edit a single user information.
  • form: used to submit form data.
  • messager: to show some operation messages.

Step 1: Prepare database

We will use MySql database to store user information. Create database and ‘users’ table.

Step 2: Create DataGrid to display user information

Create the DataGrid with no javascript code.

  1. <table id=”dg” title=”My Users” class=”easyui-datagrid” style=”width:550px;height:250px”
  2.         url=”get_users.php”
  3.         toolbar=”#toolbar”
  4.         rownumbers=”true” fitColumns=”true” singleSelect=”true”>
  5.     <thead>
  6.         <tr>
  7.             <th field=”firstname” width=”50″>First Name</th>
  8.             <th field=”lastname” width=”50″>Last Name</th>
  9.             <th field=”phone” width=”50″>Phone</th>
  10.             <th field=”email” width=”50″>Email</th>
  11.         </tr>
  12.     </thead>
  13. </table>
  14. <div id=”toolbar”>
  15.     <a href=”#” class=”easyui-linkbutton” iconCls=”icon-add” plain=”true” onclick=”newUser()”>New User</a>
  16.     <a href=”#” class=”easyui-linkbutton” iconCls=”icon-edit” plain=”true” onclick=”editUser()”>Edit User</a>
  17.     <a href=”#” class=”easyui-linkbutton” iconCls=”icon-remove” plain=”true” onclick=”removeUser()”>Remove User</a>
  18. </div>

We don’t need to write any javascript code and we can show the user list as following image:

The DataGrid use the ‘url’ property that is assigned to ‘get_users.php’ to retrieve data from server.

Code of get_users.php file

  1. $rs = mysql_query(‘select * from users’);
  2. $result = array();
  3. while($row = mysql_fetch_object($rs)){
  4.     array_push($result, $row);
  5. }
  6. echo json_encode($result);

Step 3: Create form dialog

To create or edit a user, we use the same dialog.

  1. <div id=”dlg” class=”easyui-dialog” style=”width:400px;height:280px;padding:10px 20px”
  2.         closed=”true” buttons=”#dlg-buttons”>
  3.     <div class=”ftitle”>User Information</div>
  4.     <form id=”fm” method=”post”>
  5.         <div class=”fitem”>
  6.             <label>First Name:</label>
  7.             <input name=”firstname” class=”easyui-validatebox” required=”true”>
  8.         </div>
  9.         <div class=”fitem”>
  10.             <label>Last Name:</label>
  11.             <input name=”lastname” class=”easyui-validatebox” required=”true”>
  12.         </div>
  13.         <div class=”fitem”>
  14.             <label>Phone:</label>
  15.             <input name=”phone”>
  16.         </div>
  17.         <div class=”fitem”>
  18.             <label>Email:</label>
  19.             <input name=”email” class=”easyui-validatebox” validType=”email”>
  20.         </div>
  21.     </form>
  22. </div>
  23. <div id=”dlg-buttons”>
  24.     <a href=”#” class=”easyui-linkbutton” iconCls=”icon-ok” onclick=”saveUser()”>Save</a>
  25.     <a href=”#” class=”easyui-linkbutton” iconCls=”icon-cancel” onclick=”javascript:$(‘#dlg’).dialog(‘close’)”>Cancel</a>
  26. </div>

The dialog is created with no javascript code also.

Step 4: Implement creating and editing a user

When create a user, we open the dialog and clear form data.

  1. function newUser(){
  2.     $(‘#dlg’).dialog(‘open’).dialog(‘setTitle’,’New User’);
  3.     $(‘#fm’).form(‘clear’);
  4.     url = ‘save_user.php’;
  5. }

When edit a user, we open the dialog and load form data from the selected datagrid row.

  1. var row = $(‘#dg’).datagrid(‘getSelected’);
  2. if (row){
  3.     $(‘#dlg’).dialog(‘open’).dialog(‘setTitle’,’Edit User’);
  4.     $(‘#fm’).form(‘load’,row);
  5.     url = ‘update_user.php?id=’+row.id;
  6. }

The ‘url’ stores the URL address where the form will post to when save the user data.

Step 5: Save the user data

To save the user data we use the following code:

  1. function saveUser(){
  2.     $(‘#fm’).form(‘submit’,{
  3.         url: url,
  4.         onSubmit: function(){
  5.             return $(this).form(‘validate’);
  6.         },
  7.         success: function(result){
  8.             var result = eval(‘(‘+result+’)’);
  9.             if (result.success){
  10.                 $(‘#dlg’).dialog(‘close’);      // close the dialog
  11.                 $(‘#dg’).datagrid(‘reload’);    // reload the user data
  12.             } else {
  13.                 $.messager.show({
  14.                     title: ‘Error’,
  15.                     msg: result.msg
  16.                 });
  17.             }
  18.         }
  19.     });
  20. }

Before submit the form, the ‘onSubmit’ function will be called, in which we can validate the form field value. When the form field values are submited successfully, close the dialog and reload the datagrid data.

Step 6: Remove a user

To remove a user, we use the following code:

  1. function removeUser(){
  2.     var row = $(‘#dg’).datagrid(‘getSelected’);
  3.     if (row){
  4.         $.messager.confirm(‘Confirm’,’Are you sure you want to remove this user?’,function(r){
  5.             if (r){
  6.                 $.post(‘remove_user.php’,{id:row.id},function(result){
  7.                     if (result.success){
  8.                         $(‘#dg’).datagrid(‘reload’);    // reload the user data
  9.                     } else {
  10.                         $.messager.show({   // show error message
  11.                             title: ‘Error’,
  12.                             msg: result.msg
  13.                         });
  14.                     }
  15.                 },’json’);
  16.             }
  17.         });
  18.     }
  19. }

Before remove a row, we will display a confirm dialog to let user to determine whether to really remove the row data. When remove data successfully, call ‘reload’ method to refresh the datagrid data.

Step 7: Run the Code

Run the code in your browser with MySQL started.

So, you now know the basics of CRUD in jQuery EasyUI framework. Press below link to start the demo application.

Download the EasyUI example:

Download jQuery EasyUI 1.2.6

Download jQuery EasyUI 1.2.6

Current Version: 1.2.6

ChangeLog

Bug
  • tabs: Call ‘add’ method with ‘selected:false’ option, the added tab panel is always selected. fixed.
  • treegrid: The ‘onSelect’ and ‘onUnselect’ events can’t be triggered. fixed.
  • treegrid: Cannot display zero value field. fixed.
Improvement
  • propertygrid: Add ‘expandGroup’ and ‘collapseGroup’ methods.
  • layout: Allow users to create collapsed layout panels by assigning ‘collapsed’ property to true.
  • layout: Add ‘add’ and ‘remove’ methods that allow users to dynamically add or remove region panel.
  • layout: Additional tool icons can be added on region panel header.
  • calendar: Add ‘firstDay’ option that allow users to set first day of week. Sunday is 0, Monday is 1, …
  • tree: Add ‘lines’ option, true to display tree lines.
  • tree: Add ‘loadFilter’ option that allow users to change data format before loading into the tree.
  • tree: Add ‘loader’ option that allow users to define how to load data from remote server.
  • treegrid: Add ‘onClickCell’ and ‘onDblClickCell’ callback function options.
  • datagrid: Add ‘autoRowHeight’ property that allow users to determine if set the row height based on the contents of that row.
  • datagrid: Improve performance to load large data set.
  • datagrid: Add ‘loader’ option that allow users to define how to load data from remote server.
  • treegrid: Add ‘loader’ option that allow users to define how to load data from remote server.
  • combobox: Add ‘onBeforeLoad’ callback event function.
  • combobox: Add ‘loader’ option that allow users to define how to load data from remote server.
  • Add support for other loading mode such as dwr,xml,etc.
New Plugins
  • slider: Allows the user to choose a numeric value from a finite range.

License: GPL License Commercial License

Plugins

draggable
droppable
resizable
panel
tabs
accordion
layout
linkbutton
menubutton
splitbutton
menu
form
combo
combobox
combotree
combogrid
numberbox
validatebox
searchbox
messager
progressbar
spinner
numberspinner
timespinner
window
dialog
datagrid
propertygrid
pagination
tree
treegrid
calendar
datebox
datetimebox
slider
parser

Download this EasyUI package: