EasyUI Forum
March 04, 2024, 02:13:32 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
  Home Help Search Login Register  
  Show Posts
Pages: 1 [2] 3 4 ... 151
16  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.
Code:
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)
}
}];
17  General Category / EasyUI for jQuery / Re: IE11 Support status on: December 01, 2023, 01:08:56 AM
All the major browsers including IE11 are compatible with easyui package.
18  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.
Code:
$.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.
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');
}
19  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.
Code:
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);
20  General Category / EasyUI for jQuery / Re: combobox on: September 10, 2023, 08:02:39 PM
Please refer to this example.
Code:
<!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=&quot;border-top: 0px solid&quot;>' },
      { value:'1', text:'<hr style=&quot;border-top: 1px solid&quot;>' },
      { value:'2', text:'<hr style=&quot;border-top: 2px solid&quot;>' },
      { value:'3', text:'<hr style=&quot;border-top: 3px solid&quot;>' },
      { value:'4', text:'<hr style=&quot;border-top: 4px solid&quot;>' },
      { value:'5', text:'<hr style=&quot;border-top: 5px solid&quot;>' }
   ]
">
</body>

</html>
21  General Category / EasyUI for jQuery / Re: inputmode parameter on: August 21, 2023, 12:39:54 AM
Please call the 'textbox' method to get the inputing box and then set its 'inputmode' attribute.
Code:
var input = $('#tt').textbox('textbox');
input.attr('inputmode','none');
22  General Category / EasyUI for jQuery / Re: .treegrid('getRowIndex', row['id']) not working. Always returns a -1 on: August 17, 2023, 01:20:50 AM
The 'reload' method accepts the 'id' parameter. If the 'id' value is missing, the treegrid will reload the root node. If the 'id' value is set, the treegrid will reload the specified node.

Code:
$(grid).treegrid('reload', idvalue);

Please try to pass the node's id value to the 'reload' method if you want to reload that node.
23  General Category / EasyUI for jQuery / Re: datagrid and toolbar on: August 13, 2023, 11:49:42 PM
Please call this code to get the toolbar bound to the datagrid. And then you will be able to access the buttons in the toolbar.
Code:
var tb = $('#dg').datagrid('options').toolbar;
...
24  General Category / EasyUI for jQuery / Re: .treegrid('getRowIndex', row['id']) not working. Always returns a -1 on: August 11, 2023, 12:13:55 AM
The row index doesn't valid in the treegrid component. Please pass the row id instead.
Code:
$('#' + grid_id).treegrid('refresh',row['id']);
$('#' + grid_id).treegrid('scrollTo',row['id']);
$('#' + grid_id).treegrid('selectRow',row['id']);
$('#' + grid_id).treegrid('highlightRow',row['id']);
25  General Category / Bug Report / Re: jeasyui-passwordbox on: July 26, 2023, 07:54:20 PM
This example works fine.
https://jeasyui.com/demo/main/index.php?plugin=PasswordBox&theme=material-teal&dir=ltr&pitem=&sort=asc
26  General Category / EasyUI for jQuery / Re: Change background colour of a table cell in a treegrid with onClickCell on: July 26, 2023, 07:53:20 PM
The 'idField' property in the treegrid component is required to identify a row node. While calling the 'refreshRow' or 'refresh' methods, the parameter should be passed with the identity field value.

Code:
$(this).treegrid('refreshRow',row['id']);
// or
$(this).treegrid('refresh',row['id']);
27  General Category / EasyUI for jQuery / Re: Error on Drag and Drop Datagrid on: July 18, 2023, 11:32:04 PM
This code works fine.
Code:
<!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>
28  General Category / EasyUI for jQuery / Re: showEvent property to Searchbox Menu on: July 01, 2023, 01:12:31 AM
The 'showEvent' property is available now. Please update to the latest version.
29  General Category / EasyUI for jQuery / Re: DataList doesn't refresh after updateRow on: June 30, 2023, 07:26:21 PM
These codes do the same behaviour.
Code:
$('#dl').datalist('getRows')[idx] = row; // update the row value
$('#dl').datalist('refreshRow', idx);    // and then refresh it
Code:
$('#dl').datalist('updateRow', { index: idx, row: row});  // update and refresh it at the same time
30  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.
Code:
<!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>
Pages: 1 [2] 3 4 ... 151
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!