 Show Posts
|
|
Pages: 1 2 [3] 4 5 ... 152
|
|
31
|
General Category / EasyUI for jQuery / Re: Does the Datagrid column filter input has to match exactly with cell data?
|
on: January 02, 2024, 07:12:43 PM
|
The extended operators can be made to filter multiple values in the rows. $.extend($.fn.datagrid.defaults.operators, {
mcontains:{
text:'Contains',
isMatch:function(source,value){
const vv = value.split(',').filter(r=>r);
for(let i=0; i<vv.length; i++){
const v = vv[i];
if (source.indexOf(v) >= 0){
return true;
}
}
return false;
}
}
})
This new operator can be applied to a filter input. $('#dg').datagrid('enableFilter', [
{
field:'Users',
type:'textbox',
op:['equal','mcontains']
},
...
|
|
|
|
|
33
|
General Category / EasyUI for jQuery / Re: radiogroup - disable method
|
on: December 21, 2023, 11:57:01 PM
|
This is the extended methods. $.extend($.fn.radiogroup.methods, {
disable: function(jq){
return jq.each(function(){
$(this).find('.radiobutton-f').radiobutton('disable');
})
},
enable: function(jq){
return jq.each(function(){
$(this).find('.radiobutton-f').radiobutton('enable');
})
}
})
Usage example: $('#formModMold .mChamberType').radiogroup('disable');
|
|
|
|
|
34
|
General Category / EasyUI for jQuery / Re: Datagrid toolbar by array
|
on: December 12, 2023, 08:33:11 PM
|
The combobox component can be attached to the toolbar. Please refer to the code below. Make sure to download the latest version. var toolbar = [{
text:'Add',
iconCls:'icon-add',
handler:function(){alert('add')}
},{
text:'Cut',
iconCls:'icon-cut',
handler:function(){alert('cut')}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){alert('save')}
},'-',{
type:'combobox',
data:[{value:'1',text:'text1'},{value:'2',text:'text2'}],
editable:false,
onChange:function(value){
alert(value)
}
}];
|
|
|
|
|
36
|
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');
}
|
|
|
|
|
37
|
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);
|
|
|
|
|
38
|
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> |
|
|
|
|
45
|
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> |
|
|
|
|
