Recent Posts

Hi.

Have played around with the autoicon.js to have more of them, pointing to different folders

Want to put autoicon.js in this folder websitefolder/easyui/js

icon folders is site/easyui/themes/iconsite and site/easyui/themes/iconstandard

Want 2 auto files auto-iconsite.js and auto-iconstandard.js

The best solution would be if there could be only 1 autoicon.js file, looking in one or more folders

Thanks jarry


Explanation to other users.

Use the url in this thread to the theme builder.

Create your style in the Setting tab. For use in your project, select tab CSS and copy the style code.

• Under easyui/themes, create a new folder and name it what describe your theme "mytheme"
• Copy all files from default theme to this new folder
• Open easyui.css file and overwrite everything with the created CSS

Link to this new theme
<link rel="stylesheet" type="text/css" href="easyui/themes/mytheme/easyui.css">


Go to theme builder LESS tab and copy everything, and save it in a text file (Important)

When you need to edit in the theme, open theme builder, goto LESS tab, overwrite with your theme LESS code and push the little reload button on the LESS tab, and you are back.


Regards Jesper - Denmark

Or like this you can build it dynamic

Regards Jesper - Denmark


<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true">
   <table id="dgn">
   </table>
</div>


<script>

   $( document ).ready(function(){
      addItems()
   });

   function addItems() {
      $('#win').window({
         width:500,
         height:200,
         title:'Item Selection',
         modal:true
      });
      $('#dgn').datagrid({
         fit: true,
         singleSelect: true,
         data: [
            {item:'MyItem 11', description:'MyDescription 11'},
            {item:'MyItem 21', description:'MyDescription 21'}
         ],
         columns:[[
            {field:'ck',title:'Select',checkbox:true},
            {field:'item',title:'Item',width:150},      
            {field:'description',title:'Description',width:150}
         ]],
         toolbar: [{
            iconCls: 'icon-add',
            plain: true,
            text: 'Add',
            handler: function(){alert('add')}
         },{
            iconCls: 'icon-edit',
            plain: true,
            text: 'Edit',
            handler: function(){
               var row = $('#dgn').datagrid('getSelected')
               if (row) {
                  alert('Edit item '+row.item)
               }
            }
         },{
            iconCls: 'icon-remove',
            plain: true,
            text: 'Remove',
            handler: function(){alert('remove')}
         }]
         
      });            
   }
   
</script>

Thank you Jega, your replies were very helpful, just what I needed to resolve my questions !

Datagrid in window with toolbar

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px" data-options="iconCls:'icon-save',modal:true">
   <table id="dgn" class="easyui-datagrid" data-options="
            fit: true,
            singleSelect:false,
            idField:'ID',
            striped:true,
            toolbar:'#dgToolbar'">
      <thead>
         <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th data-options="field:'item',width:'150px'">Item</th>
            <th data-options="field:'description',width:'150px'">Description</th>
         </tr>
      </thead>
   </table>
   <div id="dgToolbar" style="padding:10px 10px 10px 10px">
      <a id="createButton" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="newData()">Add</a>
      <a id="editButton" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="editData()">Edit</a>
      <a id="deleteButton" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="deleteData()">Delete</a>
   </div>
</div>

Hi

<th data-options="field:'ck',checkbox:true"></th>
Set false or remove, but if you need it, it also must be in title, as it is to select all

Prevent top row to scroll:
$('#dgn').datagrid({fit:true})

Toolbar:
There is a lot of samples with toolbar in the datagrid demo

Count selected rows:
var rows = $('#dgn').datagrid({'getSelections')
console.log(rows.length)

Write it in title
$('#win').window('setTitle')

Demo page and documentation is your friend ;-)

Hello

I have the following function, which is called from a main datagrid to display a list of possible items

Code:

function addItems(){
	var row = $('#dg').datagrid('getSelected');
	if (row){
		$('#win').window({
			width:500,
			height:200,
			title:'Item Selection',
			modal:true
		});
		$('#dgn').datagrid({
			singleSelect:false,
			url:'get_items.php?item='+row.item,
			columns:[[
				{field:'item',title:'Item',width:150},		
				{field:'description',title:'Description',width:150},				
			        {field:'ck',title:'Select',checkbox:true},
			]]
		});				
	}		
}

I have the following problems / questions

How do i prevent the checkbox from being displayed as a title field... title:'Select' doesn't seem to work

How do I prevent the top row "titles" scrolling with the returned data ?

Is it possible to add a toolbar to a datagrid within a window ?

I would like to show a running count of items selected in either the toolbar or Window Title bar ?

Any guidance would be appreciated

Thank you

Please open https://www.jeasyui.com/themebuilder/index.php?less=1 instead.

You can store the LESS definition that is on the left tab panel and later you can continue to edit the theme by restoring the LESS definition.

Hi.

When using theme builder i can set my own colors and get the CSS from the CSS-tab. Creating a folder "MyOwnTheme", copy all files from defailt theme to this folder and paste the new css styles to the easyyui.css file.

So far so good

What about all other css files accordion.css, calendar.css ...... isn't there anything to change in these files ??

If i have my own easyui.css file and paste the code to css-tab in theme builder i excpected it would show me the theme, but it doesn't. How to edit my own theme again ??

Regards Jesper.

You got the point, even if my text was incorrect spelled.

For others.

If data to datagrid is from a database, then format it directly in your SQL or make a view with the formated columns, and return the formatted JSON data directly to the datagrid.

Please mark topic as [SOLVED] ;-)