' +
value + '%'
''
'';
return s;
} else {
return '';
}
}
}
]]
});
})
```
--------------------------------
### Implement Row Editing for jQuery EasyUI DataGrid
Source: https://github.com/giscafer/finalscheduler/blob/master/WebRoot/public/js/modules/easyui/demo/datagrid/rowediting.html
This comprehensive JavaScript code provides a set of functions for managing row editing in a jQuery EasyUI DataGrid. It includes logic to start and end editing, handle cell clicks, append new rows, remove existing rows, accept or reject changes, and retrieve all modified rows. The `editIndex` variable tracks the currently edited row to ensure only one row is edited at a time.
```JavaScript
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)){
var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'});
var productname = $(ed.target).combobox('getText');
$('#dg').datagrid('getRows')[editIndex]['productname'] = productname;
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickCell(index, field){
if (editIndex != index){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
var ed = $('#dg').datagrid('getEditor', {index:index,field:field});
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
function append(){
if (endEditing()){
$('#dg').datagrid('appendRow',{status:'P'});
editIndex = $('#dg').datagrid('getRows').length-1;
$('#dg').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}
}
function removeit(){
if (editIndex == undefined){return}
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
function accept(){
if (endEditing()){
$('#dg').datagrid('acceptChanges');
}
}
function reject(){
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
function getChanges(){
var rows = $('#dg').datagrid('getChanges');
alert(rows.length+' rows are changed!');
}
```
--------------------------------
### Configure jQuery EasyUI Pagination Layouts
Source: https://github.com/giscafer/finalscheduler/blob/master/WebRoot/public/js/modules/easyui/demo/pagination/layout.html
This JavaScript function demonstrates how to dynamically set different pagination layouts for a jQuery EasyUI pagination component. It takes a 'type' parameter to switch between various predefined layouts, including combinations of first/prev/next/last buttons, page lists, manual input, and numeric links.
```JavaScript
function setLayout(type){ var p = $('#pp'); switch(parseInt(type)){ case 1: p.pagination({layout:['first','prev','next','last']}); break; case 2: p.pagination({ layout:['list','sep','first','prev','sep','manual','sep','next','last','sep','refresh'], beforePageText:'Page', afterPageText:'of {pages}' }); break; case 3: p.pagination({layout:['links']}); break; case 4: p.pagination({layout:['first','prev','links','next','last']}); break; case 5: p.pagination({ layout:['first','prev','next','last','sep','links','sep','manual'], beforePageText:'Go Page', afterPageText:'' }); break; } }
```
--------------------------------
### Enable ComboTree with jQuery EasyUI
Source: https://github.com/giscafer/finalscheduler/blob/master/WebRoot/public/js/modules/easyui/demo/combotree/actions.html
Enables the ComboTree component, restoring its interactivity, using the 'enable' method.
```JavaScript
function enable(){ $('#cc').combotree('enable'); }
```
--------------------------------
### Display Context Menu with jQuery EasyUI
Source: https://github.com/giscafer/finalscheduler/blob/master/WebRoot/public/js/modules/easyui/demo/menu/basic.html
This JavaScript snippet uses jQuery to bind a 'contextmenu' event to the entire document. It prevents the default browser context menu and instead displays a custom menu (identified by '#mm') at the exact coordinates of the mouse click using jQuery EasyUI's menu plugin.
```JavaScript
$(function(){ $(document).bind('contextmenu',function(e){ e.preventDefault(); $('#mm').menu('show', { left: e.pageX, top: e.pageY }); }); });
```
--------------------------------
### Initialize jQuery EasyUI Combo Box for Language Selection
Source: https://github.com/giscafer/finalscheduler/blob/master/WebRoot/public/js/modules/easyui/demo/combo/basic.html
This jQuery snippet initializes an EasyUI combo box (`#cc`) as required and non-editable. It appends a selection panel (`#sp`) to the combo box and sets up a click handler for its input elements. When an input is clicked, it updates the combo box's value and text, then hides the panel, effectively selecting a language.
```javascript
$(function(){ $('#cc').combo({ required:true, editable:false }); $('#sp').appendTo($('#cc').combo('panel')); $('#sp input').click(function(){ var v = $(this).val(); var s = $(this).next('span').text(); $('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel'); }); });
```
--------------------------------
### Handle jQuery EasyUI Menu Events
Source: https://github.com/giscafer/finalscheduler/blob/master/WebRoot/public/js/modules/easyui/demo/menu/events.html
This JavaScript code defines a handler for menu item clicks and binds a context menu to the document, displaying it on right-click at the mouse position.
```JavaScript
function menuHandler(item){ $('#log').prepend('Click Item: '+item.name+'
'); } $(function(){ $(document).bind('contextmenu',function(e){ e.preventDefault(); $('#mm').menu('show', { left: e.pageX, top: e.pageY }); }); });
```
--------------------------------
### Initialize jQuery Tooltip Plugin
Source: https://github.com/giscafer/finalscheduler/blob/master/WebRoot/WEB-INF/views/index.html
Applies the jQuery tooltip plugin to all elements with the attribute `rel=tooltip`. This provides interactive tooltips on hover.
```JavaScript
$("[rel=tooltip]").tooltip();
```
--------------------------------
### Displaying a sliding jQuery EasyUI messager box with timeout
Source: https://github.com/giscafer/finalscheduler/blob/master/WebRoot/public/js/modules/easyui/demo/messager/basic.html
This snippet shows how to display a messager box that slides into view and automatically closes after a specified timeout (5 seconds) using $.messager.show with showType:'slide'.
```javascript
function slide(){ $.messager.show({
title:'My Title',
msg:'Message will be closed after 5 seconds.',
timeout:5000,
showType:'slide'
}); }
```
--------------------------------
### jQuery EasyUI TreeGrid Context Menu Operations
Source: https://github.com/giscafer/finalscheduler/blob/master/WebRoot/public/js/modules/easyui/demo/treegrid/contextmenu.html
This snippet provides JavaScript functions for managing a jQuery EasyUI TreeGrid, including custom progress formatting, displaying a context menu on right-click, and performing actions like appending, removing, collapsing, and expanding tree nodes. It demonstrates interaction with the TreeGrid API and a jQuery EasyUI menu component.
```JavaScript
function formatProgress(value){
if (value){
var s = '' +
'
' + value + '%' + '
' +
'