EasyUI Forum
January 24, 2026, 02:29:21 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1] 2 3 ... 10
 1 
 on: January 19, 2026, 04:19:34 AM 
Started by jega - Last post by jega
Hi

Have an combobox with locale and a datagrid

      <input id="countryCode" name="countryCode" class="easyui-combobox" style="width:200px" data-options="
          valueField: 'countryCode',
          textField: 'countryName',
          editable: false,
          data:[
             {'countryName':'Danish','countryCode':'da'},
             {'countryName':'English','countryCode':'en'}
          ],
          onClick: function(rec){
             loadLocale(rec.countryCode);
          }">


How can i set the language in loadLocale function

Have tried a lot of things, but with no luck.

When i load <script src="easyui/easyloader.js"></script> and use easyloader.locale = 'da' in the document ready, it works, but not in loadLocale.

However, if i load easyloader.js then the datagrid on the site is now without filter. Just remove the script tag then filter is back.


Any help




 2 
 on: January 11, 2026, 09:02:12 AM 
Started by jega - Last post by jega
Solution.

Columns: from db (added opacity)

    {
        "field": "number",
        "styler": "columnColorStyler('ffcccc','0.5')",
        "title": "Number 1"
    },
    {
        "field": "number",
        "styler": "colColor",
        "styler": "columnColorStyler('c1ffc1','0.5')",
        "title": "Number 2"
    }


Then these 2 functions.

   function columnColorStyler(color,colorOpacity){
      return function(value){
            return 'background-color:'+hexToRGBA(color, colorOpacity)
      }
   }

   function hexToRGBA(hex, opacity) {
       return 'rgba(' + (hex).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(isFinite(opacity) ? opacity : 1).join(',') + ')';
   }


With this, save an hex color and opacity to db for each column data

If you don't want opacity, use this only

   function columnColorStyler(color){
      return function(value){
            return 'background-color:'+color)
      }
   }

 3 
 on: January 10, 2026, 02:53:47 AM 
Started by jega - Last post by jega
Hi.

Have problems finding a solution on this.

Populating datagrid with columns from database. The columns has individual colors depending on the type.

ajax call:
           success: function(data){
            data.forEach(col => {
               if (col.styler){
                  col.styler = eval(col.styler)
               }
            });
            $('#dgList').datagrid({
               columns:[data],
               title: data.titleName
            })
           }

Columns:

    {
        "field": "number",
        "align": "center",
        "styler": "colColor",
        "colorValue": "#ffcccc",
        "title": "Number 1",
        "formatter": "formatTooltip"
    },
    {
        "field": "number",
        "align": "center",
        "styler": "colColor",
        "colorValue": "#c1ffc1",
        "title": "Number 2",
        "formatter": "formatTooltip"
    }

But how to cell style the column based on this individual color

 4 
 on: January 03, 2026, 04:16:02 PM 
Started by jega - Last post by jega
Found solution

var item = $('#menu_setup').menu('findItem', {id:'objID'});
$('#menu_setup').menu('setText', {
   target: item.target,
   text: 'New Text'
})

Or if you want så search by name

var item = $('#menu_setup').menu('findItem', {name:'xxx'});

 5 
 on: January 03, 2026, 06:43:07 AM 
Started by jega - Last post by jega
Looking for a way to change the text dynamicaly

<div id="menu_setup" class="easyui-menu">
   <div id="upload" data-options="iconCls:'icon-upload'">
      <span>(1) Upload</span>
         <div>
            <div id="objID" data-options="iconCls:'icon-imageupload'">TEXT TO CHANGE</div>
         </div>
   </div>
</div>

Tried $('#objID').html('Changed text') and $('#objID').text('Changed text') whiuch both change the text but now there is no icon class and text starts from icon place. See attachement


Happy New Year

Jesper

 6 
 on: December 16, 2025, 02:49:40 AM 
Started by jega - Last post by jega
Found the answer.

It was the onBeforeDrag and -drop i need to handle.


 7 
 on: December 16, 2025, 02:43:49 AM 
Started by jega - Last post by jega
Hi. Have a panel with 100% width. When it expands, the site scrollbar goes over panel

See attached image 1 and 2

 8 
 on: December 16, 2025, 02:35:59 AM 
Started by jega - Last post by jega
Hi jarry

Thanks for an sample. That was more easy than i thought.

But, it can only drag from player to team, not from team to player.

 9 
 on: December 15, 2025, 11:50:07 PM 
Started by jega - Last post by jarry
Here is the example shows how to drag a row from player datagrid and drop it on the team datagrid.
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 data1 = [
      { "playerUUID": "UUID1", "playerName": "Name1" },
      { "playerUUID": "UUID2", "playerName": "Name2" },
      { "playerUUID": "UUID3", "playerName": "Name3" },
      { "playerUUID": "UUID4", "playerName": "Name4" },
      { "playerUUID": "UUID5", "playerName": "Name5" }
    ];
    var data2 = [
      { "playerUUID": "UUID6", "playerName": "Name6" },
      { "playerUUID": "UUID7", "playerName": "Name7" }
    ];
    $(function () {
      $('#dgPlayer').datagrid({
        singleSelect: true,
        data: data1,
        onLoadSuccess: function () {
          $(this).datagrid('enableDnd');
        },
        onBeforeDrop: function () {
          return false;
        }
      })
      $('#dgTeam').datagrid({
        singleSelect: true,
        data: data2,
        onLoadSuccess: function () {
          $(this).datagrid('enableDnd');
        },
        onBeforeDrag: function () {
          return false;
        }
      })

    })
  </script>
</head>

<body>
  <div class="f-row">
    <div>
      <table id="dgPlayer" title="Player" style="width:400px;height:250px">
        <thead>
          <tr>
            <th data-options="field:'playerUUID',width:100">playerUUID</th>
            <th data-options="field:'playerName',width:200">playerName</th>
          </tr>
        </thead>
      </table>
    </div>
    <div>
      <table id="dgTeam" title="Team" style="width:400px;height:250px">
        <thead>
          <tr>
            <th data-options="field:'playerUUID',width:100">playerUUID</th>
            <th data-options="field:'playerName',width:200">playerName</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>


</body>

</html>

 10 
 on: December 13, 2025, 02:27:58 PM 
Started by jega - Last post by jega
HI.

Have searched around but not found exact what i need.

Have a datagrid with players and 4 datagrids for teams.

Players dg have an ID, playerUUID and playerName column. Team dg has playerUUID and playerName columns

Want to drag from player to a team (and remove it from player). If placed wrong, drag it from team back to player. No dnd between teams.

Need it in a small project in 8 days. ;-)

Any help

Regards Jesper

Pages: [1] 2 3 ... 10
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!