 Show Posts
|
|
Pages: [1] 2 3 ... 150
|
|
2
|
General Category / EasyUI for jQuery / Re: datagrid + enableFilter
|
on: November 14, 2023, 01:32:01 AM
|
Please extend a new operator to filter multiple values. $.extend($.fn.datagrid.defaults.operators, {
mequal: {
text: 'Equal',
isMatch: function (source, value) {
const vv = value.split(',');
const index = vv.indexOf(source);
return index != -1;
}
}
})
And then apply it to your code. onChange: function (value) {
if (value == '') {
dg_HW.datagrid('removeFilterRule', 'Year');
} else {
dg_HW.datagrid('addFilterRule', {
field: 'Year',
op: 'mequal',
value: value.join(',')
});
}
dg_HW.datagrid('doFilter');
}
|
|
|
|
|
3
|
General Category / EasyUI for jQuery / Re: Swap rows in datagrid
|
on: October 14, 2023, 06:14:00 PM
|
This code shows how to swap two rows in a datagrid. var index1 = 2;
var index2 = 3;
var dg = $('#dg');
var rows = dg.datagrid('getRows');
var temp = rows[index1];
rows[index1] = rows[index2];
rows[index2] = temp;
dg.datagrid('refreshRow',index1);
dg.datagrid('refreshRow',index2);
|
|
|
|
|
4
|
General Category / EasyUI for jQuery / Re: combobox
|
on: September 10, 2023, 08:02:39 PM
|
Please refer to this example. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ComboBox - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script> $(function () { var cc = $('#cc'); cc.combobox({ onChange: function (v) { var g = $(this).next().find('.combobox-g'); var data = cc.combobox('getData'); var index = data.findIndex(r => r.value == v); if (index >= 0) { g.html(data[index].text); } else { g.html(''); } }, onResize: function () { var width = cc.combobox('textbox').css('width'); $(this).next().find('.combobox-g').css('width', width); } }) var tb = cc.combobox('textbox').hide(); var t = $('<div style="display:inline-block;height:28px;padding-top:6px;vertical-align:top"></div>').addClass('combobox-g').insertAfter(tb); cc.combobox('resize'); }) </script> </head> <body> <input id="cc" name="LineWidth" style="width:200px;" data-options=" required: true, panelHeight: 'auto', editable: false, valueField: 'value', textField: 'text', value: '', data: [ { value:'0', text:'<hr style="border-top: 0px solid">' }, { value:'1', text:'<hr style="border-top: 1px solid">' }, { value:'2', text:'<hr style="border-top: 2px solid">' }, { value:'3', text:'<hr style="border-top: 3px solid">' }, { value:'4', text:'<hr style="border-top: 4px solid">' }, { value:'5', text:'<hr style="border-top: 5px solid">' } ] "> </body> </html> |
|
|
|
|
11
|
General Category / EasyUI for jQuery / Re: Error on Drag and Drop Datagrid
|
on: July 18, 2023, 11:32:04 PM
|
This code works fine. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-dnd.js"></script> <script> var data = [ { "text": "Epson WorkForce 845", "group": "Printer" }, { "text": "Canon PIXMA MG5320", "group": "Printer" }, { "text": "HP Deskjet 1000 Printer", "group": "Printer" }, { "text": "Cisco RV110W-A-NA-K9", "group": "Firewall" }, { "text": "ZyXEL ZyWALL USG50", "group": "Firewall" }, { "text": "NETGEAR FVS318", "group": "Firewall" }, { "text": "Logitech Keyboard K120", "group": "Keyboard" }, { "text": "Microsoft Natural Ergonomic Keyboard 4000", "group": "Keyboard" }, { "text": "Logitech Wireless Touch Keyboard K400", "group": "Keyboard" }, { "text": "Logitech Gaming Keyboard G110", "group": "Keyboard" }, { "text": "Nikon COOLPIX L26 16.1 MP", "group": "Camera" }, { "text": "Canon PowerShot A1300", "group": "Camera" }, { "text": "Canon PowerShot A2300", "group": "Camera" } ] $(function () { $('#dl').datalist({ data: data, onLoadSuccess: function () { $(this).datagrid('enableDnd'); } }); }) </script> </head> <body> <div id="dl" title="DataList" style="width:400px;height:250px"> </div> </body> </html> |
|
|
|
|
14
|
General Category / EasyUI for jQuery / Re: Change background colour of a table cell in a treegrid with onClickCell
|
on: June 30, 2023, 06:46:49 PM
|
Please define a 'styler' function for the columns to display the background color. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TreeGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script> var data = { "total": 7, "rows": [ { "id": 1, "name": "All Tasks", "begin": "3/4/2010", "end": "3/20/2010", "progress": 60, "iconCls": "icon-ok" }, { "id": 2, "name": "Designing", "begin": "3/4/2010", "end": "3/10/2010", "progress": 100, "_parentId": 1, "state": "closed" }, { "id": 21, "name": "Database", "persons": 2, "begin": "3/4/2010", "end": "3/6/2010", "progress": 100, "_parentId": 2 }, { "id": 22, "name": "UML", "persons": 1, "begin": "3/7/2010", "end": "3/8/2010", "progress": 100, "_parentId": 2 }, { "id": 23, "name": "Export Document", "persons": 1, "begin": "3/9/2010", "end": "3/10/2010", "progress": 100, "_parentId": 2 }, { "id": 3, "name": "Coding", "persons": 2, "begin": "3/11/2010", "end": "3/18/2010", "progress": 80 }, { "id": 4, "name": "Testing", "persons": 1, "begin": "3/19/2010", "end": "3/20/2010", "progress": 20 } ], "footer": [ { "name": "Total Persons:", "persons": 7, "iconCls": "icon-sum" } ] } function styler(value,row){ const field = this.field; return (row['style']||{})[field]; } $(function(){ $('#tg').treegrid({ onClickCell: function(field,row,index){ row['style'] = row['style']||{} row['style'][field] = 'background:red;color:#fff'; $(this).treegrid('refreshRow',row['id']) } }) }) </script> </head> <body> <table id="tg" title="TreeGrid" style="width:700px;height:250px" data-options=" iconCls: 'icon-ok', rownumbers: true, animate: true, collapsible: true, fitColumns: true, data: data, idField: 'id', treeField: 'name' "> <thead> <tr> <th data-options="field:'name',width:180,styler:styler">Task Name</th> <th data-options="field:'persons',width:60,align:'right',styler:styler">Persons</th> <th data-options="field:'begin',width:80,styler:styler">Begin Date</th> <th data-options="field:'end',width:80,styler:styler">End Date</th> </tr> </thead> </table> </body> </html> |
|
|
|
|
15
|
General Category / EasyUI for jQuery / Re: NumberSpinner Long Press Increase/Decrease Values
|
on: June 26, 2023, 08:41:08 PM
|
Please refer to this code. var ns = $('#ns');
function doSpin(target, down) {
var opts = $.data(target, 'numberspinner').options;
var v = parseFloat($(target).numberbox('getValue') || opts.value) || 0;
if (down) {
v -= opts.increment;
} else {
v += opts.increment;
}
$(target).numberbox('setValue', v);
}
var opts = ns.numberspinner('options');
var icon = ns.numberspinner('getIcon', 0);
var spin = icon.find('.spinner-arrow');
spin.on('mousedown.spinner', function (e) {
var down = $(e.target).closest('.spinner-arrow').hasClass('spinner-button-bottom');
opts.longTimer1 = setInterval(function () {
doSpin(ns[0],down);
}, 100)
}).on('mouseup.spinner', function (e) {
clearInterval(opts.longTimer1)
}).on('mouseout.spinner', function (e) {
clearInterval(opts.longTimer1)
})
|
|
|
|
|
