EasyUI Forum
March 28, 2024, 02:45:26 PM *
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 ... 151
1  General Category / EasyUI for jQuery / Re: Checkall in TreeGrid on: February 29, 2024, 07:45:25 PM
This example works fine.
Code:
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Custom CheckBox in TreeGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/material-blue/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": 2, "name": 'Dias' },
{ "id": 3, "name": 'NECTARVIS' },
{ "id": 4, "name": 'NECTARVIS-PGG', "_parentId": 3 },
{ "id": 5, "name": 'NECTARVIS-08.602.452', "_parentId": 4 },
{ "id": 6, "name": '% Peso Consumo', "_parentId": 4, "chave_faturamento": true },
{ "id": 7, "name": 'Contratado', "_parentId": 4, "chave_faturamento": true },
{ "id": 8, "name": 'Flex Minimo', "_parentId": 4 },
]
}
$(function () {
$('#tg').treegrid({
columns: [[
{
field: 'checked',
checkbox: true,
styler: function (value, row) {
if (!row.chave_faturamento) {
return { class: 'hidden' };
}
}
}, {
field: 'name',
title: 'Agente X Mês',
width: 400
}
]],
singleSelect: true,
selectOnCheck: false,
checkOnSelect: false,
onLoadSuccess: function () {
$(this).treegrid('getPanel').find('.hidden .datagrid-cell-check').html('')
},
onCheckAll: function (rows) {
const data = rows.filter(row => row.chave_faturamento)
const state = $.data(this, 'datagrid');
state.checkedRows = data;
}
})
})
</script>
<style>
.hidden .datagrid-cell-check {
visibility: hidden;
}
</style>
</head>

<body>
<table id="tg" title="Folder Browser" style="width:700px;height:450px" data-options="
data: data,
rownumbers: true,
idField: 'id',
treeField: 'name',
singleSelect: true
"></table>

</body>

</html>
2  General Category / EasyUI for jQuery / Re: Checkall in TreeGrid on: February 29, 2024, 01:19:31 AM
Please refer to this example.
Code:
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Custom CheckBox in 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 = [{
"id": 1,
"name": "C",
"size": "",
"date": "02/19/2010",
"children": [{
"id": 2,
"name": "Program Files",
"size": "120 MB",
"date": "03/20/2010",
"children": [{
"id": 21,
"name": "Java",
"size": "",
"date": "01/13/2010",
"state": "closed",
"children": [{
"id": 211,
"name": "java.exe",
"size": "142 KB",
"date": "01/13/2010"
}, {
"id": 212,
"name": "jawt.dll",
"size": "5 KB",
"date": "01/13/2010"
}]
}, {
"id": 22,
"name": "MySQL",
"size": "",
"date": "01/13/2010",
"state": "closed",
"children": [{
"id": 221,
"name": "my.ini",
"size": "10 KB",
"date": "02/26/2009"
}, {
"id": 222,
"name": "my-huge.ini",
"size": "5 KB",
"date": "02/26/2009"
}, {
"id": 223,
"name": "my-large.ini",
"size": "5 KB",
"date": "02/26/2009"
}]
}]
}, {
"id": 3,
"name": "eclipse",
"size": "",
"date": "01/20/2010",
"children": [{
"id": 31,
"name": "eclipse.exe",
"size": "56 KB",
"date": "05/19/2009"
}, {
"id": 32,
"name": "eclipse.ini",
"size": "1 KB",
"date": "04/20/2010"
}, {
"id": 33,
"name": "notice.html",
"size": "7 KB",
"date": "03/17/2005"
}]
}]
}]
$(function () {
$('#tg').treegrid({
columns: [[
{
field: 'checked',
checkbox: true,
styler: function (value, row) {
var names = ['Java', 'C', 'eclipse.exe', 'eclipse.ini'];
if ($.inArray(row.name, names) == -1) {
return { class: 'hidden' };
}
}
}, {
field: 'name',
title: 'Agente X Mês',
width: 230
}
]],
singleSelect: true,
selectOnCheck: false,
checkOnSelect: false,
onLoadSuccess: function(){
$(this).treegrid('getPanel').find('.hidden .datagrid-cell-check').html('')
},
onCheckAll: function(rows){
const data = rows.filter(row=>{
var names = ['Java', 'C', 'eclipse.exe', 'eclipse.ini'];
if ($.inArray(row.name, names) >= 0) {
return true;
} else {
return false;
}
})
const state = $.data(this, 'datagrid');
state.checkedRows = data;
}
})
})
</script>
<style>
.hidden .datagrid-cell-check {
visibility: hidden;
}
</style>
</head>

<body>
<table id="tg" title="Folder Browser" style="width:700px;height:250px" data-options="
data: data,
rownumbers: true,
idField: 'id',
treeField: 'name',
singleSelect: true
"></table>

</body>

</html>
3  General Category / EasyUI for jQuery / Re: Checkall in TreeGrid on: February 27, 2024, 08:15:01 PM
The 'checkbox' selection is the built-in functionality in the treegrid component. Please look at this example:

https://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid&theme=material-teal&dir=ltr&pitem=Custom%20CheckBox&sort=asc

If you want to custom the checkbox column, please define the 'title' property for your checkbox column.
Code:
{
field: 'checked',
title: '<input type="checkbox">',
formatter: ...
}
4  General Category / EasyUI for jQuery / Re: Datalist checked rows on: February 21, 2024, 12:13:49 AM
Please show an example to demonstrade your issue.
5  General Category / EasyUI for jQuery / Re: set Checked Checkbox not working on: February 21, 2024, 12:11:49 AM
Please call the 'check' or 'uncheck' methods instead.

Code:
that.chkEnterAlarm.checkbox('check');
that.chkEnterAlarm.checkbox('uncheck');
6  General Category / EasyUI for jQuery / Re: Column width bug with loadData to datagrid on: February 21, 2024, 12:05:57 AM
Please look at this code, it 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>
$(function () {
$('#dg').datagrid({
columns: [[
{ field: 'nazwa', title: 'Nazwa', width: '160px', halign: 'center' },
{ field: 'opis', title: 'Opis', width: '160px', halign: 'center' },
{
field: 'typ', title: 'Typ', width: '160px', halign: 'center',
styler: function (value, row, index) {
if (!row.idProdukt > 0) {
return 'background:#FFC300;';
}
}
},
{ field: 'nrKatalogowy', title: 'Nr katalogowy', width: '160px', halign: 'center' },
{
field: 'producent', title: 'Producent', width: '120px', halign: 'center',
styler: function (value, row, index) {
if (!row.idProducent > 0) {
return 'background:#FFC300;';
}
}
},
{ field: 'ilosc', title: 'Ilość', width: '50px', halign: 'center', align: 'right' },
{
field: 'jm', title: 'J.m.', width: '50px', halign: 'center',
styler: function (value, row, index) {
if (!row.idJm > 0) {
return 'background:#FFC300;';
}
}
},
{ field: 'cena', title: 'Cena', width: '80px', halign: 'center' },
{
field: 'rabat', title: 'Rabat', width: '50px', halign: 'center', align: 'right',
formatter: function (value, row, index) {
return (value || 0) + '%';
}
},
{ field: 'wartosc', title: 'Wartość', width: '80px', halign: 'center' },
{
field: 'waluta', title: 'Waluta', width: '60px', halign: 'center',
styler: function (value, row, index) {
if (!row.idWaluta > 0) {
return 'background:#FFC300;';
}
}
},
]],
idField: 'id',
rownumbers: true,
singleSelect: true
});
})
function loadData() {
$('#dg').datagrid('clearSelections').datagrid('loadData', { total: 0, rows: [] });
}
</script>
</head>

<body>
<button onclick="loadData()">LoadData</button>
<table id="dg"></table>

</body>

</html>
7  General Category / EasyUI for jQuery / Re: Text Editor not updating on: February 12, 2024, 06:35:04 AM
The 'getValue' method returns the real value displaying on the editor. Please download the latest version from https://www.jeasyui.com/extension/texteditor.php.
8  General Category / EasyUI for jQuery / Re: Custom params when filtering on: February 12, 2024, 06:33:27 AM
This issue has been solved. Please download the latest version from https://www.jeasyui.com/extension/datagrid_filter.php.
9  General Category / EasyUI for jQuery / Re: MaskedBox Required TRUE not working? on: February 05, 2024, 01:52:16 AM
This is the possible solution for maskedbox.

1. Extend a new validation type.
Code:
$.extend($.fn.validatebox.defaults.rules, {
notempty: {
validator: function (value, param) {
var opts = $(this).parent().prev().maskedbox('options');
var tt = (value || '').split('');
var vv = [];
for (var i = 0; i < opts.mask.length; i++) {
if (opts.masks[opts.mask[i]]) {
var t = tt[i];
vv.push(t != opts.promptChar ? t : '');
}
}
return vv.join('') != '';
},
message: 'The field is required.'
}
});

2. Attach it to the maskedbox.
Code:
<input id="mb" validType="notempty" class="easyui-maskedbox" mask="(999) 999-9999" label="Phone Number:"
labelPosition="top" style="width:100%">
10  General Category / EasyUI for jQuery / Re: Set onClose dialog on: February 05, 2024, 01:22:05 AM
The 'onClose' event handler can be attached into the html markup.
Code:
<script>
function onDialogClose(){
console.log('dialog closed')
}
</script>
<div id="dlgEditVehicle" class="easyui-dialog" data-options="buttons:'#buttons',closed:true,resizable:true,onClose:onDialogClose"
style="width:500px;height:200px;padding:20px;">
...
</div>
11  General Category / EasyUI for jQuery / Re: textbox width=100% display not correctly in flex mode on: January 16, 2024, 12:58:37 AM
Please look at this code, it works fine.
Code:
    <div style="width:300px;display:flex;">
        <div style="margin:2px;flex:1;overflow: hidden;border:1px solid red;">
          <input class="easyui-datebox" data-options="" style="width:100%;">
        </div>
        <div style="margin:2px;flex:1;overflow: hidden;border:1px solid blue;">
            <input class="easyui-datebox" data-options="" style="width:100%;">
        </div>
    </div>
12  General Category / EasyUI for jQuery / Re: textbox width=100% display not correctly in flex mode on: January 11, 2024, 07:20:53 PM
Please call this code instead.
Code:
    <div style="width:800px;display:flex;">
        <div style="margin:2px;flex:1;border:1px solid red;">
          <input class="easyui-datebox" data-options="" style="width:100%;">
        </div>
        <div style="margin:2px;flex:1;border:1px solid blue;">
            <input class="easyui-datebox" data-options="" style="width:100%;">
        </div>
    </div>
13  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.
Code:
$.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.
Code:
$('#dg').datagrid('enableFilter', [
                {
                    field:'Users',
                    type:'textbox',
                    op:['equal','mcontains']
                },
...
14  General Category / EasyUI for jQuery / Re: Form Load - First Array Element on: January 02, 2024, 06:48:04 PM
Call this code to load the email address of the first item.
Code:
$('#fm').form('load',{email:data[0].Email});
15  General Category / EasyUI for jQuery / Re: radiogroup - disable method on: December 21, 2023, 11:57:01 PM
This is the extended methods.
Code:
$.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:
Code:
$('#formModMold .mChamberType').radiogroup('disable');
Pages: [1] 2 3 ... 151
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!